0

我是拉斐尔的新手，正在制作动画。可以变形为上三角形或下三角形的钻石。动画中有五个点，我可以使用点击事件循环播放。我想要的是能够使用鼠标，以便在一次拖动中动画可以从任何一点移动到任何另一点。有谁知道如何实现这一点？

这是我的html：

<body>
  <div id='paper1'></div>
  <div class='animate'>
    <p>Animate!</p>
   </div>
</body>

还有我的js：

$(document).ready(function(){
  var x = 0;
  var paper = Raphael('paper1', 500, 500); 
  var p1 = paper.path("M200,200 L 250,230 L 300,200 L250,170 Z")
  p1.attr({"stroke-width": 4, fill: "red"});

  $('.animate').click(function(){
     morph(p1,x);
     x ++;
     if (x === 8) x = 0;
  });
});

var morph = function(shape, count){
  console.log(count);
  if (count === 0) path =      {path:"M200,200 L250,200 L300,200 L250,90 Z"};
  else if (count === 1) path = {path:"M200,200 L250,200 L300,200 L250,10 Z"};
  else if (count === 2) path = {path:"M200,200 L250,200 L300,200 L250,90 Z"};
  else if (count === 3) path = {path:"M200,200 L250,230 L300,200 L250,170 Z"};
  else if (count === 4) path = {path:"M200,200 L250,310 L300,200 L250,200 Z"};
  else if (count === 5) path = {path:"M200,200 L250,390 L300,200 L250,200 Z"};
  else if (count === 6) path = {path:"M200,200 L250,310 L300,200 L250,200 Z"};
  else if (count === 7) path = {path:"M200,200 L 250,230 L 300,200 L250,170 Z"};


  shape.animate(path,300);
}

非常感谢任何帮助。

C

4

1 回答 1

0

玩了一段时间后解决了这个问题。如果有人感兴趣，这是我的解决方案。 https://github.com/cmcguire79/raphael-widget

于 2013-03-06T17:43:35.520 回答