requestAnimationFrame для оптимизации анимации в браузере

• 01, 14, 2013
•  bullgare
•  javascript
• No Comments.

Это замена обычной покадровой отрисовки по setTimeout.

Пример:

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();
 
var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().
 
function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
 
requestAnimationFrame(step);

Polyfill:

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

https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame,
http://habrahabr.ru/post/114358/
http://www.xiper.net/collect/js-plugins/overclock-site/programm-animation.html (пример перевода анимации с setTimeout)