幾秒鐘後停止requestAnimationFrame

我看到很多用法，其中被調用並停止，但我沒有看到任何關於在x秒後停止它的任何事情。我寫了這個代碼：幾秒鐘後停止requestAnimationFrame

從我的一個代碼段，是這樣的：

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

我只是不知道如何後停止動畫，讓我們說，4秒。我是JavaScript中的新手。我應該使用超時還是間隔？

編輯：所以，我所做的是，這樣的：

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

     requestAnimationFrame(drawloop); 
    }

然而，這仍然沒有工作。我在這裏做錯了什麼？

來源

2016-12-26 Siyah

而你無法弄清楚簡單和最明顯的谷歌搜索「requestAnimationFrame停止」，它會立即回答你的問題？ – dfsq

好吧，正如我所說：我可以找到，但我找不到如何將它與計時器結合起來！這是我的問題。 – Siyah

'cancelAnimationFrame' +'setTimeout'。 – dfsq

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>

來源

2016-12-26 12:15:11

謝謝，但步驟是什麼意思？這是一個函數名稱嗎？ – Siyah

這是一個具有時間戳參數的回調函數。檢查此 - https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame –

做了一些編輯 –

最簡單的方法是使用一個變量來存儲渲染過程開始時。

如果已經超過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()

來源

2016-12-26 13:50:35 Jerry

所以你的意思是我需要添加這個，或者我需要改變我自己的功能？ – Siyah

幾秒鐘後停止requestAnimationFrame

回答

相關問題