Is this valid use of requestAnimationFrame?

[Shikkediel]

First of all – it’s excellent. Never messed around with it before (but now I’m doing stuff that’s IE10+ compatible anyway) and the animation runs super smoothly compared to the normal setTimeout. Now I’m trying to implement the option for frame rate and was reading this article :

http://creativejs.com/resources/requestanimationframe/

I thought the following should be okay to still take advantage of the API’s optimisation :

if (some end condition) setTimeout(function() {requestAnimationFrame(frameSequence)}, intermission);

Instead of :

if (some end condition) requestAnimationFrame(frameSequence);

But is it me or isn’t it quite as smooth?

http://codepen.io/Shikkediel/pen/xbRaZz?editors=001

It’s the lines at the very bottom of the script. Thanks in advance.

Edit – it does look smoother than just this :

if (some end condition) setTimeout(frameSequence, intermission);

Maybe it’s a bit hard to compare with different speeds.

Double edit – definitely much less flicker. Had to make sure my eyes weren’t playing wishful tricks on me. With which I think the question’s pretty much answered. Let me make it a ‘cheer for requestAnimationFrame’ post then… how very simple to use too!

[Shikkediel]

Well, it works but timing the animation through any fixed delay (frame rate) appears to make the duration quite inaccurate.

Maybe it’s a bit hard to compare with different speeds.

This was odd because both were calculated at 60 fps. So they should take just as long. Turns out using a setTimeout only at 17ms a frame for an animation of 500ms comes down to about 730ms. That is ‘forcing’ each frame – letting requestAnimationFrame optimise the timing brought it close to a full second! That’s why the animation didn’t look as smooth as letting the API run the best timing by itself.

Anyway, thought it better to get rid of the frame rate (that’s pretty much the of point this feature) and rewrote it to some ad hoc progress timing with new Date().getTime(). Very smooth and nicely timed now.

I’ll definitely be using this a lot!

B-)

[Author]

Posts