是想控制我的动画的FPS一个很好的理由继续使用setTimeout而不是requestAnimationFrame

Is wanting to control the FPS of my animation a good reason to continue using setTimeout in stead of requestAnimationFrame?

本文关键字：继续 理由 requestAnimationFrame setTimeout 很好 我的 控制 动画 FPS 一个      更新时间：2023-09-26

我想知道我是否应该把游戏切换到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也暂停切换选项卡时?

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中制作动画/过渡，移动东西或改变背景(如精灵)，使用requestAnimation将在调用requestAnimation时使渲染工作。如果没有它，浏览器会在一定的时间内渲染任何东西，这会导致更多的重绘。

甚至，浏览器正在进行的方式，它将做更多的优化比我们还不知道。让浏览器明白我们在做什么，然后他们帮助我们。

我找到了这个链接，可以添加更多的想法

相关文章：