Flüssige und performante Animationen sind in modernen Webanwendungen unerlässlich. Eine unsachgemäße Verwaltung kann jedoch den Haupt-Thread des Browsers überlasten, was zu schlechter Leistung und ruckelnden Animationen führt. requestAnimationFrame (rAF) ist eine Browser-API, die dazu dient, Animationen mit der Bildwiederholfrequenz des Displays zu synchronisieren und so im Vergleich zu Alternativen wie setTimeout flüssigere Bewegungen zu gewährleisten. Der effiziente Einsatz von rAF erfordert jedoch eine sorgfältige Planung, insbesondere bei der Handhabung mehrerer Animationen.

In diesem Artikel untersuchen wir, wie wir requestAnimationFrame optimieren können, indem wir die Animationsverwaltung zentralisieren, die FPS-Steuerung einführen und den Hauptthread des Browsers reaktionsfähig halten.

FPS verstehen und warum es wichtig ist

Bilder pro Sekunde (FPS) sind entscheidend, wenn es um die Animationsleistung geht. Die meisten Bildschirme werden mit 60 FPS aktualisiert, was bedeutet, dass requestAnimationFrame 60 Mal pro Sekunde aufgerufen wird. Um flüssige Animationen aufrechtzuerhalten, muss der Browser seine Arbeit innerhalb von etwa 16,67 Millisekunden pro Frame abschließen.

Wenn zu viele Aufgaben während eines einzelnen Frames ausgeführt werden, verpasst der Browser möglicherweise die Ziel-Frame-Zeit, was zu Stottern oder ausgelassenen Frames führt. Das Verringern der FPS für bestimmte Animationen kann dazu beitragen, die Belastung des Hauptthreads zu verringern und so für ein Gleichgewicht zwischen Leistung und Glätte zu sorgen.

Zentralisierter Animationsmanager mit FPS-Steuerung für bessere Leistung

Um Animationen effizienter zu verwalten, können wir ihre Handhabung mit einer gemeinsamen Schleife zentralisieren, anstatt mehrere requestAnimationFrame-Aufrufe über den Code verstreut zu haben. Ein zentralisierter Ansatz minimiert redundante Anrufe und erleichtert das Hinzufügen der FPS-Kontrolle.

Mit der folgenden AnimationManager-Klasse können wir Animationsaufgaben registrieren und die Registrierung aufheben und gleichzeitig die Ziel-FPS steuern. Standardmäßig streben wir 60 FPS an, dies kann jedoch an die Leistungsanforderungen angepasst werden.

class AnimationManager {
  private tasks: Set = new Set();
  private fps: number = 60; // Target FPS
  private lastFrameTime: number = performance.now();
  private animationId: number | null = null; // Store the animation frame ID

  private run = (currentTime: number) => {
    const deltaTime = currentTime - this.lastFrameTime;

    // Ensure the tasks only run if enough time has passed to meet the target FPS
    if (deltaTime > 1000 / this.fps) {
      this.tasks.forEach((task) => task(currentTime));
      this.lastFrameTime = currentTime;
    }

    this.animationId = requestAnimationFrame(this.run);
  };

  public registerTask(task: FrameRequestCallback) {
    this.tasks.add(task);
    if (this.tasks.size === 1) {
      this.animationId = requestAnimationFrame(this.run); // Start the loop if this is the first task
    }
  }

  public unregisterTask(task: FrameRequestCallback) {
    this.tasks.delete(task);
    if (this.tasks.size === 0 && this.animationId !== null) {
      cancelAnimationFrame(this.animationId); // Stop the loop if no tasks remain
      this.animationId = null; // Reset the ID
    }
  }
}

export const animationManager = new AnimationManager();

In diesem Setup berechnen wir die DeltaTime zwischen Frames, um basierend auf den Ziel-FPS zu bestimmen, ob genügend Zeit für das nächste Update vergangen ist. Dadurch können wir die Aktualisierungshäufigkeit drosseln, um sicherzustellen, dass der Hauptthread des Browsers nicht überlastet wird.

Praxisbeispiel: Animieren mehrerer Elemente mit unterschiedlichen Eigenschaften

Lassen Sie uns ein Beispiel erstellen, in dem wir drei Boxen animieren, jedes mit einer anderen Animation: eines skaliert, ein anderes ändert die Farbe und das dritte dreht sich.

Hier ist der HTML-Code:

Hier ist das CSS:

.animated-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: transform 0.1s ease;
}

Jetzt fügen wir JavaScript hinzu, um jedes Feld mit einer anderen Eigenschaft zu animieren. Einer wird skaliert, ein anderer ändert seine Farbe und der dritte dreht sich.

Schritt 1: Hinzufügen der linearen Interpolation (lerp)

Lineare Interpolation (lerp) ist eine gängige Technik, die in Animationen verwendet wird, um einen reibungslosen Übergang zwischen zwei Werten zu ermöglichen. Es sorgt für einen allmählichen und reibungslosen Verlauf und eignet sich daher ideal zum Skalieren, Verschieben oder Ändern von Eigenschaften im Laufe der Zeit. Die Funktion benötigt drei Parameter: einen Startwert, einen Endwert und eine normalisierte Zeit (t), die bestimmt, wie weit der Übergang fortgeschritten ist.

function lerp(start: number, end: number, t: number): number {
  return start   (end - start) * t;
}

Schritt 2: Animation skalieren

Wir beginnen mit der Erstellung einer Funktion, um die Skalierung der ersten Box zu animieren:

function animateScale(
  scaleBox: HTMLDivElement,
  startScale: number,
  endScale: number,
  speed: number
) {
  let scaleT = 0;

  function scale() {
    scaleT  = speed;
    if (scaleT > 1) scaleT = 1;

    const currentScale = lerp(startScale, endScale, scaleT);
    scaleBox.style.transform = `scale(${currentScale})`;

    if (scaleT === 1) {
      animationManager.unregisterTask(scale);
    }
  }

  animationManager.registerTask(scale);
}

Schritt 3: Farbanimation

Als nächstes animieren wir den Farbwechsel der zweiten Box:

function animateColor(
  colorBox: HTMLDivElement,
  startColor: number,
  endColor: number,
  speed: number
) {
  let colorT = 0;

  function color() {
    colorT  = speed;
    if (colorT > 1) colorT = 1;

    const currentColor = Math.floor(lerp(startColor, endColor, colorT));
    colorBox.style.backgroundColor = `rgb(${currentColor}, 100, 100)`;

    if (colorT === 1) {
      animationManager.unregisterTask(color);
    }
  }

  animationManager.registerTask(color);
}

Schritt 4: Rotationsanimation

Zuletzt erstellen wir die Funktion zum Drehen der dritten Box:

function animateRotation(
  rotateBox: HTMLDivElement,
  startRotation: number,
  endRotation: number,
  speed: number
) {
  let rotationT = 0;

  function rotate() {
    rotationT  = speed; // Increment progress
    if (rotationT > 1) rotationT = 1;

    const currentRotation = lerp(startRotation, endRotation, rotationT);
    rotateBox.style.transform = `rotate(${currentRotation}deg)`;

    // Unregister task once the animation completes
    if (rotationT === 1) {
      animationManager.unregisterTask(rotate);
    }
  }

  animationManager.registerTask(rotate);
}

Schritt 5: Animationen starten

Endlich können wir die Animationen für alle drei Boxen starten:

// Selecting the elements
const scaleBox = document.querySelector("#animate-box-1") as HTMLDivElement;
const colorBox = document.querySelector("#animate-box-2") as HTMLDivElement;
const rotateBox = document.querySelector("#animate-box-3") as HTMLDivElement;

// Starting the animations
animateScale(scaleBox, 1, 1.5, 0.02); // Scaling animation
animateColor(colorBox, 0, 255, 0.01); // Color change animation
animateRotation(rotateBox, 360, 1, 0.005); // Rotation animation

Hinweis zum Hauptthread

Bei der Verwendung von requestAnimationFrame ist unbedingt zu beachten, dass Animationen im Hauptthread des Browsers ausgeführt werden. Eine Überlastung des Hauptthreads mit zu vielen Aufgaben kann dazu führen, dass der Browser Animationsframes verpasst, was zu Stottern führt. Aus diesem Grund kann die Optimierung Ihrer Animationen mit Tools wie einem zentralen Animationsmanager und FPS-Steuerung dazu beitragen, dass die Animation auch bei mehreren Animationen flüssig bleibt.

Abschluss

Das effiziente Verwalten von Animationen in JavaScript erfordert mehr als nur die Verwendung von requestAnimationFrame. Durch die Zentralisierung von Animationen und die Steuerung der FPS können Sie flüssigere und leistungsfähigere Animationen gewährleisten und gleichzeitig die Reaktionsfähigkeit des Hauptthreads gewährleisten. In diesem Beispiel haben wir gezeigt, wie man mehrere Animationen mit einem einzigen AnimationManager handhabt, und demonstriert, wie sowohl Leistung als auch Benutzerfreundlichkeit optimiert werden können. Während wir uns der Einfachheit halber auf die Aufrechterhaltung einer konsistenten FPS konzentriert haben, kann dieser Ansatz erweitert werden, um unterschiedliche FPS-Werte für verschiedene Animationen zu verarbeiten, obwohl dies den Rahmen dieses Artikels sprengen würde.

Github Repo: https://github.com/JBassx/rAF-optimization
StackBlitz: https://stackblitz.com/~/github.com/JBassx/rAF-optimization

LinkedIn: https://www.linkedin.com/in/josephciullo/