在设定的时间后取消 requestAnimationFrame

StackOverflow https://stackoverflow.com//questions/20027743

题

我有以下 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，安排重新粉刷为10 µs。

其他提示

您可以查看4000ms，如下所示的时间：

var start = Date.now();

function animate() {

    if(Date.now()-start>4000){return;}

    requestAnimFrame(loop);

    // do stuff

};
.

这样你退出之前用raf调用下一个循环（无需取消）。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top