Остановить анимацию HTML5 Javascript через определенное время

Question

Я очень плохо знаком с холстом и 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 - время окончания в миллисекундах.

Это предотвратит повторение анимации, прекратив цикл из цикла.