javascript - 使用 setTimeout 在 Canvas 中设置动画的问题

Question

我正在尝试为重复出现的垂直圆圈行制作动画，一次一行。每行圆圈都从浏览器的底部开始，一直到顶部。但是我在使用 setTimeout 时遇到了麻烦，让它一次只用一行新的圆圈重复出现。我当前的代码有重复的圆圈线，但它每次都会添加一行额外的圆圈，并且每次都会加快动画速度。如何避免加速和添加额外的圆圈行？

这是 fiddle

var newLine = function(){
        var posX = Math.random() * canvas.width;
            posY = canvas.height;

        setInterval(function() {
            posY -= 40;

            c.fillStyle = "rgba(23, 23, 23, 0.05)";
            c.fillRect(0, 0, canvas.width, canvas.height);

            c.fillStyle = "white";
            c.beginPath();
            c.arc(posX, posY, Math.random() * 20, 0, twoPi, false);
            c.fill();

        }, 30);
        setTimeout(newLine, 2000);
    };  
    newLine();

Answer 1

问题是每次您调用 newLine() 时，它都会创建一个新的间隔计时器。因此，在多次调用该函数后，您将同时运行多个间隔计时器。

解决方法是在开始新的之前清除间隔计时器:

    var timer;

    var newLine = function(){
        clearInterval( timer );
        var posX = Math.random() * canvas.width;
            posY = canvas.height;

        timer = setInterval(function() {
            posY -= 40;

            c.fillStyle = "rgba(23, 23, 23, 0.05)";
            c.fillRect(0, 0, canvas.width, canvas.height);

            c.fillStyle = "white";
            c.beginPath();
            c.arc(posX, posY, Math.random() * 20, 0, twoPi, false);
            c.fill();

        }, 30);
        setTimeout(newLine, 2000);
    };  
    newLine();

Updated fiddle

关于您在评论中提出的问题...您遇到的一个问题是一个非常微妙的 JavaScript 陷阱。在进行一些调试之前，我也没有注意到它。

仔细看看这些行:

        var posX = Math.random() * canvas.width;
            posY = canvas.height;

现在问自己这些问题: posX 是局部变量吗？ posY 是局部变量吗？您确定它们都是局部变量吗？

如果您在测试中看到一些结果，其中两个或多个线条动画同步向上移动，这将解释原因。

你问题的另一部分很简单。忽略我之前关于将 timer 变量移到 newLine() 函数之外的建议，这样你就可以取消它了!相反，使 timer 成为 newLine() 中的 local 变量，并使 newLine() 的每个实例取消其完成后自己的计时器。

一旦你这样做了，你的代码的其余部分就可以正常工作了:

    var newLine = function(){
        var posX = Math.random() * canvas.width;
        var posY = canvas.height;

        var timer = setInterval(function() {
            posY -= 10;
            if( posY <= 0 ) {
                clearInterval( timer );
                return;
            }

            c.fillStyle = "rgba(23, 23, 23, 0.05)";
            c.fillRect(0, 0, canvas.width, canvas.height);

            c.fillStyle = "white";
            c.beginPath();
            c.arc(posX, posY, Math.random() * 5, 0, twoPi, false);
            c.fill();

        }, 30);

        setTimeout( newLine, Math.random() * 2000 );
    };

    newLine();

New fiddle