我应该使用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 ms（或大约15 fps），则最好使用。

requestAnimationFrame不再以Chrome或Firefox为前缀（较旧的浏览器/版本需要使用前缀或polyfill才能工作，例如参见this one，它还为您提供了有关此主题的更多详细信息）。您也不需要指定窗口对象。

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