Raphaeljs 间隔后动画路径

【问题标题】：Raphaeljs animate path after intervalRaphaeljs 间隔后动画路径
【发布时间】：2012-09-30 15:43:46
【问题描述】：

我有一条路径，我想每 5 秒制作一次动画。我在下面的代码中尝试了使用 setInterval，但它一直在复制画布。有更简单的解决方案吗？

JS 小提琴Link

window.onload= function aa () {

    paper = Raphael(0,0,900,900);    

    var p=paper.path("M10,10 h20 v10 h-20z");
    p.animate({path:"M10,10 h300 v10 h-300z"},5000);

    //window.setInterval(aa(), 5000);
}

【问题讨论】：

标签： path jquery-animate raphael intervals

【解决方案1】：

您正在重复初始化拉斐尔论文 (paper = Raphael(0,0,900,900);) 的整个 aa 函数。这就是您的画布被复制的原因。
此外，最好使用回调（您可以在animate 上看到the docs）而不是setInterval 来触发您的动画。
这就是我的编码方式：

function init(){
    var paper = Raphael(0, 0, 900, 900),
        pathsString = ["M10,10 h20 v10 h-20z","M10,10 h300 v10 h-300z"],
        p = paper.path(pathsString[0]),
        animationCounter = 0, 
        animationDuration = 5000,
        animate = function(){
            animationCounter++;
            p.animate({path : pathsString[animationCounter %2]}, animationDuration, animate);
        };

    animate();
};
window.onload = init;

这是上述代码的a working example。

【讨论】：