JavaScript: Alles animieren mit Anime.js 3.0

Die Animationsbibliothek Anime.js erhält in der dritten Hauptversion nicht nur neue Features, sondern auch eine Website, die Funktionen des Projekts vorführt.

In Pocket speichern vorlesen Druckansicht 34 Kommentare lesen
JavaScript: Alles animieren mit Anime.js 3.0

(Bild: Shutterstock)

Lesezeit: 2 Min.
Von
  • Björn Bohn

Version 3.0 der JavaScript-Bibliothek Anime.js ist erschienen, die zur Animation von HTML-, JavaScript-, CSS- und SVG-Elementen dient. Sie nutzt dazu eine einzelne API und funktioniert mit den Browsern Chrome (24+), Safari (8+), Internet Explorer/Edge (11+), Firefox (32+) und Opera (15+). Die neue Hauptversion wartet mit einer Reihe neuer Features auf und bietet zudem eine überarbeitete Website, die die verschiedenen Funktionen der Bibliothek visuell veranschaulicht.

Die Library unterstützt in Version 3.0 die in ECMAScript 6 eingeführten Module und verfügt außerdem über einen neuen Build-Prozess. Zusätzlich gibt es nun eine Funktion, die CSS-Einheiten automatisch umwandeln kann. Darüber hinaus pausiert Anime.js jetzt Animationen, wenn das Browserfenster oder -Tab nicht mehr im Vordergrund ist. Ebenfalls neu sind ein Keyframes-System, ein Helper für Staggering und eine Reihe von Easings und Callbacks.

Neben den Neuerungen bringt Anime.js 3.0 auch zwei Änderungen auf API-Ebene mit, die besonders für ältere Projekte relevant sind. Der Callback run() wurde durch change() ersetzt, ebenso getValue() durch get(). Entwickler, die noch die alten Funktionen gewohnt sind, müssen entsprechend auf die neuen Varianten setzen.

Damit potenzielle Anwender nicht lange rumprobieren müssen, zeigt die überarbeitete Anime,js-Website alle möglichen Animationen, die mit der Bibliothek umsetzbar sind. Beispiele sind ein Staggering-Effekt, der Animationen aneinanderreiht und ausführt, inklusive Overlapping, sowie die erwähnten Callback-Funktionen, mit denen Entwickler Events steuern können. Die Dokumentation listet die einzelnen Bestandteile auf, inklusive grafischer Umsetzung.

Eine vollständige Liste der Neuerungen findet sich in den Release Notes. Die Bibliothek ist auf GitHub verfügbar, Interessierte können sie manuell herunterladen oder mit dem Paketmanager npm via $ npm install animejs --save installieren. (bbo)