Tag Archives: requestAnimationFrame
requestAnimationFrame
requestAnimationFrame удобен для группировки изменений DOM-структуры. В том числе между различными модулями. Позволяет избежать «layout thrashing». Работает как callback. Описание — https://developer.mozilla.org/ru/docs/DOM/window.requestAnimationFrame Пример использования и библиотека-обёртка — http://wilsonpage.co.uk/preventing-layout-thrashing/
requestAnimationFrame для оптимизации анимации в браузере
Это замена обычной покадровой отрисовки по setTimeout. Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
(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:
1 2 3 4 5 6 7 8 |
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)