javascript - 在给定时间后停止 HTML5 Javascript 动画

Question

我对 Canvas 和 JavaScript 非常陌生。我找到了一个星空动画效果的片段，但它无限循环。如何让动画在 30 秒后停止？我相信它与clearInterval 或setTimeout 有关，但我不知道应该在代码中的何处实现。任何帮助将不胜感激。

window.onload = function() {

        var starfieldCanvasId     = "starfieldCanvas", 
            framerate             = 60,         
            numberOfStarsModifier = 1.0,      
            flightSpeed           = 0.02;             

        var canvas        = document.getElementById(starfieldCanvasId),

            context       = canvas.getContext("2d"),
            width         = canvas.width,
            height        = canvas.height,
            numberOfStars = width * height / 1000 * numberOfStarsModifier,
            dirX          = width / 2,
            dirY          = height / 4,
            stars         = [],
            TWO_PI        = Math.PI * 2;

        for(var x = 0; x < numberOfStars; x++) {
            stars[x] = {
                x: range(0, width),
                y: range(0, height),
                size: range(0, 1)
            };
        }

        window.setInterval(tick, Math.floor(1000 / framerate));            

        function tick() {
            var oldX,
                oldY;

            context.clearRect(0, 0, width, height);

            for(var x = 0; x < numberOfStars; x++) {
                oldX = stars[x].x;
                oldY = stars[x].y;

                stars[x].x += (stars[x].x - dirX) * stars[x].size * flightSpeed ;
                stars[x].y += (stars[x].y - dirY) * stars[x].size * flightSpeed ;
                stars[x].size += flightSpeed;

                if(stars[x].x < 0 || stars[x].x > width || stars[x].y < 0 || stars[x].y > height) {
                    stars[x] = {
                        x: range(0, width),
                        y: range(0, height),
                        size: 0
                    };
                }

                context.strokeStyle = "rgba(160, 160, 230, " + Math.min(stars[x].size, 2) + ")";
                context.lineWidth = stars[x].size;
                context.beginPath();
                context.moveTo(oldX, oldY);
                context.lineTo(stars[x].x, stars[x].y);
                context.stroke();
            }

        }

        function range(start, end) {
            return Math.random() * (end - start) + start;
        }

    };

Answer 1

看来tick()是动画循环，因此更改该行；

window.setInterval(tick, Math.floor(1000 / framerate)); 

至

window.animLoop = window.setInterval(tick, Math.floor(1000 / framerate));
window.setTimeout( function() { window.clearInterval( window.animLoop ) }, 30000 );

其中 30000 是以毫秒为单位的结束时间。

这将通过结束循环间隔来停止动画重复。