Anime.js: Kinderleicht tolle Animationen für JavaScript und SVG
(Grafik: Shutterstock/TarikVision)
In der Webentwicklung manuell brauchbare Animationen einzubauen kann schnell sehr aufwendig und umständlich werden. Abhilfe können JavaScript-Libraries schaffen. Eins davon ist Anime.js, welches nach längerer Pause kürzlich ein neuen Major-Release auf Version 3.0 verpasst bekommen hat.
So einfach können Animationen sein
Doch wie einfach werden Animationen dadurch wirklich? Im Grunde ermöglicht euch Anime.js auf verschiedenste Art und Weise Animationen auf eure Website zu bringen: Über CSS-Eigenschaften sowie individuelle Transformationsfunktionen (mit der CSS-Eigenschaft transform), HTML-DOM-Attribute sowie JavaScript-Objekte und sogar in dem Vektorgrafik-Format SVG. Mit Anime.js können nicht nur Animationen eingebunden werden. Die Library bietet zusätzlich verschiedene Features, die die Möglichkeiten zum Erstellen von bewegten Objekten erhöhen.
Um beispielsweise eine einfache Animation des Retro-Spiels Pong mit Anime.js zu implementieren, wird kaum Sourcecode benötigt. Drei HTML-Elemente werden mithilfe von leicht lesbarem JavaScript-Code animiert. Genutzt wird dabei eine der Hauptfunktionen: Timeline. Damit lassen sich verschiedene Animationen synchronisieren. So könnte die Eine starten, sobald die Andere beendet wurde. Mithilfe von Parametern kann das zusätzlich geändert werden.
Öffne den vollständigen Artikel, um die Pong-Animation und den Sourcecoude anzuzeigen.
Funktionsumfang: Von Staggering bis Keyframes
Das ist beispielsweise Staggering. Damit lassen sich mehrere Elemente gemeinsam animieren. Die könnten beispielsweise zusammen in eine Richtung bewegt werden. Es kann auch eine Verzögerung eingebaut werden, sodass die Elemente nacheinander animiert werden. Das Feature kann auch mit verschiedenen Optionen auf ein ganzes Gitter Anwendung finden. Eine etwas aufwendigere Staggering-Animation lässt sich dann mit relativ wenig Code so umsetzen:
Öffne den vollständigen Artikel, um die Staggering-Animation und den Sourcecoude anzuzeigen.
Das Herzstück der Library dürften aber Keyframes sein. Damit können in einem Array beliebig viele solcher Keyframes in einer Animation definiert werden. Diese durchlaufen dann alle Zielobjekte. Mit translateX beziehungsweise translateY und einem zugehörigen Wert bewegen sich die Objekte eine bestimmte Anzahl an Pixeln in die eine oder andere Richtung. Auch die Dauer oder Verzögerung für eine solche Bewegung sind mithilfe von Parametern einfach definierbar.
Zusätzlich liefert die Library JavaScript-Funktionen mit, welche eine Animation starten, pausieren, neu starten, invertieren oder zu einem bestimmten Zeitpunkt springen lassen können. So könnten Buttons beispielsweise eine Animation starten oder pausieren. Auch einige Callback-Funktionen sind an Bord: So können jedes Mal verschiedene Ereignisse eintreten, wenn sich eine Animation aktualisiert, gestartet, beendet und so weiter wird. Für jede Animation kann zudem die Art und Weise der Durchführung festgelegt werden. Neben vorimplementierten Funktionen für lineare, elastische oder schrittweise Animationen können auch ganz eigene Funktionen erstellt werden.
t3n meint:
Mit Anime.js wird es sehr einfach, professionelle Animationen auf die eigene Website zu bringen. Die gut verständliche Dokumentation und die zahlreichen Beispiele ermöglichen dabei einen schnellen Einstieg. Auch Features wie Staggering, Keyframes und die Timeline sprechen für Anime.js. Weitere Open-Source-Libraries werden meistens nicht so aktiv entwickelt oder haben keine derart gute Dokumentation. Für 3D-Animationen jedoch empfiehlt sich Three.js. Diese Library ist jedoch komplexer und weniger Einsteigerfreundlich. – Andreas Domin
Passend dazu:
- Animationen ohne JavasScript und mit animate.css
- Stehen wir am Anfang einer JavaScript-Ära?
- JavaScript: Die beliebtesten Frameworks und Tools in 2018
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team