Advanced animations with requestAnimationFrame

If you have never written code to perform animations, then you can no longer read :)

What is requestAnimationFrame?

In all of your animation functions, you use a repeating timer to apply changes every few milliseconds. Good news: the browser makers decided “why don't we give you an API for this because we may be able to optimize some points for you”. So, this is the main API for creating animations based on changing DOM styles, redrawing canvas or WebGL

Why should I use it?

Browsers can optimize the animations going simultaneously, reducing the number of reflow and repaint to one, which in turn will lead to an increase in the accuracy of the animation. For example, animations on JavaScript synchronized with CSS transitions or SVG SMIL. Plus, if the animation is performed in a tab that is invisible, browsers will not continue to redraw , which will lead to less CPU, GPU, memory usage and as a result will reduce battery consumption in mobile devices.

Usage example

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

Note: I use requestAnimFrame because the specification is still in development and therefore I don’t want to declare the global requestAnimationFrame in advance (use polyfill )

')

View in action here: jsfiddle.net/paul/XQpzU

requestAnimationFrame API

 window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date }, /*   */ elem); 

The current time is transferred to the callback, in any case you will need it. The second parameter is the element associated with the current animation (for optimization). For canvas and WebGL, this will be the <canvas> element. For other animations, you can not transfer or define anything to improve performance.

Already can use?

Now Webkit ( Nightly Safari and the Chrome Dev Channel ) and Mozilla (FF4) are slightly different. Mozilla has a bug that limits the number of animation frames (about 30). In fact, “it is limited to 1000 / (16 + N) fps, where N is the number of milliseconds necessary to perform the animation function. If the function takes 1 second, then the number of frames will be less than 1 per second. If the animation function takes 1 ms, then the number of frames will be around 60. This will be fixed on the next FF release, but after FF4. Also, Chrome 10 does not have a time parameter (added to m11), FF now ignores the elem argument.

Write reviews!

If you are working with animations, then the developers of WebKit and Gecko will be happy to hear your feedback and suggestions. Look at the draft requestAnimationFrame draft. Now it acts as setTimeout; Is it worth replacing with setInterval? Does this API have drawbacks when animating multiple objects adnovremenno? Does the elem optimization work? Does this API cover all the animation needs?

Other sources

1. Draft spec (authored by heycam and jamesr)
2. Chromium design doc
3. A basic example
4. Config
5. MDC docs on mozRequestAnimationFrame
6. Libraries using animation timers yui anim loop , three.js , limejs , ticket for jQuery's implementation
7. Demo by Louis-Rémi Babé when switching tabs look at the CPU load
8. Nokarma's coverage of requestAnimationFrame
9. Mozilla's Robert O'Callhan