想要控制我的动画的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（）现在也会暂停。

I'm wondering if I should switch my game over to requestAnimationFrame. If there even is still a reason to do so anymore, as I've read that setTimeout() now also pauses when you switch tabs in the major browsers.

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

Anyway, say I want to control the FPS of my animation.

目前我可以这样做：

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

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

如果按照 requestAnimationFrame 的方式进行，我就失去了这种可能性，它会只要给它我能给予的任何东西：

If I do it the requestAnimationFrame way, I lose that possibility, and it'll just give me whatever it can give:

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

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

I have seen some people suggest to place the requestAnimFrame in another loop:

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

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

So... What should I go with? Leave it as it is?

requestAnimationFrame有什么好处，现在切换标签时setTimeout也暂停？

What are the exact benefits of requestAnimationFrame, now that setTimeout is also paused when switching tabs?

推荐答案

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

requestAnimationFrame is the correct way to make animations.

为什么？

因为浏览器可以优化渲染以使动画更流畅。回答这个问题，另一种方法是：

Because the browser can optimize the render for make a smoother animation. Answering the question, another way is:

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

以下链接还有其他方式。

And there is a other way in link below.

当您调用requestAnimation时，您可以让浏览器了解何时重绘html。如果在CSS中进行动画/过渡并移动内容或更改背景（作为精灵），使用requestAnimation将使调用requestAnimation时渲染工作正常。没有它，浏览器将呈现任何时间，然后需要更多重绘的东西。

When you call requestAnimation, you make the browser understand when is the moment to redraw the html. If you make animation/transitions in CSS and move stuff or change background (as sprites), using requestAnimation will make the render works when you call requestAnimation. Without it, the browser will render anything in which time, what can make more redraws then needed.

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

Even, the way the browsers are going on, it will do more optimizations than we don't know yet. Make the browser understand what we are doing and then they help us.

我发现此链接，可以添加更多想法

I found this link, can add some more ideas

这篇关于想要控制我的动画的FPS是继续使用setTimeout而不是requestAnimationFrame的一个很好的理由吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！