gpt4 book ai didi

javascript - 在设定的时间后取消 requestAnimationFrame

转载 作者:行者123 更新时间:2023-12-05 01:06:34 28 4
gpt4 key购买 nike

我有以下 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);

Online demo here

来自 documentation at MDN :

The callback method is passed a single argument, a DOMHighResTimeStamp, which indicates the time, in milliseconds but with a minimal precision of 10 µs, at which the repaint is scheduled to occur.

关于javascript - 在设定的时间后取消 requestAnimationFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20027743/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com