Das After-Effects-Plug-in Bodymovin bringt in Kombination mit dem Lottie-Player ganz neue Freiheiten in die Welt der skalierbaren Vektoranimationen. Marko Hemmerich zeigt, wie einfach sich responsive Animationen fürs Web erzeugen lassen.
TOOLS: Adobe Illustrator und After Effects, Plug-in Bodymovin, Lottie-Player für Websiteeinbindung
VORKENNTNISSE: Kenntnisse in Illustrator, After Effects und HTML/CSS
ERGEBNIS: SVG-Animationen, die sich in jede Website einbinden lassen und glasklar skalieren
ZEITAUFWAND: eine Stunde (je nachdem, wie komplex die Animation wird)
Bisher war die Kreation von SVG-Animationen für Websites mühselig und nur in Zusammenarbeit mit Developern möglich, die statische Vektorgrafiken mit JavaScript oder CSS in saubere, webfähige Animationen transformierten. Zwar gibt es bereits diverse auf JavaScript basierende Plug-ins wie Mo.js, Bonsai.js oder Snap.svg, mit denen man SVGs animieren kann, allerdings nur per Code. Mit Adobes Flash-Nachfolger Animate CC kann man immerhin über ein grafisches User Interface Vektorgrafiken animieren und parallel Script-Code generieren, doch für professionelle Projekte bietet die Software lange nicht so umfassende Optionen und Werkzeuge wie After Effects.
Ein recht entspannter Workflow ist nun erstmals mit dem Zusammenspiel von Illustrator, After Effects und dem Plug-in Bodymovin des argentinischen Developers Hernan Torrisi sowie Airbnbs Lottie-Player möglich geworden. Zwar hat man es mit drei Tools zu tun, aber im Kreationsprozess bietet jedes von ihnen die beste Kontrolle über den jeweiligen Part. Wenn man als Designer in After Effects eine Vektorgrafik animiert und über das Plug-in Bodymovin als JSON- Datei exportiert, kann man diese mithilfe der Open-Source-Bibliothek Lottie steuern, um sie im Web oder auf Android und iOS laufen zu lassen. So lassen sich erstmals schöne Animationen selbst erstellen, ohne dass ein Developer Hand anlegen muss. Wie einfach dieser Workflow ist, zeige ich am Beispiel einer kleinen Animation, die wir kürzlich für XING zum Thema Datenschutz entwickelt haben.
1. Grafik in Illustrator gestalten
Die Vektorillustration für die Animation habe ich mit Adobe Illustrator erstellt. Es lässt sich zwar auch ein anderes Grafikdesign-Tool nutzen, doch hat Illustrator den Vorteil, dass die Fehleranfälligkeit beim Import in Adobe After Effects geringer ist. Je komplexer die Grafik, desto mehr Ladezeit benötigt die Website, in die sie eingebunden wird. Das sollte man bei der Gestaltung berücksichtigen. Ebenso wichtig ist es, die Grafik gleich von Beginn an sauber aufzubauen und die Ebenen eindeutig zu benennen und zuzuordnen, denn das hat enormen
Einfluss darauf, wie gut sich die Illustrationen an schließend weiterverarbeiten lassen. Das gilt einmal mehr, wenn die Animationen sich in mehrere Steps gliedern und viele Einzelbewegungen haben. Jeden Step beziehungsweise jede Bewegung sollte man in einer separaten Ebenengruppe zusammenfassen. Ohne eine solche klare Ebenenstruktur verliert man schnell den Überblick, und das kostet Zeit und Nerven. Daher ist es empfehlenswert, die zu animierenden Elemente in Illustrator auf einzelne Ebenen zu platzieren. So behält man alles im Griff und kann später in After Effects effizienter arbeiten.
2. Vektorgrafik in After Effects importieren
Nun habe ich die Grafik in After Effects im portiert. Über »Ablage > Importieren > Da tei …« öffnet sich das FinderFenster mit der
Dateistruktur. Hier ist es wichtig, unter »Importieren als« den Eintrag »Komposition« auszuwählen, damit Bodymovin die After Effects-Daten rendern kann. Nach dem Import zeigt sich der Vorteil der beschrie benen Ebenenorganisation: Man findet sich wesentlich schneller zurecht.
Es ist sinnvoll, die zu animierenden Elemente in Illustrator auf einzelne Ebenen zu platzieren. So behält man alles im Griff und kann in After Effects effizienter arbeiten.
3. lllustrator-Ebenen in Vektorebenen umwandeln
Bevor sich die Ebenen nun einzeln bearbeiten lassen, muss man sie in Vektorebenen konvertieren. Das scheint vielleicht erstmal
ein wenig irritierend, denn man hat ja bereits Vektoren importiert, aber damit man sie in After Effects weiterverarbeiten kann, ist dieser Schritt notwendig. Dazu wählt man die Illustrator-Ebene aus und wandelt sie über »Ebene > Formen aus Vektorebene erstellen« um. Ab jetzt arbeitet man nur noch mit den SVG-Ebenen, die ursprüngliche Illustration ist überflüssig geworden – es sei denn, man will doch noch Änderungen an ihr vornehmen. Dann muss man sie erneut importieren und umwandeln.
4. Die Blume in After Effects animieren
Als Erstes sollte der Stängel der Blume in die Höhe wachsen. Für die Animation habe ich in der Stängel-Ebene erst »Inhalt«, dann
»Group 1« und als Letztes »Path 1« ausgeklappt und dann die Zeitmarke an den Zeitpunkt positioniert, an dem der Stängel fertig gewachsen sein soll. Hier habe ich einen Keypoint gesetzt. Als Nächstes habe ich die Zeitmarke an den Punkt geschoben, ab dem der Stängel wachsen soll. Mit einem Klick auf »Pfad« unter »Path 1« blendete ich die beiden Ankerpunkte ein: Ich klickte auf den oberen und zog ihn nach unten bis zum zweiten. Daraufhin war der Pfad animiert, und der Stängel konnte in die Höhe schießen. Als Nächstes ließ ich dann eine Blüte wachsen und ein Blatt nach dem anderen aufploppen.
Die Blätter animierte ich so, dass es aussieht, als würden sie sich langsam im Wind auf und ab bewegen. Dafür habe ich den Rotationspunkt der Blätter an der Spitze positioniert, die auf dem Stängel sitzt, und dann die Keyframes für die Start-, Zwischen- und Endposition der jeweiligen Blätter gesetzt. Die Start- und Endpositionen müssen logischerweise dieselben Werte haben, damit ein sauberer Loop in der Bewegung entsteht.
Bei meiner Blume habe ich mich auf die Basisparameter »Position«, »Skalieren« und »Rotieren« beschränkt, denn der Lottie-Player kommt nicht mit allen Animationsoptionen klar. Manche von ihnen erkennt er schlichtweg nicht und spielt sie dann fehlerhaft ab. Auf ungewöhnliche Effekte sollte man also lieber verzichten. Leider gibt es dazu keine Negativliste, sodass man tatsächlich ausprobieren muss. In der Praxis hat sich aber gezeigt, dass Lottie nicht mit 3D-Ebenen umgehen kann. Auch die Expressions in After Effects – das sind kleine Skripte, mit denen man beispielsweise Ebenen kreisen lassen oder Bildspuren erstellen kann – funktionieren in der Regel nicht. Es besteht zwar die Möglichkeit, Expressions in Keyframes umzuwandeln, die dem Lottie-Player keine Probleme bereiten, doch dadurch wird die Datei auch deutlich größer, da es nun für jeden Frame auch einen Keyframe gibt. Außerdem ist uns aufgefallen, dass Alphamasken für Transparenzen und Lumamasken zur Texturierung, häufig falsch dargestellt werden. Besser ist es in diesem Fall also, mit klassischen Masken zu arbeiten.
5. Bodymovin-Plug-in installieren
Nun benötigen wir das After-Effects-Plug-in Bodymovin. Wer einen Adobe-Account besitzt, kann es sich kostenlos über Adobe
Exchange herunterladen. Nach der Installation findet man es in After Effects unter »Fenster > Erweiterungen > Bodymovin«.
6. Mit Bodymovin Animationen fürs Web exportieren
Ruft man Bodymovin auf, erhält man ein Fenster, in dem alle After-Effects-Kompositionen aufgelistet sind. Nun klickt man die zu exportierende Animation an und wählt einen Speicherort. Mit Klick auf »Rendern« startet der Exportprozess als JSON-Datei.
7. Testing im Online-Lottie-Player
Um die generierte JSON-Datei zu testen, kommt der Lottie-Player zum Einsatz. Unter www.lottiefiles.com/preview schiebt man
sie per Drag-and-drop in das Vorschaufenster und schon spielt automatisch die Animation ab. Praktischerweise kann man die Hintergrundfarbe direkt im Player ändern, falls die Kontraste nicht stimmen.
8. Animation in Website einbinden
Die JSON-Datei einzubauen ist relativ einfach. Zunächst bindet man die Lottie-Player- JavaScript-Library in die Website ein:
Zum Vergrößern anklicken
Und das war es auch schon. Nach der Aktualisierung des Browsers läuft die Animation entsprechend eurer Einstellung als Loop oder einmalig – und das voll responsiv.
Was ist eine SVG-Animation?
Mit dem Format SVG (Scalable Vector Graphics) lassen sich Vektorgrafiken im Browser darstellen. Wie bei Vektorgrafiken üblich werden Farbwerte und Formen nicht über Pixel definiert, sondern mathematisch beschrieben. Dadurch haben SVG-Animationen eine sehr geringe Dateigröße, lassen sich verlustfrei und ohne Zuwachs der Dateigröße skalieren, sind also voll responsiv.
Marko Hemmerich, Art Director mit Schwerpunkt UX-Concept & UI-Design, wünscht sich das World Wide Web fancy und lebendig. Mit dem after-effects-Bodymovin-Workflow hat er dafür ein neues Spielzeug gefunden.
↗ www.markohemmerich.de
Weitere After-Effect-Tutorials
After-Effects-Tutorial: Fahrstuhl zum Mars: Wie man mit 2D-Vektorgrafiken animierte, räumlich wirkende Schriftlogos erzeugt, erklären wir in diesem After-Effects-Tutorial für Fortgeschrittene.
