取消请求动画设置时间后的帧

Cancelling requestAnimationFrame after set amount of time

本文关键字：时间 设置 请求 动画 取消      更新时间：2023-09-26

我有以下JavaScript：

function animate() {
// call other function
offset += 3;
if (offset > 15) offset = 0;
/// make the animation loop loop
var request = requestAnimationFrame(animate);
}

然后在我的 HTML 中： 

<body onload="animate()" >

这一切都工作正常，它使动画不断循环，这很棒。但是我想弄清楚如何让这个动画运行 4 秒然后停止。

"调用其他函数"只是一条向下移动然后自行重置的线，给人一种沿着一段路移动的印象。目前，这一切都是在 Canvas 中完成的。

任何帮助将不胜感激！

您可以使用 requestAnimationFrame 的参数，即以毫秒为单位的经过时间 - 这将给你一个非常准确的时间：

function loop(elapsedTime) {
    if (elapsedTime >= 4000) return; /// break loop after 4 seconds
    requestAnimationFrame(loop);    /// provides elapsed time as arg. to loop
}
/// start loop with rAF to get a valid argument first time:
requestAnimationFrame(loop);

在线演示在这里

来自 MDN 的文档：

回调方法传递单个参数，即 DOMHighResTimeStamp，指示时间，以毫秒为单位，但 最小精度为 10 μs，计划重涂 发生。

您可以像这样检查 4000 毫秒的运行时间：

var start = Date.now();
function animate() {
    if(Date.now()-start>4000){return;}
    requestAnimFrame(loop);
    // do stuff
};

这样，您可以在使用 RAF 调用下一个循环之前退出（因此无需取消）。

相关文章：