DedicatedWorkerGlobalScope: метод requestAnimationFrame()

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

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

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

Для вызова метода requestAnimationFrame() текущий рабочий процесс должен иметь связанное владельческое window. Это означает, что текущий рабочий процесс должен быть создан window или специализированным рабочим процессом, который также имеет связанное владельческое window.

callback

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

timestamp

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

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

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

NotSupportedError DOMException

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

В основном потоке мы начинаем с передачи управления элементом <canvas> в OffscreenCanvas, используя HTMLCanvasElement.transferControlToOffscreen(), затем отправляем сообщение в рабочий процесс, чтобы "start" выполнить работу с внеэкранным холстом:

const offscreenCanvas = document
  .querySelector("canvas")
  .transferControlToOffscreen();

worker.postMessage(
  {
    type: "start",
    canvas: offscreenCanvas,
  },
  [offscreenCanvas],
);

При получении сообщения "start", рабочий процесс запускает анимацию, перемещая прямоугольник слева направо. При получении сообщения "stop" он остановит анимацию.

let ctx;
let pos = 0;
let handle;

function draw(dt) {
  ctx.clearRect(0, 0, 100, 100);
  ctx.fillRect(pos, 0, 10, 10);
  pos += 10 * dt;
  handle = self.requestAnimationFrame(draw);
}

self.addEventListener("message", (e) => {
  if (e.data.type === "start") {
    const transferredCanvas = e.data.canvas;
    ctx = transferredCanvas.getContext("2d");
    handle = self.requestAnimationFrame(draw);
  }
  if (e.data.type === "stop") {
    self.cancelAnimationFrame(handle);
  }
});

Наконец, если необходимо, основной поток может отправить сообщение "stop" в рабочий процесс, чтобы остановить анимацию:

worker.postMessage({
  type: "stop",
});

• DedicatedWorkerGlobalScope.cancelAnimationFrame()
• Window.requestAnimationFrame()