February 23, 2011 at 15:32Advanced animations with requestAnimationFrame
- Transfer
If you have never written code to perform animations, then you may not read further :)
In all of your animation features, you use a repeating timer to apply changes every few milliseconds. The good news is: browser makers have 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
Browsers can optimize animations running at the same time, reducing the number of reflow and repaint to one, which in turn will increase the accuracy of the animation. For example, animations in 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 use of CPU, GPU, memory and as a result will reduce battery consumption in mobile devices.
Note: I use requestAnimFrame because the specification is still under development and therefore I do not want to declare a global requestAnimationFrame (apply polyfill )
in advance . See in action here: jsfiddle.net/paul/XQpzU
The current time is transferred to the callback, it will be necessary for you anyway. The second parameter passes the element associated with the current animation (for optimization). For canvas and WebGL, this will be an element
What is requestAnimationFrame?
In all of your animation features, you use a repeating timer to apply changes every few milliseconds. The good news is: browser makers have 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 this?
Browsers can optimize animations running at the same time, reducing the number of reflow and repaint to one, which in turn will increase the accuracy of the animation. For example, animations in 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 use of CPU, GPU, memory 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 under development and therefore I do not want to declare a global requestAnimationFrame (apply polyfill )
in advance . See 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, it will be necessary for you anyway. The second parameter passes the element associated with the current animation (for optimization). For canvas and WebGL, this will be an element