RequestAnimationFrame — решение проблем JavaScript-анимации

Анимацию посредством JavaScript можно организовать различными способами. Например, можно  э… не, ну вот, например, можно… Да в общем, если подумать, ничего, кроме старой JavaScript-конструкции о etInterval(). Ранее в примерах анимации изображений canvas и сцен WebGL мы пользовались именно ей. Такое положение сохранялось довольно долго, и незамысловатось о etInterval доставила немало проблем веб-разработчикам. Все изменилось с введением нового объекта — requestAnimationFrame, поддерживаемого в настоящее время большинством распространенных браузеров.

Пользоваться им следует таким образом:

Var requestAnimationFrame = requestAnimationFrame || window. webkitRequestAnimationFrame ||

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

………………………

/*

* тут производятся собственно анимационные действия */

RequestAnimationFrame(funcnion(time){

Animate():

},

Element);

}

Animate():

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

Второй (необязательный) аргумент requestAnimationFrame — объект, связанный с анимацией. Для canvas-анимации и перерисовки WebGL-сцен это будет элемент canvas.

Что это все нам дает? Да просто контроль над анимацией, точнее, над вызовами функции, ее осуществляющей. Мы можем останавливать процесс в тот момент, когда вкладка браузера с анимацией невидима, можем синхронизировать анимацию с различными событиями и процессами. Можем попросту экономить, сокращая количество вызовов, что благоприятно скажется на состоянии заряда батареи мобильного устройства.

Спецификацией предусмотрен также метод cancelAnimationFrame, прекращающий вызовы анимации:

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

}

CanselAnimationFrame(animation);

Правда, реализовано это пока только в том же Mozilla Firefox. Будем надеяться, что это скоро изменится.