Raphael JS：重复动画路径（无限）答案

【问题标题】：Raphael JS : animating path with repeat(Infinitely)Raphael JS：重复动画路径（无限）
【发布时间】：2014-06-24 13:58:15
【问题描述】：

我正在尝试创建一个无限的“火车”，它在 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);

【问题讨论】：

标签： javascript jquery svg raphael

【解决方案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);

【讨论】：

【解决方案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));
    });
});

【讨论】：

【解决方案3】：

我想“火车”是指无限重复的大量动画和延迟。不幸的是，据我所知，v2+ repeat(Infinity) 函数无法为您提供帮助。

你的方法几乎是好的。由于您的动画为 500 毫秒，因此您需要增加间隔以允许动画在重新启动之前完成，可能还需要 500 毫秒。

此外，您需要在计时器之前调用该函数一次，这样用户就不会在它启动前等待 500。

【讨论】：