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元素的属性

1 个答案: