Animation mit requestAnimationFrame

requestAnimationFrame (rAF) plant einen Callback vor dem nächsten Neuzeichnen des Browsers und synchronisiert Animationen mit der Bildwiederholrate des Displays (typischerweise 60 fps). Anders als setInterval wird rAF angehalten, wenn der Tab ausgeblendet ist, und spart dadurch CPU und Akku.

Eine rAF-Schleife: Definieren Sie eine animate-Funktion, die den aktuellen Frame zeichnet und anschließend requestAnimationFrame(animate) aufruft, um den nächsten Frame zu planen. Der Browser ruft animate vor jedem Neuzeichnen auf und erzeugt so eine kontinuierliche Animation mit der Bildrate des Displays.

rAF übergibt dem Callback einen DOMHighResTimeStamp (Millisekunden seit dem Laden der Seite). Verwenden Sie ihn, um eine von der Bildrate unabhängige Bewegung zu berechnen: delta = timestamp - lastTimestamp. Multiplizieren Sie die Geschwindigkeit mit delta, damit unabhängig von der Bildrate pro Sekunde dieselbe Strecke zurückgelegt wird.

Berechnen Sie die seit dem letzten Frame vergangene Zeit und skalieren Sie die Bewegung entsprechend. Ein Objekt, das sich mit 100px/s bewegt, legt pro Frame 100 * (delta / 1000) Pixel zurück. So bleibt die Physik auf Displays mit 30 fps und 144 fps konsistent.

rAF gibt ein Handle zurück. Brechen Sie die Animation mit cancelAnimationFrame(handle) ab. Speichern Sie das Handle in einer Variablen, prüfen Sie innerhalb der Schleife ein running-Flag oder brechen Sie die Animation bei der Bereinigung einer Komponente ab. Brechen Sie Schleifen immer ab, wenn das Element aus dem DOM entfernt wird.

In jedem Frame: (1) löschen Sie mit clearRect das gesamte Canvas, (2) aktualisieren Sie Zustandsvariablen (Position, Winkel, Zeit), (3) zeichnen Sie alle Objekte an den neuen Positionen, (4) rufen Sie requestAnimationFrame für den nächsten Frame auf. Lassen Sie clearRect niemals aus – andernfalls sammeln sich alte Frames als Spur an.

Verwenden Sie CSS-Transitions und -Animationen für einfache, eigenschaftsbasierte Animationen (Hover-Effekte, das Einschieben von Modalfenstern). Verwenden Sie rAF für komplexe, interaktive Animationen – etwa Spielschleifen, Physiksimulationen oder Canvas-Rendering –, bei denen Sie eine fein abgestufte Kontrolle über jeden Frame benötigen.

Zeichnen Sie komplexe Szenen zuerst auf ein Offscreen-Canvas und anschließend mit drawImage in einem Vorgang auf das sichtbare Canvas. Dadurch wird Flackern verhindert, weil niemals ein teilweise gezeichneter Frame angezeigt wird – das sichtbare Canvas wird in jedem Frame atomar aktualisiert.

Begrenzen Sie die Bildrate auf einen niedrigeren Wert (z. B. 30 fps): Prüfen Sie vor dem Rendern, ob seit dem letzten Zeichnen genügend Zeit vergangen ist. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Planen Sie rAF trotzdem weiterhin, damit die Reaktionsfähigkeit erhalten bleibt.

Das Performance-Panel der Chrome DevTools zeichnet rAF-Callbacks im JS-Flame-Chart auf. Suchen Sie nach langen Callbacks, die länger als 16 ms dauern – sie verursachen ausgelassene Frames. Verwenden Sie den FPS-Meter (Rendering → FPS Meter), um die Bildrate während der Interaktion in Echtzeit zu beobachten.

Für einfachere deklarative Animationen ohne manuelles Timing: element.animate(keyframes, options). WAAPI übernimmt Timing-Funktionen, Füllmodi und Wiederholungen und lagert die Frame-Berechnung an den Browser aus. Verwenden Sie rAF für benutzerdefinierte Rendering-Logik, die WAAPI nicht ausdrücken kann.

Warum sollte die Animationsgeschwindigkeit in einer requestAnimationFrame-Schleife mit der verstrichenen Zeit delta multipliziert werden?

requestAnimationFrame synchronisiert JavaScript-Animationen mit der Bildwiederholrate des Displays und pausiert bei ausgeblendeten Tabs. Der timestamp-Parameter ermöglicht durch die Skalierung mit der verstrichenen Zeit eine von der Bildrate unabhängige Bewegung. Das Canvas-Animationsmuster (löschen, aktualisieren, zeichnen, planen) bildet zusammen mit cancelAnimationFrame zur Bereinigung die Grundlage für flüssige und effiziente Webanimationen.