拉斐爾 - 在動畫之後保存svg元素的屬性

Question

我對拉斐爾很新穎，我想用純粹的這個庫創建一個小型的蛇遊戲。我試着測試動畫函數來改變一個圓的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

我會試圖開始將動畫分解成您自己的功能，而不是單獨使用「動畫」，因爲這可能會非常緊縮。

因此，您可以使用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