Question

我已经看到很多用法requestAnimationFrame被调用和停止，但我没有看到任何关于在x秒后停止它的事情。我写了这段代码：

我的代码中的一个片段就像这样：

function drawloop() {
        if (focused) {
            requestAnimationFrame(drawloop);
        }

我只是无法理解如何停止动画，比方说，4秒。我是JavaScript的新手。我应该使用timeOut还是间隔？

编辑：所以，我做的是，这个：

function drawloop() {
  var start = Date.now() // note this
    if (focused & Date.now() - start < 4000) {

        requestAnimationFrame(drawloop);
    }

然而，这仍然无效。我在这里做错了什么？

Answer 1

最简单的方法是在渲染过程开始时使用变量进行存储。

如果超过4秒，请不要运行下一帧

您可能不需要其他功能来完成您的目的。

function animateFor4Second() {
    var start = Date.now() // note this
    function loop() {
        console.log('rendering')
        if (Date.now() - start < 4000) { //note this also
            requestAnimationFrame(loop);
        }
    }
    loop(); // fire the initial loop
}

animateFor4Second()

Answer 2

var myReq, start;
function step(timestamp){
if(!start)start = timestamp;


document.getElementById("aDiv").style.width = (parseInt(document.getElementById("aDiv").style.width,10)-.001)+"px";


if(
(timestamp - start) < 4000
){
myReq = requestAnimationFrame(step);
}
}

window.requestAnimationFrame(step);

<div id="aDiv" style="width:400px;height:100px;background-color:blue;">Test</div>
<button onclick="window.cancelAnimationFrame(myReq);">Stop Animation</button>
<button onclick="window.requestAnimationFrame(step);start=''">Start Animation</button>

var myReq, start;
function step(timestamp){
if(!start)start = timestamp;


document.getElementById("aDiv").style.width = (parseInt(document.getElementById("aDiv").style.width,10)-05)+"px";


if(parseInt(document.getElementById("aDiv").style.width,10)< 50 || 
(timestamp - start) > 4000
){
window.cancelAnimationFrame(myReq);
}else
myReq = requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

<div id="aDiv" style="width:200px;height:100px;background-color:blue;">Test</div>

几秒钟后停止requestAnimationFrame

2 个答案: