Question

我正在努力创造一个无限的＆＃34;火车＆＃34;在paper.path行内移动一个方向。我的代码目前使用循环，它并不是我所追求的效果。

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

我想用火车＆＃39;你的意思是一些无限重复的动画和延迟。据我所知，v2 + repeat(Infinity)函数无法帮助你。

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

此外，您需要在计时器之前调用该函数一次，以便用户在启动之前不等待500.

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

3 个答案:

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

3 个答案:

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