Question

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

这是我的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

Answer 1

经过一番游戏解决了这个问题。如果有人有兴趣，这是我的解决方案。 https://github.com/cmcguire79/raphael-widget

使用拖动事件来变形形状

1 个答案: