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

我对画布和javascript非常陌生。我找到了一个starfield动画效果的片段，但它无限循环。 如何让动画在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;
        }

    };

window.onload=function（）{
var starfieldCanvasId=“starfieldCanvas”，
帧率=60，
numberOfStarsModifier=1.0，
飞行速度=0.02；
var canvas=document.getElementById（starfieldCanvasId），
context=canvas.getContext（“2d”），
宽度=画布宽度，
高度=画布高度，
numberOfStars=宽度*高度/1000*numberOfStars修改器，
dirX=宽度/2，
dirY=高度/4，
星=[]，
2_PI=Math.PI*2；
对于（var x=0；x宽度| |星[x].y<0 | |星[x].y>高度）{
星星[x]={
x：范围（0，宽度），
y：范围（0，高度），
尺寸：0
};
}
context.strokeStyle=“rgba（160160230，“+Math.min（stars[x].size，2）+”）；
context.lineWidth=stars[x]。大小；
context.beginPath（）；
context.moveTo（oldX，oldY）；
context.lineTo（星[x].x，星[x].y）；
stroke（）；
}
}
功能范围（开始、结束）{
返回Math.random（）*（end-start）+start；
}
};

似乎

勾选（）

是动画循环，因此更改行

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

到

其中

30000

是以毫秒为单位的结束时间

---

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

您尝试了什么？因为有几种方法可以阻止动画显示为运行，而您在这里似乎没有尝试任何操作。让我重新表述一下，将有一个与渲染相关的函数循环（当前，这是您的

勾选
函数），该函数设置为间隔；如果您的目标是停止所有动画（以其当前形式），则应清除计时器；但不管您的目标是停止所有动画还是仅仅停止更新此动画，您都需要考虑时间戳（即，将初始时间戳与每个循环上的时间戳进行比较…啊..证明了我在问题中的评论是错误的：运行第二个循环而不考虑时间戳..虽然，这绝对不是一个优雅的实现，但它是一个答案。话虽如此，
window.setInterval
返回一个表示int的
int
erval Id，所以我认为您应该反映这一点，而不是将其命名为
animLoop
。
window.animLoop = window.setInterval(tick, Math.floor(1000 / framerate));
window.setTimeout( function() { window.clearInterval( window.animLoop ) }, 30000 );