Web Animations API - JavaScript lernen

Die Web Animations API

Die Web Animations API (WAAPI) ermöglicht es Ihnen, Animationen direkt aus JavaScript heraus zu erstellen und zu steuern, ohne externe Bibliothek. Sie führt Animationen auf dem eigenen Compositor des Browsers aus – demselben Engine, der auch CSS-Animationen antreibt –, sodass Sie flüssige, hardwarebeschleunigte Bewegungen erhalten, aber mit der programmatischen Kontrolle von JavaScript-Animationen: Sie können Animationen zur Laufzeit abspielen, pausieren, umkehren, beschleunigen, springen und verketten.

Diese Seite behandelt die zwei Bausteine, die Sie benötigen: die Methode element.animate(), die eine Animation startet, und das Animation-Objekt, das zurückgegeben wird und mit dem Sie die Wiedergabe steuern und erkennen, wann die Animation abgeschlossen ist.

`element.animate(keyframes, options)`

Jede WAAPI-Animation beginnt mit einem einzigen Aufruf:

const animation = element.animate(keyframes, options);

keyframes — die visuellen Zustände, durch die die Animation läuft. Zwei Formen werden akzeptiert:
- ein array von Objekten, wobei jedes Objekt einen Frame darstellt: [{ opacity: 0 }, { opacity: 1 }]
- ein object von Arrays, wobei jede Eigenschaft ihre Werte entlang der Timeline auflistet: { opacity: [0, 1] }
options — entweder eine Zahl (die Dauer in Millisekunden) oder ein Timing-Objekt wie { duration: 1000, easing: "ease-in-out", fill: "forwards" }.

Der Aufruf gibt ein Animation-Objekt zurück und startet die Wiedergabe sofort. Eigenschaftsnamen verwenden die camelCase-CSS-Schreibweise (backgroundColor, nicht background-color).

Einfache Animation mit der Web Animations API

Um eine einfache Animation mit der Web Animations API zu erstellen, definieren Sie die Keyframes der Animation, geben das Zielelement an und konfigurieren die Animationsoptionen. Hier ist ein vereinfachtes Beispiel für die Animation der Deckkraft eines Elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Simple Opacity Animation</title>
  </head>
  <body>
    <h1>Simple Opacity Animation</h1>
    <div
      class="animated-element"
      style="width: 100px; height: 100px; background-color: blue"
    ></div>
    <button style="margin-top: 15px" onclick="startAnimation()">
      Start Animation
    </button>
    <p id="message"></p>
    <script>
      let animation;

      function startAnimation() {
        const element = document.querySelector(".animated-element");
        const keyframes = [
          { opacity: 0, offset: 0 },
          { opacity: 1, offset: 1 },
        ];
        const options = {
          duration: 1000,
          easing: "ease-in-out",
          iterations: 1,
          fill: "forwards",
        };

        // Create and play the animation
        animation = element.animate(keyframes, options);

        // Handle animation events
        animation.onfinish = () => {
          document.getElementById("message").textContent =
            "Animation finished!";
        };

        animation.oncancel = () => {
          document.getElementById("message").textContent = "Animation reset.";
        };
      }

      // Resets the animation
      function resetAnimation() {
        if (animation) {
          animation.cancel();
        }
        startAnimation(); // Restart the animation
      }
    </script>
  </body>
</html>

Probier es selbst »

Dieses Beispiel zeigt, wie die Deckkraft eines Elements mithilfe der Web Animations API animiert wird. Ein Button löst die Animation aus, die die Deckkraft des Elements sanft von unsichtbar (0) auf vollständig sichtbar (1) ändert. Nach Abschluss der Animation wird dem Benutzer eine Meldung angezeigt. Dies veranschaulicht grundlegende Animationssteuerung und Ereignisbehandlung.

Timing-Optionen

Das zweite Argument von animate() steuert, wie die Animation über die Zeit abläuft. Die nützlichsten Schlüssel sind:

Option	Bedeutung
`duration`	Länge einer Iteration in Millisekunden (oder ein CSS-Zeit-String wie `"1s"`).
`iterations`	Wie oft die Animation wiederholt wird. `Infinity` für Endlosschleife.
`easing`	Die Beschleunigungskurve: `"linear"`, `"ease"`, `"ease-in-out"` oder ein `cubic-bezier(...)`.
`fill`	Welcher Zustand außerhalb des aktiven Bereichs beibehalten wird. `"forwards"` hält den letzten Frame; `"backwards"` wendet den ersten Frame während `delay` an; `"both"` tut beides.
`delay`	Millisekunden, die vor dem Start gewartet werden.
`direction`	`"normal"`, `"reverse"` oder `"alternate"` (hin und zurück bei jeder Iteration).

Ohne fill: "forwards" springt ein Element sofort nach Animationsende auf seine ursprünglichen Stile zurück – eine häufige Fehlerquelle. Setzen Sie es, wenn der letzte Frame erhalten bleiben soll.

Das `Animation`-Objekt

element.animate() gibt eine Animation-Instanz zurück. Das ist das Handle, das Sie nach dem Start der Animation verwenden:

Member	Zweck
`play()`	Wiedergabe starten oder fortsetzen.
`pause()`	Am aktuellen Punkt einfrieren.
`reverse()`	Vom aktuellen Punkt rückwärts zum Anfang laufen.
`finish()`	Direkt zum Ende springen (oder zum Anfang, wenn umgekehrt).
`cancel()`	Anhalten und alle Effekte entfernen, angewendete Stile löschen.
`finished`	Ein Promise, das sich auflöst, wenn die Animation abgeschlossen ist – ideal für die Verkettung mit `await`.
`playState`	`"running"`, `"paused"`, `"finished"` oder `"idle"`.
`playbackRate`	Geschwindigkeitsmultiplikator; `2` ist doppelte Geschwindigkeit, `-1` spielt rückwärts.

const anim = box.animate({ transform: ["translateX(0)", "translateX(200px)"] }, 1000);

anim.pause();          // hold in place
anim.playbackRate = 2; // play twice as fast when resumed
anim.play();

anim.finished.then(() => console.log(anim.playState)); // "finished"

Da finished ein echtes Promise ist, können Sie es mit await verwenden, um Code nur nach dem Ende der Bewegung auszuführen, oder um Animationen sauber zu verketten – wie das nächste Beispiel zeigt.

Komplexe Animationen und Sequenzen

Für komplexere Animationen und Sequenzen können Sie mehrere Animationen mithilfe von Promises und async/await verketten. Hier ist ein Beispiel für die Verkettung von Animationen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animation Sequence</title>
  </head>
  <body>
    <h1>Animation Sequence</h1>
    <div
      class="animated-element"
      style="width: 100px; height: 100px; background-color: red"
    ></div>
    <button style="margin-top: 15px" onclick="animateSequence()">
      Start Animation
    </button>
    <p id="message"></p>
    <script>
      async function animateSequence() {
        document.getElementById("message").textContent = ""; // Clear message
        const element = document.querySelector(".animated-element");
        const animation1 = element.animate(
          { opacity: [0, 1], transform: ["scale(0)", "scale(1)"] },
          { duration: 1000, easing: "ease-in-out" }
        );

        await animation1.finished;

        const animation2 = element.animate(
          { opacity: [1, 0], transform: ["scale(1)", "scale(0)"] },
          { duration: 1000, easing: "ease-in-out" }
        );

        await animation2.finished;
        document.getElementById("message").textContent = "Sequence complete!";
      }
    </script>
  </body>
</html>

Probier es selbst »

In diesem Beispiel erhöht die erste Animation die Deckkraft des Elements und skaliert es hoch; nach deren Abschluss blendet die zweite Animation das Element aus und skaliert es wieder herunter. Am Ende wird eine Abschlussmeldung angezeigt, was zeigt, wie Animationen sequenziell verkettet werden können.

Animationen steuern und verwalten

Die Web Animations API bietet auch Methoden zur Steuerung und Verwaltung von Animationen. So können Sie eine Animation beispielsweise pausieren, fortsetzen oder abbrechen. Hier ist ein Beispiel, wie man eine Animation pausiert und fortsetzt:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Toggle Animation Play/Pause</title>
  </head>
  <body>
    <h1>Toggle Play/Pause Animation</h1>
    <div
      class="animated-element"
      style="width: 100px; height: 100px; background-color: green"
    ></div>
    <button style="margin-top: 15px" onclick="togglePlayPause()">Toggle Play/Pause</button>
    <p id="message"></p>
    <script>
      let animation;

      document.addEventListener("DOMContentLoaded", function () {
        const element = document.querySelector(".animated-element");
        animation = element.animate(
          { opacity: [0, 1] },
          { 
            duration: 1000, 
            easing: "ease-in-out", 
            iterations: Infinity, 
            direction: "alternate" 
          }
        );
        animation.pause(); // Start paused

        animation.onfinish = () => {
          document.getElementById("message").textContent =
            "Animation finished!";
        };
      });

      function togglePlayPause() {
        if (animation.playState === "running") {
          animation.pause();
          document.getElementById("message").textContent = "Animation paused";
        } else {
          animation.play();
          document.getElementById("message").textContent = "Animation playing";
        }
      }
    </script>
  </body>
</html>

Probier es selbst »

Dieses Beispiel zeigt, wie der Abspiel- und Pausezustand einer Animation per Klick umgeschaltet wird. Die ursprüngliche Animation lässt ein Element kontinuierlich ein- und ausblenden. Durch Klick auf einen Button kann der Benutzer die Animation pausieren, wenn sie läuft, oder abspielen, wenn sie pausiert ist. Meldungen zeigen den aktuellen Zustand der Animation an und verbessern so die Benutzerinteraktion und Kontrolle über die Animationszustände.

Web Animations API vs. CSS-Animationen

Beide laufen auf demselben Compositor, daher ist die Performance vergleichbar. Der Unterschied liegt in der Steuerung:

Greifen Sie auf CSS-Animationen zurück, wenn die Bewegung deklarativ und statisch ist – ein Hover-Effekt, ein Ladekreisel, ein Eingangsübergang, der sich vollständig in einem Stylesheet definieren lässt.
Greifen Sie auf die Web Animations API zurück, wenn die Animation von Laufzeitdaten oder Benutzereingaben abhängt: dynamische Keyframe-Werte, bedarfsgerechtes Pausieren und Fortsetzen, Verkettung mehrerer Animationen oder das Reagieren auf das Ende einer Animation über das finished-Promise.

Ein praktischer Mittelweg ist es, das Styling in Klassen zu belassen – siehe Stile und Klassen – und WAAPI nur für die Übergänge zu verwenden, die eine skriptgesteuerte Kontrolle benötigen.

Fazit

Die Web Animation API versetzt Webentwickler in die Lage, fesselnde und interaktive Animationen zu erstellen, die das Benutzererlebnis auf Websites und Webanwendungen verbessern. Wenn Sie diese API beherrschen, können Sie Animationen von einfachen Übergängen bis hin zu komplexen Sequenzen gestalten und Ihren Webdesigns eine dynamische und ansprechende Dimension verleihen. Ob Sie Benutzeroberflächen animieren, visuelle Effekte hinzufügen oder interaktive Storytelling-Elemente erstellen – die Web Animations API bietet Ihnen die Werkzeuge, um Ihre kreativen Ideen im Web zum Leben zu erwecken.

Übungen

Übung

Welche Funktionalitäten bietet die JavaScript Animation API?

Sie ermöglicht das Erstellen von Animationen im Web.Sie hilft beim Lösen mathematischer Gleichungen.Die API wird für die Erstellung JavaScript-basierter Animationen in HTML verwendet.Sie ermöglicht es, mit JavaScript Telefonanrufe zu tätigen.Sie unterstützt nur CSS-basierte Animationen.

Die Web Animations API

element.animate(keyframes, options)

Einfache Animation mit der Web Animations API

Timing-Optionen

Das Animation-Objekt

Komplexe Animationen und Sequenzen

Animationen steuern und verwalten

Web Animations API vs. CSS-Animationen

Fazit

Übungen

`element.animate(keyframes, options)`

Das `Animation`-Objekt