javascript - Raphael - 动画后保存 svg 元素的属性

Question

我对 Raphael 很陌生，我想纯粹使用这个库创建一个小蛇游戏。我尝试测试 animate 函数来更改圆的 cx/cy 值并重复它(因此它会无限期地持续下去)。我的最终目标是拥有一个监听器，以便当按下不同的箭头键时，动画方向会相应改变，但运动会继续进行。我有以下代码:

var circle = paper.circle(50, 40, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");

var snakeMove = Raphael.animation({cx: circle.attr("cx")+30}, 1000, function(){
    circle.attr("cx", (circle.attr("cx") + 30).toString());
}).repeat(Infinity);
circle.animate(snakeMove);

JsFiddle demonstration

但是，动画完成后，cx 值会重置为原来的值。如何使用 Raphael 对 svg 更新属性进行重复更改？ (或任何其他库建议)

Answer 1

我很想开始将动画分解为您自己的函数，而不是单独使用“animate”，因为这可能会造成很大的限制。

因此，您可以仅使用 setInterval 并在 setInterval 函数内的动画中增加 cx 属性，然后您就可以执行您想要的操作。例如，每次您单击圆圈时，这都会交替...

 var DIRECTION=1
 setInterval( moveFunc, 1000);

 function moveFunc() {
   circle.animate({ cx: circle.attr('cx')+ 30*DIRECTION  }, 1000)
 }

 circle.click( function() { DIRECTION *= -1 } )

jsfiddle