window.requestAnimationFrame()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

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

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

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

Callback методу передаётся один аргумент, DOMHighResTimeStamp, который содержит текущее время (количество миллисекунд, прошедших с момента time origin). Когда колбэки, отправленные в очередь с помощью requestAnimationFrame() начинают вызывать несколько колбэков в одном кадре, каждый получает одинаковый timestamp, хотя для вычисления каждого callback было затрачено время. Этот timestamp - десятичное число в миллисекундах, но с минимальной точностью в 1ms (1000 µs).

Синтаксис

window.requestAnimationFrame(callback);

Параметры

callback

Функция, которая будет вызвана, когда придёт время обновить вашу анимацию на следующей перерисовке.

element Необязательный

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

Возвращаемое значение

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

Пример

js
var start = null;
var element = document.getElementById("SomeElementYouWantToAnimate");

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.transform =
    "translateX(" + Math.min(progress / 10, 200) + "px)";
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 10 авг. 2024 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

window.requestAnimationFrame()

In this article

Синтаксис

Параметры

Возвращаемое значение

Пример

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

Совместимость с браузерами

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

Help improve MDN