RequestAnimationFrame - вирішення проблем JavaScript-анімації, Підручник HTML5

Користуватися ним слід таким чином:

Var requestAnimationFrame = requestAnimationFrame window. webkitRequestAnimationFrame

Window. mozRequestAnimationFrame window. oRequestAnimationFrame window. msRequestAnimationFrame ; function animate()

* Тут виробляються власне анімаційні дії */

Тут все просто: requestAnimationFrame встає на місце setTimeout, вигідно від нього відрізняючись тим, що допускає будь-які дії в функції зворотного виклику, що є першим параметром методу. Функція отримує поточний час як аргумент (у браузері Mozilla Firefox є спеціальний об'єкт mozAnimaO ionStartTime).

Другий (необов'язковий) аргумент requestAnimationFrame - об'єкт, пов'язаний з анімацією. Для canvas-анімації та перемальовки WebGL-сцен це буде елемент canvas.

Що це нам все дає? Та просто контроль над анімацією, точніше, над викликами функції, що її здійснює. Ми можемо зупиняти процес у той момент, коли вкладка браузера з анімацією невидима, можемо синхронізувати анімацію з різними подіями та процесами. Можемо заощаджувати, скорочуючи кількість викликів, що сприятливо позначиться на стані заряду батареї мобільного пристрою.

Специфікацією передбачено також метод cancelAnimationFrame, що припиняє виклики анімації:

Vav animation = requestAnimationFrame(funcnion(time)< animate();

Щоправда, реалізовано це поки що тільки в тому ж Mozilla Firefox. Сподіватимемося, що це скоро зміниться.

---