2016-01-13 44 views
1

我對拉斐爾很新穎,我想用純粹的這個庫創建一個小型的蛇遊戲。我試着測試動畫函數來改變一個圓的cx/cy值並重復它(所以它會一直持續下去)。我的最終目標是擁有一個監聽器,以便在按下不同的方向鍵時,動畫方向會相應改變,但運動會持續進行。我有以下代碼:拉斐爾 - 在動畫之後保存svg元素的屬性

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更新屬性進行重複更改? (或任何其他圖書館的建議)

回答

0

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

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