1

我正在用 JavaScript 开发一个游戏，我很困惑我应该使用哪个 - window.webkitRequestAnimationFrame或者setInterval移动我的游戏角色。

4

4 回答 4

2

你可以使用 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)');
}
于 2013-05-31T12:21:12.643 回答
1

这完全取决于您尝试做什么。

如果您需要“实时”（如每帧）动画某些东西requestAnimationFrame是更好的选择，因为它能够同步到监视器的 VBLANK（通过 gfx 卡上的 vsync）消除抖动。它也更有效和准确。

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

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

于 2014-02-08T09:03:24.947 回答
1

是的，您绝对应该使用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);
}
于 2019-02-20T21:07:40.840 回答
0 
webkitRequestAnimationFrame

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

请注意，在几毫秒内调度一个函数并不能保证它会在那个时候准确执行。原因之一是大多数浏览器没有毫秒分辨率时间。如果您在 3 毫秒内安排某项操作，则它会在较旧的 IE 中至少 15 次后执行，而在更现代的浏览器中会更快执行，但很可能不会在 1 毫秒内执行。另一个原因是浏览器会维护您要求它们执行的操作的队列。100 毫秒超时意味着在 100 毫秒后添加到队列中。但是，如果队列因缓慢发生的事情而延迟，您的函数将不得不等待并在 120 毫秒后执行。

于 2014-02-08T07:18:06.080 回答