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为前缀（较旧的浏览器/版本需要使用前缀或填充功能才能使用，例如请参阅this one，其中还提供了有关此主题的更多详细信息）。您也不需要指定窗口对象。

Answer 3

webkitRequestAnimationFrame

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

请注意，在一定的毫秒数内调度函数并不是一种保证它会在那个时候完全执行。一个原因是大多数浏览器没有毫秒分辨率时间。如果你在3毫秒内安排一些事情，那就会在较旧的IE中至少执行15次后执行，在更现代的浏览器中执行得更快，但是最有可能不是1毫秒。另一个原因是浏览器维护队列你要求他们做什么100毫秒超时意味着添加到队列 100毫秒后。但如果队列因发生缓慢的事情而延迟，你的函数必须等待并执行120毫秒之后才会执行。

Answer 4

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

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

（我知道）用于游戏动画的最佳方法是使用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);
}

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

4 个答案: