Raphael

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

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

Raphael - save attributes of svg element after animation

javascript

animation

svg