Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Общее

window.requestAnimationFrame указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.

Note: Ваш callback метод сам должен вызвать requestAnimationFrame() иначе анимация остановится.

Вы должны вызывать этот метод всякий раз, когда готовы обновить анимацию на экране, чтобы запросить планирование анимации. В большинстве браузеров в фоновых вкладках или скрытых <iframe>, вызовы requestAnimationFrame() приостанавливаются, для того чтобы повысить производительность и время работы батареи.

Callback метод будет вызван с единственным аргументом, содержащим время, на которое запланирована анимация.

Note: Этот метод так же, как и свойство Firefox window.mozAnimationStartTime, является экспериментальным и нестандартным. Он предназначен для экспериментов и feedback'а. Скорее всего он перестанет поддерживаться через достаточно длинный промежуток времени, но мы надеемся, что это или схожее API в конце концов станут стандартом.

Синтаксис

requestID = window.mozRequestAnimationFrame(callback);   // Firefox
window.msRequestAnimationFrame(callback);                // IE 10 PP2+
window.webkitRequestAnimationFrame(callback[, element]); // Chrome/Webkit

Parameters

callback
Функция, которая будет вызвана, когда придёт время обновить вашу анимацию на следующей перерисовке.
element Необязательный
Необязательный параметр (не используется в Firefox или IE), определяющий элемент, который визуально содержит всю анимацию.  Для  canvas'а and WebGL'a им должен быть <canvas>. Для других элементов вы можете опустить этот параментр для чуть лучшего пользовательского опыта.

Return value

requestID - длинное целое, являющееся уникальным идентификатором для записи, содержащей callback. Оно не равно нулю, но других предположний о его значении делать не следует. Вы можете передать его в window.cancelAnimationFrame() для отмены вызова.

Пример

(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);

Браузерная совместимость

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 21.0 webkit 14.0 moz 10.0 Нет 6.0 webkit
requestID return value ? 11.0 (11.0) moz ? ? ?
Feature Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support Нет 10.0 webkit

0.16 webkit

? ? Нет 6.0 webkit
requestID return value ?   ? 11.0 (11.0) moz ? ? ?

Gecko notes

До Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), mozRequestAnimationFrame() мог быть вызван без параметров. Больше это не поддерживается и вряд ли станет стандартом.

Chrome notes

В текущий момент для отмены вызова в Chrome нужно выполнить window.webkitCancelAnimationFrame(). В старых версиях -, window.webkitCancelRequestAnimationFrame(), которая была объявлена устаревшей, но пока подерживается.

Спецификация

Timing control for script-based animations: requestAnimationFrameWD

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: alexsanqp, Bargamut, torbasow, Beliarh, nyk0r
Обновлялась последний раз: alexsanqp,