Question

我刚开始HTML 5 javascript游戏开发，我学会了它更好用 requestAnimationFrame polyfill。

我理解这个功能，但我不理解它背后的数学。

确切地说：

(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));

如果有人可以简单解释一下这行代码是如何工作的，那就太棒了。

Melvin Tehubijuluw

Answer 1

它试图保持60fps的帧率。如果不能，则只在超时间隔内设置0（“尽快*”）。

帧速率为60fps，每帧1/60 sec = ~0.01666.. sec = ~ 16 ms。

(currTime - lastTime)是自上一帧显示以来的时间，因此16 - (currTime - lastTime)是你应该安排下一帧的时间，如果你想在帧之间保持16毫秒 - 或60英尺 - 的延迟。 / p>

如果最后一帧需要超过16毫秒才能显示，16 - (currTime - lastTime)为负数（这大致意味着你应该在msecs前显示帧16 - (currTime - lastTime)）。在这种情况下，您只需安排下一帧尽快显示，因为您无法及时返回：D

*编辑：更确切地说，“应该在渲染完成后立即”，有关详细信息，请参阅this question。

在深度解释requestAnimationFrame polyfill

1 个答案: