RequestAnimationFrame在代碼中的位置

有人可以分享您應該在動畫循環中調用RequestAnimationFrame的位置。它應該在循環的開始還是循環的結束？我已經看到它在循環開始時用它寫了很多次，但是在循環底部不是更好，所以在它可能仍在處理時它不會被調用？或者，RequestAnimationFrame檢查它是否已經在運行，如果它已經運行了，它還沒有運行？或者根本不重要？我試着移動它，並沒有注意到我的代碼有任何更改。RequestAnimationFrame在代碼中的位置

例如，頂部：

function gameLoop() { 
    RequestAnimationFrame(gameLoop); 

    renderFrameHere(); 
}

如下：

function gameLoop() { 
    renderFrameHere(); 

    RequestAnimationFrame(gameLoop); 
}

謝謝

來源

2016-05-16 David

我見過最編碼器把requestAnimationFrame在循環底部...

但我不確定這是必要的。假設你開始第一個循環。然後，在第一個循環中，你立即請求第二個循環。在第二個循環嘗試之前，第一個循環將始終完全執行。

這是因爲爲您排隊了多個不完整的幀循環，所以如果當前循環運行很長，它只會延遲下一個循環，直到當前循環結束。使用rAF時，您不會丟幀循環。

演示展示requestAnimationFrame如何隊列循環

該演示運行10圈與在循環函數的頂部放。循環中的代碼有意延遲1秒 - 比1/60秒的典型rAF循環長得多。即使如此，即使每個循環比每個rAF循環的通常17ms需要更長的時間，rAF也能正確執行所有10個循環。

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var loopCount=0; 
 

 
requestAnimationFrame(loop); 
 

 
function loop(time){ 
 
    loopCount++; 
 
    if(loopCount<10){ requestAnimationFrame(loop); }  
 
    var t1=performance.now()+1000; 
 
    while(performance.now()<t1){} 
 
    ctx.fillText('Loop count: '+loopCount+', time: '+time,20,loopCount*15); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<h4>rAF at top of loop still runs all 10 frames even<br>if the code in the loop takes extra long to complete</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>

來源

2016-05-17 05:33:58 markE

RequestAnimationFrame在代碼中的位置

回答

相關問題