我应该使用window.webkitRequestAnimationFrame而不是setInterval吗？

Question

我正在用JavaScript开发游戏，但我对应该使用哪个游戏感到困惑window.webkitRequestAnimationFrame或setInterval用于移动游戏角色。

Answer 1

您可以使用window.webkitRequestAnimationFrame而不是setInterval

var counter = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame ||
        window.webkitCancelRequestAnimationFrame || 
        window.webkitCancelAnimationFrame ||
        window.mozCancelRequestAnimationFrame || window.mozCancelAnimationFrame ||
        window.oCancelRequestAnimationFrame || window.oCancelAnimationFrame ||
        window.msCancelRequestAnimationFrame || window.msCancelAnimationFrame;
var animation = function(){
        animationFrame = requestAnimationFrame(animation);
        render();
}
animationFrame = requestAnimationFrame(animation);
function render(){
        counter ++; 
        $('develement').css('-webkit-transform','translate3d(-'+counter+'px, 0, 0)');
}

Answer 2

这完全取决于您尝试执行的操作。

如果您需要“实时”制作动画（按帧显示），则requestAnimationFrame是一个更好的选择，因为它可以同步到监视器的VBLANK（通过gfx卡上的vsync），以消除抖动。 它还更加有效和准确。

setInterval和setTimeout无法同步以监视刷新，并且在系统上成本更高，但是如果仅需要偶尔更新或延迟超过例如70毫秒（约15 fps），则最好使用它们。

该requestAnimationFrame在Chrome或Firefox不再前缀（旧的浏览器/版本将需要或者前缀或填充工具工作，例如见这个也给你有关这个主题的更多细节）。 您也无需指定窗口对象。

Answer 3

webkitRequestAnimationFrame

最好使用windows.setTimeout(fun,millisecond)函数作为超时，因为您要让浏览器在有可用资源时调用函数，而不是在预定义的时间（毫秒）后调用。

请注意，以毫秒为单位调度函数并不能保证该函数会在那时准确执行。 原因之一是大多数浏览器没有毫秒级的解析时间。 如果您计划在3毫秒内执行某项操作，则在旧版IE中至少执行15次之后，在更现代的浏览器中会更快地执行，但很可能在1毫秒内不会执行。 另一个原因是浏览器维护着您要求他们执行的操作的队列。 100毫秒超时表示100毫秒后添加到队列。 但是，如果队列因缓慢的事件而延迟，则您的函数将不得不等待并在120毫秒后执行。

Answer 4

是的，您绝对应该使用requestAnimationFrame而不是间隔。

如前所述， setInterval仅保证在定义的时间后将某个函数放入JavaScript执行堆栈。 但是， 实际执行可能要晚得多，这取决于当时的执行堆栈。

游戏动画的最佳方法（我知道）是使用requestAnimationFrame并根据自上一次渲染和新渲染以来经过的时间进行运动计算。

样机代码：

function render(){
    var time_passed_since_last_render = Date.now() - window.last_render;
    window.last_render = Date.now()
    // do movements and collision checks here
    // movement distance calculations are based on 'time_passed_since_last_render'
}

while (playerStillAlive) {
    // do things such as checking for input (keyboard push etc.)
    requestAnimationFrame(render);
}