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

【问题标题】：Raphael - save attributes of svg element after animationRaphael - 动画后保存svg元素的属性
【发布时间】：2016-04-17 23:03:16
【问题描述】：

我对 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 更新属性进行重复更改？（或任何其他图书馆建议）

【问题讨论】：

标签： javascript animation svg raphael

【解决方案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

【讨论】：