javascript - 想要控制我的动画的 FPS 是继续使用 setTimeout 而不是 requestAnimationFrame 的充分理由吗？

Question

我想知道是否应该将我的游戏切换到 requestAnimationFrame。如果还有理由再这样做的话，正如我所读到的那样，当您在主要浏览器中切换标签页时，setTimeout() 现在也会暂停。

无论如何，假设我想控制动画的 FPS。

目前我可以这样做:

k.state.loopinterval = 
window.setInterval(renderLoop(), 1000 / k.settings.engine.fps );

k.settings.engine.fps 是想要的 fps。

如果我以 requestAnimationFrame 的方式来做，我就失去了这种可能性，它只会给我它能给我的任何东西:

window.requestAnimFrame(k.operations.startLoop);
renderLoop();

我看到有人建议将 requestAnimFrame 放在另一个循环中:

setInterval( function () {
    requestAnimationFrame( draw );
}, 1000 / 60 );

那么...我应该怎么办？保持原样？

requestAnimationFrame 的确切好处是什么，现在 setTimeout 在切换选项卡时也暂停了？

Answer 1

requestAnimationFrame 是制作动画的正确方式。

为什么？

因为浏览器可以优化渲染以制作更流畅的动画。回答问题，另一种方式是:

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(callback, element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

下面的链接中还有另一种方式。

当你调用 requestAnimation 时，你让浏览器知道什么时候重绘 html。如果您在 CSS 中制作动画/过渡并移动内容或更改背景(作为 Sprite )，使用 requestAnimation 将使渲染在您调用 requestAnimation 时工作。没有它，浏览器将在什么时候渲染任何东西，什么可以使更多的重绘然后需要。

甚至，按照浏览器的运行方式，它会进行比我们还不知道的更多的优化。让浏览器理解我们在做什么，然后它们会帮助我们。

我找到了 this link , 可以补充一些想法