Path Raphaeljs为间隔后的路径设置动画

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

JS小提琴

---

您正在重复初始化raphael纸张的整个

aa

函数（

paper=raphael（0,0900900）；

）。这就是为什么画布会被复制。
此外，最好使用回调（您可以查看

animate

）而不是

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;​

---

这是上面的代码。

您正在重复初始化raphael纸张的整个

aa

函数（

paper=raphael（0,0900900）；

）。这就是为什么画布会被复制。
此外，最好使用回调（您可以查看

animate

）而不是

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;​

下面是上述代码的一部分