window.requestAnimationFrame

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

Summary

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

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

Вы должны вызывать этот метод всякий раз, когда готовы обновить анимацию на экране, чтобы запросить планирование анимации. Перерисовка может происходить до 60 раз в секунду для видимых вкладок, но ее частота может быть снижена для вкладок невидимых.

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

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

Syntax

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

Parameters

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

Return value

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

Example

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

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(), которая была объявлена устаревшей, но пока подерживается.

Specification

Timing control for script-based animations: requestAnimationFrameWD

window.requestAnimationFrame

Summary

Syntax

Parameters

Return value

Example

Browser compatibility

Gecko notes

Chrome notes

Specification

See also

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