1

我刚刚开始 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));

如果有人能给我简短解释那行代码是如何工作的，那就太好了。

梅尔文·特胡比朱鲁

4

1 回答 1

0

它试图保持 60fps 的帧率。如果不能，它只是将 0 放入超时间隔（“尽快*”）。

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

(currTime - lastTime)是自显示最后一帧以来的16 - (currTime - lastTime)时间，如果您想在帧之间保持 16 毫秒（或 60fps）的延迟，则应该安排下一帧的时间。

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

*编辑：更准确地说，它应该是“一旦渲染赶上”，请参阅此问题以获取更多详细信息。

于 2013-10-02T10:03:21.450 回答