Question

我有一条路径，我想每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);
}

Answer 1

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

Raphaeljs间隔后的动画路径

1 个答案: