So einfach: Walk-Cycle-Animationen fürs Web erzeugen

Für den Internetauftritt ihrer Glasfasernetzmarke Rasannnt wünschten sich die Stadtwerke Neustadt von uns vier animierte Figuren. Das Konzept: Jeder Charakter repräsentiert einen der vier angebotenen Tarife und deren Übertragungsgeschwindigkeiten – und das nicht nur rein illustrativ, sondern auch durch das passende Lauftempo von eher geruhsam bis richtig schnell.

Für die Animationen verwendeten wir sogenann­te Walk-Cycle-Animationen, also Sequenzen, die ei­ne vollständige Gehbewegung beschreiben. Dabei wird der ganze Bewegungsablauf in Einzelbilder zerlegt, die man hintereinander abspielt, um eine mög­lichst kontinuierliche Laufbewegung zu erzeugen. Das letzte Bild stimmt mit dem Anfang überein, sodass sich das Ganze als Endlosschleife abspielen lässt.

Um die Walk Cycles möglichst organisch wirken zu lassen, haben wir auf die Kombination von After Effects und Lottie gesetzt. Während das Adobe-Tool durch effektive Interpo­la­tion automatisch fließende Übergänge zwischen den Einzelbildern erzeugt, macht die JavaScript-Library Lottie es möglich, die so generierten Sequenzen als SVG-Animationen im Web abzuspielen. So bleiben die Dateigrößen winzig, die Animationen aber unbegrenzt skalierbar und responsiv. Auf geht’s!

Step by step: Walk-Cycle-Animationen fürs Web

1. Figuren in Illustrator vorbereiten

Die Illustrationen der vier Figuren lagen uns bereits in statischer Form vor ­– die interne Designabteilung des Kunden hatte sie uns zur Verfügung gestellt. Allerdings waren die Figuren als Flächen angelegt. Damit sie sich in After Effects animieren lassen, zeichnen wir ihre Konturen zunächst in ­Illustrator mit Pfaden nach. Die Glied­maßen, den Kopf und den Oberkörper platzieren wir gleich als separate Objekte auf einzelnen Ebenen, da dies später die Animation vereinfacht. Das Ergebnis speichern wir im .ai-Format.

2. Illustration in After Effects importieren

Als Nächstes legen wir in After Effects ein neues Projekt an und klicken in dem sich öffnenden Fenster auf die Option »Neue Komposition aus Footage«. Im folgenden »Öffnen«-Dialog wählen wir die vorbereitete Illustrator-Datei auf der Festplatte aus. Nachdem wir bei den Importeinstellungen »Komposition – Ebenengrößen beibehalten« aktiviert haben, erscheint unsere Figur nun als Komposition in der Projektpalette.

Nach einem Doppelklick auf das Icon der Datei übernimmt After Effects die Illustration in die Timeline – gesplittet auf die einzelnen Ebenen, die wir zuvor angelegt haben. Das macht es nun einfacher, die Gliedmaßen separat zu animieren und dabei die Übersicht zu behalten. Über die Kompositionseinstellungen (Befehl-K) ändern wir noch die Hintergrundfarbe von Schwarz auf Weiß.

3. Formebenen erzeugen

Um die Pfade in After Effects direkt editieren zu können, wandeln wir die Illustrator-Ebenen in sogenannte Formebenen um. Dazu wählen wir alle Ebenen aus und gehen unter »Ebene« auf »Erstellen › Formen aus Vektorebene er­­stellen«. Nun werden die neuen Formebenen generiert, und wir können die alten Ebenen löschen.

4. Walk-Cycle-Animation vorbereiten

Unsere Figur soll eine dynamische Laufbewegung bekommen, bei der der Oberkörper bei jedem Schritt nach unten wippt. Damit die Arme und der Kopf diesen Bewegungen automatisch folgen, klicken wir auf das Spiral-Icon (übergeordnetes Auswahlwerkzeug) in der jeweiligen Ebene und ziehen es auf die des Oberkörpers. Jetzt sind die Ebenen verknüpft, und die Arme und der Kopf der Figuren folgen ihrem Oberkörper als dem übergeordneten Element.

5. Keyframe-Animation für eine flüssige Laufbewegung

Jetzt beginnen wir mit der Arbeit an dem ­eigentlichen Walk Cycle. Insgesamt ist unsere Lauf­bewegung ungefähr eine Sekunde lang. Jedes Körperteil animieren wir einzeln. Der rechte Arm zum Beispiel dreht sich um die Schulter. Um dies zu erreichen, wählen wir ihn in der Ebenenpalette aus und wechseln zum Ausschnittwerkzeug (Y-Taste). Nun können wir den Nullpunkt des Arms auf den Schulterbereich verschieben. Dann müssen wir nur noch Keyframes im Bereich »Transformieren« der Ebenenpalette setzen und die Drehung des Arms einrichten.

Für eine möglichst organisch wirkende Gesamtbewegung genügt eine Drehung allein aber nicht aus, auch die Form des Armes sollte sich verändern: von einer gebogenen Haltung zu einer gestreckten. Da wir un­sere Vektorgrafikebenen in Schritt drei in Formebenen umgewandelt haben, können wir die Pfade an jedem gesetzten Keyframe verändern, indem wir in der Ebenenpalette die zu bearbeitende Pfadebene aufklappen und dann direkt die Ankerpunkte und Bézierkurven modifizieren.

After Effects interpoliert unsere Veränderungen dann zwischen den Keyframes. Für die Animation der Beine benötigen wir 16 Schlüsselbilder, um eine flüssige Bewegung zu erzielen, für die Arme genügen sechs. Generell gilt die Faustregel: Je mehr Keyframes zum Einsatz kommen, desto genauer lässt sich die Gesamtbewegung steuern.

6. Animation exportieren

Um die für die Website-Einbindung benötigte JSON-Datei zu erzeugen, nutzen wir das kostenlose Plug-in Bodymovin. Nach der Installation steht es in After Effects unter »Fenster › Erweiterungen › Body­movin« zur Verfügung. Klicken wir im »Settings«-Dialog die »Standard«-Option an, wird eine JSON-Datei ausgegeben, die eine mathematische Beschreibung der kompletten Animation enthält. Um diese direkt lokal im Browser abzuspielen und zu testen, wählt man außerdem die Option »Demo«.

Je mehr Vektoren und Ankerpunkte sie enthält, um so größer wird die Datei. Dennoch bleibt sie im Vergleich zu klassischen Videos in Pixelformaten wie MOV oder MPEG winzig. Unsere Walk-Cycle-Anima­tion ist zum Beispiel nur 76 Kilobyte groß!

7. Animation in die Website einbinden

Die JSON-Files unserer Walk-Cycle-Animationen übergaben wir an die Hamburger Ent­wickler rock&stars, die sie mit Lottie in die auf WordPress-basierte Rasannnt-Website ein­­ban­den. Die JavaScript-Library interpretiert die JSON-Da­tei und rendert sie als SVG-Animationen. So kom­pakt die entstehenden Vektordateien auch sind – ein schar­fes Bild auf allen Endgeräten ist garantiert.

Wer die JSON-Dateien ohne Programmierkenntnisse in seine Website einbinden möchte, kann die Plattform LottieFiles verwenden. Dort lassen sich die JSON-Dateien hochladen und auch gleich anschauen. Für die Integration in die Website stellt LottieFiles einen Embed-Code bereit. In WordPress kann man diesen Code zum Beispiel einfach in ein HTML-Modul einsetzen. In diesem Fall braucht es keine JavaScript-Kenntnisse, um die Animationen zum Laufen zu bringen.

Geschafft!

Am Ende haben wir eine schlanke, skalierbare SVG-Animation, die in einer JSON-Datei gespeichert ist. Bodymovin erlaubt auch die Ausgabe als MOV oder als animiertes GIF – beispielsweise fürs Teilen in Social Media. Außerdem lassen sich statische PNGs als Fallback exportieren.

Mit der beschriebenen Technik konnten wir aufwendige Walk-Cycle-Animationen in die Rasannnt-Website integrieren, ohne deren Performance zu beeinträchtigen. Begeistert von den Möglichkeiten, die die Kombination aus After Effects, Bodymovin und Lottie bietet, nutzen wir sie nicht nur für Kund:innenprojekte, sondern setzen sie auch auf unserer eigenen Website ein.

Das sind Lottie und LottieFiles

Die von Airbnb entwickelte JavaScript-Library Lottie steht Open Source zur Verfügung. Sie interpretiert JSON-Dateien und stellt sie im Web oder unter iOS und Android als SVG-Animationen dar. Mithilfe der Bibliothek lassen sich die Vektoranimationen mit wenigen Zeilen Code in die eigene Website einbinden. Ist zusätzli­che Interaktivität gefordert, benötigt man allerdings Programmierkenntnisse.

Auf der Plattform LottieFiles kann man via Lottie Player ohne Coding-Know-how interaktive Lottie-Animationen erstellen und testen. Diese können die User:innen dann zum Beispiel per Cursorposition, Hover oder Scrollen steuern.

Markus Remscheid mag hochperformante Websites, die funktional und emotional überzeugen. Webanimationen mit After Effects, Bodymovin und Lottie sind ein Weg dorthin. 

Dieser Artikel ist in PAGE 08.2021 erschienen, die Sie hier komplett runterladen können.

PDF-Download: PAGE 08.2021

Produkt-Details anzeigen

Schriften finden: Types & Trends ++ Diversity: Illustrieren mit Respekt ++ Arbeiten im Kollektiv ++ SPECIAL Kiel Mutschelknaus ++ Tutorial: Walk-Cycle-Animationen ++ Designstudium im Umbruch

8,80 €

AGB