path - Raphaeljs 间隔后动画路径

Question

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

JS小提琴链接

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

Answer 1

您正在重复初始化拉斐尔论文 ( )的整个aa函数。paper = Raphael(0,0,900,900);这就是你的画布被复制的原因。
此外，最好使用回调（您可以查看文档）而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;​

这是上述代码的一个工作示例。