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之前它启动。