深入解釋requestAnimationFrame填充

Question

我剛剛開始HTML 5 javascript gamedevelopment，並且我學會了使用 requestAnimationFrame填充更好。

我明白這個功能，但我不明白它背後的數學。

準確地說：

(function() { 
var lastTime = 0; 
var vendors = ['ms', 'moz', 'webkit', 'o']; 
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 

    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; 
    window.cancelAnimationFrame = 
    window[vendors[x] + 'CancelAnimationFrame'] || 
    window[vendors[x] + 'CancelRequestAnimationFrame']; 
} 

if (!window.requestAnimationFrame) 
    window.requestAnimationFrame = function(callback, element) { 
     var currTime = new Date().getTime(); 
     var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 


      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
       timeToCall); 
      lastTime = currTime + timeToCall; 
      return id; 
     }; 

if (!window.cancelAnimationFrame) 
    window.cancelAnimationFrame = function(id) { 
     clearTimeout(id); 

    }; 

}()); 

與我不懂數學的路線是：

var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 

將是巨大的，如果有人能夠給我一個簡短的說明那怎麼行的代碼有效。

梅爾文Tehubijuluw

Answer 1

它試圖十個分量的60fps的幀的比例。如果不能，它只會在超時間隔（「儘快*」）中置0。

60fps的幀速率是每幀1/60 sec = ~0.01666.. sec = ~ 16 ms。

(currTime - lastTime)是自上一幀顯示以來的時間，因此16 - (currTime - lastTime)是您應該安排下一幀的時間，如果您希望在幀之間獲得16毫秒或60fps的延遲時間。

如果最後一幀的顯示時間超過16毫秒，16 - (currTime - lastTime)爲負數（這大致意味着您應該在msecs前顯示幀16 - (currTime - lastTime)）。在這種情況下，你只是安排下一幀要儘快顯示，因爲你不能回到時間：D

*編輯：它應該是，更準確地說，「一旦呈現有趕上「，詳情請參閱this question。