Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

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

Currently I can do it like this:

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

Where k.settings.engine.fps is the wanted fps.

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();

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?

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

like image 275
skerit Avatar asked Nov 19 '11 16:11

skerit


People also ask

Why is requestAnimationFrame better than setInterval?

Another reason requestAnimationFrame is so useful is the fact that it gives you a time variable which you can use to calculate the amount of time between frames. This is not something that setInterval will do and since setInterval is not 100% accurate it is very possible your animation will get messed up over time.

How many frames per second is requestAnimationFrame?

With requestAnimationFrame, your frame rate is typically around 60 frames per second (FPS). To repeat that differently, this means your requestAnimationFrame function and related code have the potential to refresh your screen 60 times every second.

How do you control speed in requestAnimationFrame?

Method 1: Update data via setInterval, and graphics via RAF. Keep those values in an object for each animated element. Assign the transform string to a variable in the object each setInterval 'frame'. Keep these objects in an array. Set your interval to your desired fps in ms: ms=(1000/fps).

How do I slow down requestAnimationFrame?

If your animation requires a different frames per second (up to 60 fps) or simply doesn't require that high a level of refresh rate, you can slow it down by calling requestAnimationFrame inside setTimeout() .


1 Answers

requestAnimationFrame is the correct way to make animations.

Why?

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.

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

like image 188
Ratata Tata Avatar answered Sep 20 '22 06:09

Ratata Tata