DedicatedWorkerGlobalScope: requestAnimationFrame()-Methode

Syntax

requestAnimationFrame(callback)

Parameter

callback

Die Funktion, die aufgerufen wird, wenn es Zeit ist, Ihre Animation für das nächste Neuzeichnen zu aktualisieren. Dieser Rückruffunktion wird ein einziges Argument übergeben:

timestamp

Ein DOMHighResTimeStamp, der die Endzeit der Rendering des vorherigen Bildes angibt (basierend auf der Anzahl der Millisekunden seit dem Zeitursprung). Der Zeitstempel ist eine Dezimalzahl in Millisekunden, jedoch mit einer minimalen Genauigkeit von 1 Millisekunde. Der Zeitstempelwert ähnelt auch dem Aufruf von performance.now() zu Beginn der Rückruffunktion, aber es ist nie derselbe Wert.

Wenn mehrere durch requestAnimationFrame() eingereihten Rückrufe in einem einzigen Frame ausgelöst werden, erhalten alle denselben Zeitstempel, obwohl während der Berechnung der Arbeitslast jedes vorherigen Rückrufs Zeit vergangen ist.

Rückgabewert

Ein long-Integer-Wert, der die eindeutige Anforderungs-ID im Rückruflisten-Eintrag identifiziert. Dies ist ein Nicht-Null-Wert, aber Sie sollten keine weiteren Annahmen darüber treffen. Sie können diesen Wert an cancelAnimationFrame() übergeben, um die Aktualisierungs-Rückrufanforderung abzubrechen. Die Stornierung muss im selben Worker vorgenommen worden sein.

Ausnahmen

NotSupportedError DOMException

Wird ausgelöst, wenn die Methode vom aktuellen Worker nicht unterstützt wird.

Beispiele

Hier ein vollständiges Beispiel, das zeigt, wie requestAnimationFrame() in einem dedizierten Worker mit einem OffscreenCanvas verwendet wird.

Das HTML sollte enthalten:

<canvas width="100" height="100"></canvas>

Es sollte mit folgendem JavaScript verlinkt sein:

const worker = new Worker("worker.js");

// Transfer canvas control to the worker
const offscreenCanvas = document
  .querySelector("canvas")
  .transferControlToOffscreen();

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

// Stop the animation after 5 seconds
setTimeout(() => {
  worker.postMessage({
    type: "stop",
  });
}, 5000);

worker.js:

let ctx;
let pos = 0;
let animationId;
let isRunning = false;
let lastTime = 0;

function draw(currentTime) {
  if (!isRunning) return;

  // Calculate delta time for smooth animation
  if (lastTime === 0) lastTime = currentTime;
  const deltaTime = (currentTime - lastTime) / 1000;
  lastTime = currentTime;

  // Clear and draw the moving rectangle
  ctx.clearRect(0, 0, 100, 100);
  ctx.fillRect(pos, 0, 10, 10);
  pos += 50 * deltaTime; // Move 50 pixels per second

  // Loop the animation
  if (pos > 100) pos = -10;

  animationId = self.requestAnimationFrame(draw);
}

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

Im Hauptthread beginnen wir damit, die Kontrolle über ein <canvas>-Element auf ein OffscreenCanvas zu übertragen, indem wir HTMLCanvasElement.transferControlToOffscreen() verwenden und eine Nachricht senden, um seine Arbeit mit dem Offscreen-Canvas zu "starten".

In der Worker-Datei (worker.js) handeln wir die Animationslogik. Beim Empfang der "start"-Nachricht beginnt der Worker mit der Animation, indem er das Rechteck von links nach rechts bewegt. Beim Empfang einer "stop"-Nachricht wird die Animation gestoppt.

Schließlich kann der Hauptthread nach einer gewissen Verzögerung eine "stop"-Nachricht an den Worker senden, um die Animation zu stoppen, damit die Animation sichtbar ist, bevor sie gestoppt wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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