|

Animieren mit der Web Animation API (Einstieg, Teil 1)

Eine effektive Methode, um User Interfaces attraktiver und verständlicher zu gestalten, ist das Animieren von Elementen. Ob Buttons, Formularfelder oder Grafiken - der Kreativität sind keine Grenzen gesetzt. Viele Webentwickler setzen an dieser Stelle auf CSS Animations. Was einige aber nicht wissen: CSS Animations bauen auf der sogenannten Web Animations API (kurz WAAPI) auf.

Diese Schnittstelle bietet uns Entwicklern die Möglichkeit, die Animations-Engine des Browsers mithilfe von JavaScript direkt anzusprechen. In diesem Artikel schauen wir uns einige nützliche Funktionen und Erweiterungen der <Element> Klasse um die WAAPI an.

Gegenüberstellung - CSS gegen JS

Um später einen besseren Einstieg in die JavaScript Variante zu haben, betrachten wir zunächst den bekannten Weg via CSS. CSS-Animationen machen es uns möglich, Übergänge von einer CSS Regel zur anderen zu animieren. Animationen bestehen aus zwei Komponenten.

  • Einem Stil, der unsere CSS-Animation beschreibt (animation)
  • und einem Satz von Keyframes, die den Anfangs- und Endzustand des Stils der Animation sowie mögliche Zwischenwegpunkte angeben (@keyframes)

Beispiel als Shorthand:

.cube {
    animation: ueber 3s ease-in 1s infinite reverse both running;
}

@keyframes ueber {
    ...
}

Die animation Regel besitzt einige Eigenschaften. Hier die vollständige Aufzählung.

Eigenschaft Beschreibung
animation-name Die Zuordnung zu definierten Keyframes
animation-duration Die Dauer der Animation
animation-timing-function Den zeitlichen Bewegungsablauf
animation-delay Die Verzögerung
animation-iteration-count Die Anzahl der Iterationen
animation-direction Die Richtung
animation-fill-mode Den Füllmodus
animation-play-state Den aktuellen Status (aktiv / pausiert)

See the Pen CSS Animation by Florian Gaa (@bitbruder) on CodePen.

Obacht! Wir werden nun die JavaScript Welt betreten. Wer sich weiter mit CSS Animations beschäftigen will, dem empfehle ich den tollen MDN Artikel zu CSS Animations.

Unsere erste Animation mit der Web Animations API

Wer sich den kommenden CodePen etwas genauer anschaut, der wird feststellen, dass wir ein paar alte Bekannte wieder sehen:

  • Die aus CSS bekannten animation Eigenschaften finden sich in einem AnimationEffectTimingProperties Objekt wieder.
  • Unsere @keyframes befinden sich in einem KeyframeEffects Array.

See the Pen WAAPI Animation by Florian Gaa (@bitbruder) on CodePen.

Viele werden sich jetzt folgende Frage stellen: Konnte ich das nicht schon die ganze Zeit mit jQuery umsetzen? Jein! jQuery bringt eine eigene animate() Funktion mit, diese wird allerdings nicht Hardwarebeschleunigt und setzt nicht auf der Browser-Eigenen Animation Engine auf. Das kann sich heftig auf die Performance unserer Animation auswirken.

Wie so oft hatte das API-Design von jQuery aber sicherlich einen Einfluss auf die offizielle WAAPI.

Sehr mächtig: Der Zugriff auf die Zeitleiste der Animation

Bis zu diesem Zeitpunkt haben wir nur eine schlichte Animation erstellt, die wir auch mit CSS umsetzen können. Eine wahre Power der Web Animation API sind Funktionen, die uns Zugriff und Manipulation der Zeitleiste unserer Animation ermöglichen.

Im folgenden CodePen benutzen wir Funktionen wie play(), pause() oder reverse(), um unsere Animation über Nutzereingaben zu steuern.

See the Pen WAAPI Playback Control by Florian Gaa (@bitbruder) on CodePen.

Slowmo und Fast Forward: Abspielrate anpassen

Mit playbackRate können wir die Wiedergabegeschwindigkeit unserer Animation steuern. So können unsere Benutzer die Geschwindigkeiten unserer Animationen im User Interface selbst anpassen. Ein toller Weg um das Web barriereärmer zu machen!

See the Pen WAAPI PlaybackRate by Florian Gaa (@bitbruder) on CodePen.

Browsersupport

Infos zur aktuellen nativen Browserunterstützung - kann per Polyfill nachgerüstet werden (und läuft somit in allen Browsern)!

Can I Use web-animation? Data on support for the web-animation feature across the major browsers from caniuse.com.

Beim nächsten Mal ...

Das war natürlich noch lange nicht alles. Die WAAPI ist sehr mächtig und bietet einige Möglichkeiten, die den Rahmen für unseren ersten Teil sprengen würden.

Im nächsten Artikel schauen wir uns die Erweiterung des document um document.timeline und document.getAnimations() an. Um zu erfahren wann der nächste Artikel online geht, folge uns ganz einfach auf Twitter oder Facebook!