Окно: метод requestAnimationFrame()

Метод window.requestAnimationFrame() сообщает браузеру о желании выполнить анимацию. Он запрашивает у браузера вызов предоставленной пользователем функции обратного вызова перед следующим перерисовыванием.

Частота вызовов функции обратного вызова, как правило, соответствует частоте обновления дисплея. Наиболее распространённая частота обновления — 60 Гц (60 циклов/кадров в секунду), хотя также широко используются 75 Гц, 120 Гц и 144 Гц. requestAnimationFrame() вызовы в большинстве браузеров приостанавливаются при работе в фоновых вкладках или скрытых <iframe>, чтобы улучшить производительность и время автономной работы.

callback

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

timestamp

DOMHighResTimeStamp, указывающий конечное время рендеринга предыдущего кадра (основанное на количестве миллисекунд с момента начала отсчёта). Значение timestamp — это десятичное число в миллисекундах, но с минимальной точностью в 1 миллисекунду. Для Window объектов (не Workers), оно равно document.timeline.currentTime. Это значение timestamp совместно используется между всеми окнами, работающими на одном агенте (все окна с одинаковым происхождением и, что более важно, фреймы с одинаковым происхождением) — что позволяет синхронизировать анимации в нескольких requestAnimationFrame вызовах. Значение timestamp также подобно вызову performance.now() в начале функции обратного вызова, но оно никогда не будет иметь то же самое значение.

Когда несколько вызовов обратного вызова, поставленных в очередь requestAnimationFrame(), начинают выполняться в одном кадре, каждый из них получает одинаковое значение timestamp, несмотря на то, что время прошло во время обработки работы каждого предыдущего вызова обратного вызова.

Целое число unsigned long, идентификатор запроса, уникально идентифицирующий запись в списке обратных вызовов. Вы не должны делать никаких предположений относительно его значения. Вы можете передать это значение в window.cancelAnimationFrame() для отмены запроса обратного вызова.

В этом примере элемент анимируется в течение 2 секунд (2000 миллисекунд). Элемент перемещается со скоростью 0,1 пикселя/мс вправо, поэтому его относительное положение (в пикселях CSS) может быть вычислено в зависимости от времени, прошедшего с момента начала анимации (в миллисекундах) с помощью 0.1 * elapsed. Конечное положение элемента составляет 200 пикселей (0.1 * 2000) вправо от его начального положения.

const element = document.getElementById("some-element-you-want-to-animate");
let start;

function step(timestamp) {
  if (start === undefined) {
    start = timestamp;
  }
  const elapsed = timestamp - start;

  // Math.min() is used here to make sure the element stops at exactly 200px
  const shift = Math.min(0.1 * elapsed, 200);
  element.style.transform = `translateX(${shift}px)`;
  if (shift < 200) {
    requestAnimationFrame(step);
  }
}

requestAnimationFrame(step);

Следующие три примера иллюстрируют различные подходы к установлению нулевой точки во времени, основы для вычисления прогресса вашей анимации в каждом кадре. Если вы хотите синхронизироваться с внешними часами, такими как BaseAudioContext.currentTime, максимальная точность — длительность одного кадра, 16,67 мс при 60 Гц. Аргумент timestamp обратного вызова представляет собой конец предыдущего кадра, поэтому раньше, чем через кадр, ваши недавно вычисленные значения не будут отрисованы.

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

let zero;
requestAnimationFrame(firstFrame);
function firstFrame(timestamp) {
  zero = timestamp;
  animate(timestamp);
}
function animate(timestamp) {
  const value = (timestamp - zero) / duration;
  if (value < 1) {
    element.style.opacity = value;
    requestAnimationFrame((t) => animate(t));
  } else element.style.opacity = 1;
}

В этом примере используется document.timeline.currentTime для установки нулевого значения перед первым вызовом requestAnimationFrame. document.timeline.currentTime соответствует аргументу timestamp, поэтому нулевое значение эквивалентно значению timestamp нулевого кадра.

const zero = document.timeline.currentTime;
requestAnimationFrame(animate);
function animate(timestamp) {
  const value = (timestamp - zero) / duration; // animation-timing-function: linear
  if (value < 1) {
    element.style.opacity = value;
    requestAnimationFrame((t) => animate(t));
  } else element.style.opacity = 1;
}

В этом примере анимация выполняется с помощью performance.now() вместо значения timestamp обратного вызова. Вы можете использовать это для достижения немного большей точности синхронизации, хотя дополнительная точность является переменной и не значительно увеличивается. Примечание: этот пример не позволяет надёжно синхронизировать вызовы обратного вызова анимации.

const zero = performance.now();
requestAnimationFrame(animate);
function animate() {
  const value = (performance.now() - zero) / duration;
  if (value < 1) {
    element.style.opacity = value;
    requestAnimationFrame((t) => animate(t));
  } else element.style.opacity = 1;
}

• Window.cancelAnimationFrame()
• DedicatedWorkerGlobalScope.requestAnimationFrame()
• Анимация с помощью JavaScript: от setInterval к requestAnimationFrame - Статья блога
• TestUFO: Проверьте свой веб-браузер на отклонения во времени requestAnimationFrame()
• Firefox переходит к uint32_t для идентификатора запроса requestAnimationFrame