Bewegte Bilder für spannendere Websites

Anime.js: Was taugt die JavaScript-Animation-Library?
Keine Kommentare

Angesichts der Vielzahl von Animation Libraries braucht es starke Argumente, um aufzufallen. Julian Garniers GitHub Projekt Anime.js setzt dabei auf JavaScript und eine unkomplizierte Anwendung. Hat Anime.js das nötige Zeug, um sich durchzusetzen?

Statische Buttons oder Hintergründe sind zwar effizient und schnell erstellt – aber auch manchmal ein bisschen langweilig. Wer etwas mehr Arbeit investieren mag, schmückt seine Website mit Animationen. So lässt sich nicht nur ein Hingucker zaubern, sondern auch  die User Experience steigern. Denn vielleicht stimmt es sogar, dass Menschen über bewegte Bilder sehr viel mehr lernen als über statische.

Anime.js möchte eine effiziente Möglichkeit anbieten, CSS- und SVG-Animationen zu erstellen. Der Name Anime.js ist zunächst insofern irreführend, als das es nicht um die beliebten Anime-Filme aus Japan geht, sondern um kleine Animationen. Aber das Angebot an Animation Libraries ist bereits üppig. Warum sollte man also zu Anime.js greifen?

Der Umfang von Anime.js

Das wichtigste zuerst, alle gängigen großen Browser unterstützen Anime.js. Beispielsweise lassen sich SVG-Animationen weiterhin durchführen, die nicht mehr überall unterstützt werden. Google hat die zukünftige Unterstützung für SMIL ausgesetzt, aber mit Anime.js ist das dennoch möglich.

Auch in puncto Geschwindigkeit kann Anime.js überzeugen. Wer auf den großen Umfang vom Schwergewicht GSAP verzichten kann, sollte sich Anime.js also ruhig mal anschauen. Die Syntax ist zugänglich gehalten. Hier finden sich Beispiele auf CodePen für hübsche und praktische Animationen, wie etwa diesen Stresstest.

Da Anime.js im Gegensatz zu reinen CSS-Animationen auf JavaScript basiert, kann es mit Elastizität punkten. Damit lassen sich die abrupten Enden von Animationen in sanfte Übergänge wandeln. Ein weiteres interessantes Feature ist die interaktive Steuerung: Mit Hilfe von play, pause und restart, lässt sich die Wiedergabe kontrollieren.

Schnelleinstieg und weitere Infos

Anime.js einzurichten ist genauso simpel, wie bei jeder anderen JavaScript Library. Nachdem man die Zip vom GitHub-Repository heruntegeladen hat, müssen bloß noch die Dateien extrahiert und eingebettet werden.

Nach dem Einbetten kann man auf verschiedene Funktionen zurückgreifen. Dazu zählt unter anderem das Definieren jeder einzelnen Animation. Durch das Callen von anime lassen sich Elemente einzeln anvisieren und animieren, die CSS-Attribute werden individuell anvisiert. In der Palette der Funktionen stehen noch rund 30 verschiedene Easing-Effekte zur Verfügung.

Offiziellen Support gibt es bislang nur in der Readme auf der GitHub Seite. Aber es gibt hilfreiche Tutorials, z.B. von Maria Perna und Denis Potschien.

Name Anime.js
Hersteller Julian Garnier
Projektwebsite http://anime-js.com/
GitHub https://github.com/juliangarnier/anime
International PHP Conference

Testing React Applications

by Hans-Christian Otto (Suora GmbH)

Building a Robo-Army with Angular

by Sebastian Witalec (Progress)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -