DedicatedWorkerGlobalScope: requestAnimationFrame()-Methode
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Hinweis: Dieses Feature ist nur verfügbar in Dedicated Web Workers.
Die requestAnimationFrame()
-Methode der Schnittstelle DedicatedWorkerGlobalScope
teilt dem Browser mit, dass Sie eine Animationsframe-Anfrage durchführen und eine benutzerdefinierte Callback-Funktion vor dem nächsten Neuzeichnen aufrufen möchten.
Die Häufigkeit der Aufrufe der Callback-Funktion entspricht im Allgemeinen der Bildwiederholrate des Displays. Die häufigste Bildwiederholrate ist 60 Hz (60 Zyklen/Bilder pro Sekunde), obwohl auch 75 Hz, 120 Hz und 144 Hz weit verbreitet sind. requestAnimationFrame()
-Aufrufe werden in den meisten Browsern pausiert, wenn sie in Hintergrund-Tabs oder versteckten <iframe>
s ausgeführt werden, um die Leistung und die Akkulaufzeit zu verbessern.
Ein Aufruf der requestAnimationFrame()
-Methode plant nur einen einzigen Aufruf der Callback-Funktion. Wenn Sie ein weiteres Bild animieren möchten, muss Ihre Callback-Funktion requestAnimationFrame()
erneut aufrufen.
Warnung: Stellen Sie sicher, dass Sie immer das erste Argument (oder eine andere Methode zur Ermittlung der aktuellen Zeit) verwenden, um zu berechnen, wie weit die Animation in einem Frame fortschreiten wird — sonst läuft die Animation auf Bildschirmen mit hoher Bildwiederholrate schneller. Für Methoden dazu, siehe die Beispiele unten.
Der Aufruf der requestAnimationFrame()
-Methode erfordert, dass der aktuelle Worker ein zugehöriges Eigentümer-Fenster
hat. Das bedeutet, dass der aktuelle Worker von einem Fenster
oder von einem dedizierten Worker erstellt werden muss, der ebenfalls ein zugehöriges Eigentümer-Fenster
hat.
Syntax
requestAnimationFrame(callback)
Parameter
callback
-
Die Funktion, die aufgerufen wird, wenn es Zeit ist, Ihre Animation für das nächste Neuzeichnen zu aktualisieren. Diese Callback-Funktion erhält ein einzelnes Argument:
timestamp
-
Ein
DOMHighResTimeStamp
, der die Endzeit des Renderings des vorherigen Frames anzeigt (basierend auf der Anzahl der Millisekunden seit dem time origin). Der Zeitstempel ist eine Dezimalzahl in Millisekunden, aber mit einer minimalen Genauigkeit von 1 Millisekunde. Der Zeitstempelwert ist auch dem Aufruf vonperformance.now()
zu Beginn der Callback-Funktion ähnlich, ist jedoch niemals derselbe Wert.Wenn mehrere von
requestAnimationFrame()
gequeue'te Callbacks in einem einzigen Frame ausgelöst werden, erhält jeder denselben Zeitstempel, obwohl während der Berechnung der Arbeitslast jedes vorhergehenden Callbacks Zeit vergangen ist.
Rückgabewert
Ein long
-Ganzwert, der die Anforderungs-ID eindeutig identifiziert
in der Callback-Liste. Dies ist ein Wert ungleich null, aber Sie dürfen keine weiteren
Annahmen darüber treffen. Sie können diesen Wert an
cancelAnimationFrame()
übergeben, um die Aktualisierungs-Callback-Anfrage zu stornieren. Die Stornoaktion muss im selben Worker durchgeführt worden sein.
Ausnahmen
NotSupportedError
DOMException
-
Wird ausgelöst, wenn die Methode vom aktuellen Worker nicht unterstützt wird.
Beispiele
Im Haupt-Thread beginnen wir damit, die Kontrolle eines <canvas>
-Elements auf ein OffscreenCanvas
zu übertragen, indem wir HTMLCanvasElement.transferControlToOffscreen()
verwenden. Anschließend senden wir eine Nachricht an den Worker, um seine Arbeit mit dem Offscreen-Canvas mit dem Befehl "start"
zu beginnen:
const offscreenCanvas = document
.querySelector("canvas")
.transferControlToOffscreen();
worker.postMessage(
{
type: "start",
canvas: offscreenCanvas,
},
[offscreenCanvas],
);
Beim Empfang der "start"
-Nachricht startet der Worker die Animation, indem er das Rechteck von links nach rechts bewegt. Beim Empfang einer "stop"
-Nachricht wird die Animation gestoppt.
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);
}
});
Schließlich, falls erforderlich, kann der Haupt-Thread eine "stop"
-Nachricht an den Worker senden, um die Animation zu stoppen:
worker.postMessage({
type: "stop",
});
Spezifikationen
Specification |
---|
HTML Standard # dom-animationframeprovider-requestanimationframe |
Browser-Kompatibilität
BCD tables only load in the browser