想要控制我的動畫的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中進行動畫/過渡並移動內容或更改背景（作為精靈），則使用requestAnimation將使調用requestAnimation時渲染工作正常。 沒有它，瀏覽器將呈現任何時間的任何內容，然后可以進行更多重繪。

即使是瀏覽器的運行方式，它也會比我們還不知道做更多的優化。 讓瀏覽器了解我們正在做什么，然后他們幫助我們。

我發現這個鏈接 ，可以添加更多的想法