DedicatedWorkerGlobalScope: cancelAnimationFrame() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2023.
Hinweis: Diese Funktion ist nur in Dedicated Web Workers verfügbar.
Die cancelAnimationFrame() Methode der DedicatedWorkerGlobalScope Schnittstelle storniert eine zuvor durch einen Aufruf von requestAnimationFrame() geplante Animationsframe-Anforderung.
Das Aufrufen der cancelAnimationFrame() Methode erfordert, dass der aktuelle Worker ein zugeordnetes Eigentümer-window hat. Das bedeutet, dass der aktuelle Worker von einem window oder von einem dedizierten Worker, der ebenfalls ein zugeordnetes Eigentümer-window hat, erstellt worden sein muss.
Syntax
cancelAnimationFrame(handle)
Parameter
handle-
Die ID, die durch einen Aufruf von
requestAnimationFrame()zurückgegeben wurde; der Aufruf muss im selben Worker erfolgt sein.
Rückgabewert
Keiner (undefined).
Ausnahmen
NotSupportedErrorDOMException-
Wird ausgelöst, wenn die Methode vom aktuellen Worker nicht unterstützt wird.
Beispiele
Hier ist ein vollständiges Beispiel, das zeigt, wie requestAnimationFrame() in einem dedizierten Worker mit einem OffscreenCanvas verwendet wird.
Das HTML sollte Folgendes enthalten:
<canvas width="100" height="100"></canvas>
Es sollte auf folgendes JavaScript verlinken:
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, indem wir die Kontrolle über ein <canvas> Element an ein OffscreenCanvas übertragen, mittels HTMLCanvasElement.transferControlToOffscreen(), und senden eine Nachricht, um die Arbeit mit dem Offscreen-Canvas im Worker zu "starten".
In der Worker-Datei (worker.js) bearbeiten wir die Animationslogik. Beim Empfang der "start" Nachricht startet der Worker die Animation und bewegt das Rechteck von links nach rechts. Beim Empfang einer "stop" Nachricht wird die Animation gestoppt.
Schließlich kann der Hauptthread eine "stop" Nachricht an den Worker senden, um die Animation nach einer Verzögerung zu stoppen, sodass die Animation sichtbar wird, bevor sie gestoppt wird.
Spezifikationen
| Specification |
|---|
| HTML # animationframeprovider-cancelanimationframe |
Browser-Kompatibilität
Loading…