Help us test MDN's new front-end: https://discourse.mozilla.org/t/help-us-test-mdns-new-react-front-end-beta/42593

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

Общее

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'а и 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);

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
requestAnimationFrameChrome Полная поддержка 24
Полная поддержка 24
Полная поддержка 10
С префиксом
С префиксом Требует вендорный префикс: webkit
Edge Полная поддержка 12Firefox Полная поддержка 23
Замечания
Полная поддержка 23
Замечания
Замечания Callback parameter is a DOMHighResTimestamp. This means ten microsecond precision and zero time as performance.now().
Нет поддержки 11 — 42
С префиксом Замечания
С префиксом Требует вендорный префикс: moz
Замечания Callback parameter is a DOMTimestamp. This means millisecond precision and zero time as Date.now().
Нет поддержки 4 — 11
С префиксом Замечания
С префиксом Требует вендорный префикс: moz
Замечания Could be called with no input parameters.
IE Полная поддержка 10Opera Полная поддержка 15
Полная поддержка 15
Нет поддержки ? — 15
С префиксом
С префиксом Требует вендорный префикс: o
Safari Полная поддержка 6.1
Полная поддержка 6.1
Полная поддержка 6
С префиксом
С префиксом Требует вендорный префикс: webkit
WebView Android Полная поддержка ДаChrome Android Полная поддержка 25
Полная поддержка 25
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: webkit
Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 23
Полная поддержка 23
Нет поддержки 14 — 42
С префиксом
С префиксом Требует вендорный префикс: moz
Opera Android Полная поддержка 14
Полная поддержка 14
Нет поддержки ? — 14
С префиксом
С префиксом Требует вендорный префикс: o
Safari iOS Полная поддержка 7.1
Полная поддержка 7.1
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: webkit
Samsung Internet Android Полная поддержка Да
Return valueChrome Полная поддержка 23Edge Полная поддержка ДаFirefox Полная поддержка 11IE Полная поддержка 10Opera Полная поддержка 15Safari Полная поддержка 6.1WebView Android Полная поддержка ДаChrome Android Полная поддержка 25Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 14Opera Android Полная поддержка 14Safari iOS Полная поддержка 6.1Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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

Timing control for script-based animations: requestAnimationFrameWD

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

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

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