Raphael JS：重複​​動畫路徑（無限）

Question

我想創建一個無限的「火車」，在paper.path行內移動一個方向。 我的代碼目前使用循環，並沒有真正的效果，我後。

這裏是小提琴：http://jsfiddle.net/y9XHw/

function updateLoop() { 

    var paper = Raphael(10, 50, 900, 1000); 
var line = paper.path("M300,95 L600,550").attr({'stroke':'#669900', 'stroke-width':5}); 

var line2 = paper.path("M300,95 L600,550").attr({'stroke-dasharray': "- ", 'stroke':'#99FF99', 'stroke-width':2}); 
    //alert(2); 
    line2.animate({ 
     path: ("M304,99 L600,550") 
    }, 500);  
} 

setInterval(updateLoop,500); 

Answer 1

我不知道你想要什麼，「我以後它不是一個真正的效果」是什麼意思。 這是你想要的嗎？

http://jsfiddle.net/XcsN/y9XHw/17/ 新版本：http://jsfiddle.net/XcsN/y9XHw/19/

我改變這一行：

var line2 = paper.path("M-10,3 L310,3").attr({'stroke-dasharray': "- ", 'stroke':'#99FF99', 'stroke-width':2}); 
    line2.animate({ 
     path: ("M5,3 L300,3") 
    }, 500); 

Answer 2

使用Raphael.animation()創建動畫對象和animation.repeat()重複動畫。

$(function(){ 
    var paper = Raphael(10, 50, 320, 200); 
    var c = paper.path("M 250 250 l 0 -200 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"); 
    c.attr({ fill: '#000' }); 
    c.click(function() { 
     //alert(2); 
     var animation = Raphael.animation({ 
      path: ("M 250 250 l 0 -40 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z") 
     }, 2000); 
     c.animate(animation.repeat(Infinity)); 
    }); 
}); 

Answer 3

我想用'火車'表示許多動畫和延遲，無限重複。據我所知，v2 + repeat(Infinity)函數遺憾地無法幫到你。

你的方法幾乎不錯。由於您的動畫是500毫秒，因此您需要增加間隔以允許動畫在重新啓動之前完成，可能還有另一個500.

此外，您需要在定時器之前調用一次函數，以便用戶不會等待500之前它啓動。