Online demo here

Question

我有以下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完成的。

任何帮助将不胜感激！

Answer 1

您可以使用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：

回调方法传递一个参数，a DOMHighResTimeStamp，表示时间，以毫秒为单位最小精度为10μs，重新计划安排发生。

Answer 2

你可以检查4000毫秒的经过时间：

var start = Date.now();

function animate() {

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

    requestAnimFrame(loop);

    // do stuff

};

这样你就可以在用RAF调用下一个循环之前退出（所以不需要取消）。

在设定的时间量后取消requestAnimationFrame

2 个答案:

Online demo here