Lottie-Einschränkungen und häufige Fehler bei der Animation in After Effects

Häufige Fehler von Anfängern beim Erstellen von Animationen in After Effects für Lottie.

Was ist Lottie?

Lottie ist eine Open-Source-, effiziente und flexible Lösung, die die Implementierung von Animationen mühelos und reibungslos macht. Es reduziert die Kosten für das Schreiben von tausend Zeilen Code und ermöglicht es Entwicklern, selbst die komplexesten Animationen schnell umzusetzen. Lottie-Animationen ermöglichen einen reibungslosen Workflow, indem Animationswerte in JSON-Dateien gespeichert werden, wodurch reichhaltige Animationen mit weniger Aufwand erstellt werden können, und es werden Mischmodi genutzt, ohne Layouts zusammenzuführen.

Das Airbnb-Team stellte Lottie 2017 vor. Es handelt sich um eine iOS-, Android- und React Native-Bibliothek, die Animationen rendert, die in After Effects erstellt wurden. Lottie verwendet JSON-Dateien, die aus dem kostenlosen After Effects-Plugin Bodymovin exportiert wurden. Lottie unterstützt verschiedene Funktionen und Möglichkeiten, einschließlich Keyframe-Typen, Formebenen, Striche, Füllungen, Verläufe und andere After Effects-Funktionen.

Der tägliche Workflow in After Effects ist etwas anders als die Erstellung von Animationen für Lottie. Bevor Sie mit der Planung Ihrer zukünftigen Animation beginnen, müssen Sie verstehen, dass Lottie mehrere Einschränkungen hat, wie eine spezifische Liste unterstützter After Effects-Funktionen oder verbotene Plugins.

Wenn Lottie neu für Sie ist und Sie das Geld des Kunden mit einem benutzerfreundlichen Tool sparen oder stundenlange Kämpfe mit implementierten Animationen vermeiden möchten, die nicht funktionieren, sind hier einige der häufigsten Anfängerfehler.

Fehler, die man beim Erstellen von Animationen in After Effects für Lottie vermeiden sollte:

Alte Gewohnheiten

Nach Jahren als Animatoren und Designern haben wir viele Gewohnheiten entwickelt, wenn es um die Planung und Erstellung von Animationen geht. Die Verwendung und Abhängigkeit von bekannten Tricks, Plugins, Presets und Expressions in After Effects ist der erste häufige Anfängerfehler.

Leider unterstützt die Lottie-Bibliothek einige der wesentlichen Funktionen von After Effects nicht, wie Expressions oder Effects (aus dem Effects-Menü). Vergessen Sie auch Blending Modes, Luma Mattes und Layer Effects (wie einen Drop Shadow oder Colour Overlay), denn diese Funktionen werden ebenfalls nicht unterstützt. Lottie unterstützt jedoch Trim Paths als Teil der Funktionalität für Shape Layers.

Die Plattform (Android, iOS oder Web), auf der Sie die Animation verwenden möchten, ist ebenfalls wichtig. Da nicht alle Funktionen auf jeder Plattform unterstützt werden, müssen Sie zuerst eine lange Liste der unterstützten Funktionen überprüfen.

Die sicherste, aber vielleicht nicht die einfachste Lösung besteht darin, sich hauptsächlich auf „reine“ Shape-Animationen zu konzentrieren und, wenn nötig, die unterstützten Funktionen zu verwenden. Halten Sie Ihr Projekt so einfach wie möglich und erstellen Sie wunderschöne Animationen!

Unordentliche Ebenen

Es ist offensichtlich, dass Lottie am besten mit Formebenen funktioniert, aber um ehrlich zu sein, ist es manchmal schmerzhaft, Vektorillustrationen direkt in After Effects zu zeichnen. Natürlich können wir Inhalte aus Software wie Illustrator importieren und jedes Vektorelement in AE's Formebenen umwandeln. Für Sketch sind die Anweisungen sogar noch komplizierter. Dennoch sollten Sie vorsichtig sein, was genau Sie in Ihre Komposition importiert haben.

Reinigen Sie Ihre Formebenen sofort nach dem Import aus Adobe Illustrator

In den meisten Fällen, wenn Sie ein in einer anderen Software vorbereitetes Element hinzufügen und es in eine After Effects-Form umwandeln, werden einige unnötige Dinge in den Ebenen verborgen sein. Sie können Dinge wie zusätzliche Zusammenführungs-Pfade oder Gruppen finden. Diese nutzlosen Elemente beeinflussen die Animation in der Vorschau in AE nicht viel. Allerdings, nach langem, hartem Arbeiten beim Exportieren und der Vorschau mit Lottie, beginnen einige mysteriöse, schlechte Dinge zu passieren. In der Regel ist die Animation irgendwie beschädigt und verhält sich seltsam ungültig.

Die erste Aufgabe, wenn Sie das Problem erkennen, besteht darin, jede Formebene zu durchforsten und die Zusammenführungs-Pfade oder Gruppen zu entfernen, um die Komposition ordentlich zu machen. Leider müssen Sie in einigen Fällen die Komposition anders neu aufbauen und sie ein weiteres Mal animieren. Ich würde empfehlen, diese Ebenen sofort nach dem Import zu reinigen, um mögliche Probleme in der Zukunft zu vermeiden.

Zusätzlicher Tipp: Entfernen Sie Elemente aus der Komposition, nachdem Sie sie in Formebenen umgewandelt haben. So vermeiden Sie, dass sie mit JSON exportiert werden.

Nutzlose Keyframes

Ein großer Vorteil von Lottie ist die leichte exportierte JSON-Datei. Entwickler sind verrückt nach den kleinen Größen ihrer Webseiten und Apps, und das solltest du auch sein. Sei dir der Konsequenzen von langen Ladezeiten und stockenden Animationen bewusst.

Durch einen Fehler kannst du unerwünschte Kilobytes zu deiner perfekten Animation hinzufügen. Der erste Tipp ist, die „Parenting“-Technik bei jeder Gelegenheit zu verwenden, denn zusätzliche Keyframes bedeuten zusätzliche Kilobytes. Das Duplizieren derselben Keyframes auf verwandten Ebenen fügt nutzlose Codezeilen hinzu.

Animationen entlang eines Pfades oder die Verwendung von Voreinstellungen wie Autotrace oder Wiggler erzeugen viele zusätzliche Keyframes und können die Größe deiner JSON-Datei sehr problematisch machen.

Nicht nur bedeuten viele Keyframes Probleme, auch die Größe von Alpha Matte und Masken ist wichtig und kann die Leistung erheblich beeinträchtigen. Wenn du es verwenden musst, decke so wenig Fläche wie möglich ab. Du musst ein Gleichgewicht zwischen der Erstellung der Animation und der Effizienz ihrer Leistung finden.

Nicht zweimal überprüfen

Obwohl ich es bereits erwähnt habe, habe ich beschlossen, einen separaten Absatz über die Überprüfung Ihrer Animation zu schreiben, aufgrund der Wichtigkeit dieses Themas.

Testen Sie Ihr Projekt während des Animationsprozesses

In einigen Fällen sieht die Animation nach dem Export mit Bodymovin und der Vorschau mit Lottie nicht so aus wie die Animation, die Sie in After Effects erstellt haben. Sparen Sie Zeit, Nerven und Energie und vermeiden Sie es, Ihre Animation neu zu erstellen, indem Sie die unterstützten Lottie-Funktionen überprüfen und Ihr Projekt früher testen.

Überprüfen Sie den Zustand Ihrer Animation während des Animationsprozesses, nicht nur am Ende. Es wird einfacher sein, mögliche Hindernisse und Probleme zu finden, wenn Sie die unfertige Animation in der Bodymovin-Vorschau innerhalb von After Effects, auf Lotties Website oder mit Lotties App überprüfen.

Wenn Sie bereits Schwierigkeiten mit einer komplexen Komposition haben, ist es nicht so einfach, die Bereiche zu isolieren, die ein Problem verursachen. Sie müssen die gesamte Struktur durchgehen, beginnend mit dem Deaktivieren einiger Gruppen von Ebenen und dem Exportieren von Teilen der Animation. Vorschau mit Lottie und überprüfen Sie, welcher Teil die Komplikation verursacht. Nachdem Sie das Problem entdeckt haben, sollten Sie sich diese Ebenen genauer ansehen, zusätzliche Pfade entfernen oder es anders neu aufbauen.

Bonus: Nicht-Englische After Effects

Gradientprobleme sind nicht einzigartig, aber ich war schockiert, als ich die Lösung zum ersten Mal fand. Das häufigste Problem ist, dass ein farbenfroher Gradient als schwarz-weiß exportiert wird. Wenn Ihre Farben nicht zu funktionieren scheinen, überprüfen Sie, ob Ihr After Effects auf Englisch eingestellt ist und ob alle Ihre Ebenen und Kompositionen eindeutig auf Englisch benannt sind. Es funktioniert nicht jedes Mal, aber es hat während meiner Tests funktioniert.

Die Macht von Lottie

Trotz einiger Einschränkungen ist Lottie ein leistungsstarkes Tool. Zunächst einmal ist der Workflow wirklich einfach. Designer können reichhaltige Lottie-Animationen mit komplexen Interaktionen erstellen, ohne dass es zeitaufwendig ist, und Entwickler können diese Animationen problemlos in Code umwandeln. Designer können ihre Animationen einfach aus After Effects exportieren und Entwickler können diese problemlos in die Assets ihrer App einfügen. Außerdem ist Lottie plattformübergreifend, sodass Sie dieselbe JSON-Datei sowohl im Web als auch in iOS-Apps verwenden können. Es ist auch erwähnenswert, Lottie wegen seiner Skalierbarkeit von Vektoranimationen und seiner leichtgewichtigen exportierten Dateien in Betracht zu ziehen.

Wenn Sie Probleme mit dem Prozess haben, empfehle ich, auf Airbnbs Github nachzusehen oder dort über Ihre Probleme zu posten. Ich habe festgestellt, dass der Support wirklich hilfreich ist und auf jedes Anliegen reagiert.

Jetzt, da Sie über die Einschränkungen von Lottie Bescheid wissen, sind Sie bereit, herunterzuladen, was Sie benötigen, um zu beginnen und zu lernen, wie Bodymovin funktioniert, um Ihr erstes Projekt zu starten! Schließlich ist die Implementierung von Animationen nach Jahren des Kampfes mühelos und einfach.