Was ist eine Lottie-Datei und wie funktioniert sie?

Wer eine Lottie-Datei öffnet, sieht im Texteditor zuerst JSON: geschweifte Klammern, Zahlen, kurze Schlüssel. Genau darin liegt der Unterschied zu einem Video. Eine Lottie-Datei enthält keine Bildfolge, sondern eine Beschreibung von Geometrie, Ebenen und Bewegung, die ein Renderer zur Laufzeit zeichnet. Was eine Lottie-Datei ist und wie sie funktioniert, wird klarer, wenn man die Pflichtfelder durchgeht.

Entstanden ist das Format bei Airbnb als Exportziel für Animationen aus der Designsoftware, und der Name der Exportfunktion hängt bis heute an vielen Dateien: Bodymovin.

Kurzdefinition

Lottie ist ein JSON-Format für Vektoranimationen. Es beschreibt Formen, Pfade, Masken, Text und deren zeitlichen Verlauf so, dass eine Bibliothek im Browser oder in einer App die Bewegung selbst berechnet. Es gibt keinen Pixelpuffer, keine Bilddaten im Sinne eines Videos und keinen Ton.

Die Pflichtfelder

Eine gültige Datei braucht sieben Angaben, und jede davon erklärt einen Teil des Verhaltens.

• v ist die Version des Formats, nach der die Datei geschrieben wurde.
• fr ist die Bildrate, in der die Keyframes gezählt werden.
• ip und op sind In- und Out-Point in Frames.
• w und h setzen Breite und Höhe in Nutzereinheiten.
• layers enthält die Ebenen mit ihren Eigenschaften und Keyframes.

Die Dauer folgt aus einer Division: fr = 60 mit ip = 0 und op = 120 sind 120 ÷ 60 = 2 Sekunden. Bei fr = 30 und op = 90 sind es 3 Sekunden. Wer die Zahlen ändert, ohne die Bildrate anzupassen, bekommt eine andere Geschwindigkeit, nicht nur eine andere Länge.

Auch die Größe ist relativ. w = 1920 und h = 1080 ergeben 2.073.600 Nutzereinheiten, aber keinen Speicherbedarf in dieser Höhe. Es ist ein Koordinatenraum, in dem gezeichnet wird. Fehlt eines der Felder, ist die Datei unvollständig, und ein Player kann sie nicht zuverlässig zeichnen.

Warum die Datei diffbar ist

Weil alles Text ist, lässt sich eine Lottie-Datei versionieren wie Quellcode. Eine geänderte Farbe erscheint als geänderte Zahl, ein neuer Keyframe als neuer Eintrag in der Liste. In einem Review sieht man die Änderung, statt zwei Videodateien nebeneinander abzuspielen.

Für die Zusammenarbeit ist das der praktische Vorteil. Eine Animation kann durch eine Freigabe gehen, ohne dass jemand eine Binärdatei austauscht. Automatisierte Prüfungen können Felder kontrollieren, etwa ob die Bildrate zum Zielsystem passt. Und weil die Datei lesbarer Text ist, lässt sie sich mit Suche und Ersetzen über mehrere Varianten hinweg anpassen, etwa wenn eine Bildrate in allen Dateien eines Projekts geändert werden soll.

Wie Bewegung in der Datei steht

Zwischen zwei Keyframes steht nicht „weich” oder „natürlich”, sondern eine Kurve. Lottie speichert Easing als zwei Bézier-Griffe pro Keyframe, einen für den Eingang und einen für den Ausgang, dazu ein Kennzeichen für gestufte Bewegung. Diese Zahlen sind das, was ein Player tatsächlich umsetzt. Warum dieselbe Kurve in zwei Werkzeugen unterschiedlich aussieht, erklärt Was sind Keyframes in der Animation?.

Was eine Lottie nicht trägt

Ton und Video gehören nicht dazu. Eine Lottie-Datei ist stumm und besteht aus Geometrie; wer eine Tonspur braucht, arbeitet mit einem Video.

Rasterbilder lassen sich als Assets einbetten, dominieren dann aber die Dateigröße und verlieren den Skalierungsvorteil. Aufwendige Effekte und manche Expressions überstehen den Weg zwischen Motion-Software und Player nicht eins zu eins. Deshalb gilt: früh exportieren und im echten Zielplayer prüfen, nicht erst nach der Fertigstellung.

Dazu kommt ein Container, der oft verwechselt wird. dotLottie bündelt eine oder mehrere Lottie-JSON-Dateien samt Assets in einer komprimierten Datei. Das Animationsmodell bleibt dasselbe, nur die Verpackung ist eine andere.

Grenzen im Editor

Die Ein- und Ausgabe von Lottie ist im Motion-Graphics- und VFX-Editor in beide Richtungen belegt, und Projekte sichern im eigenen .ecproj-Format. After-Effects-Projekte mit der Endung .aep oder .aepx lassen sich nicht öffnen, und AE-Plug-ins laufen nicht. Wer aus dieser Richtung kommt, muss die Szene neu aufbauen, statt sie zu konvertieren.

Eine Lottie-Datei ist damit vor allem eine Schnittstelle, die Vektorgeometrie und Timing dorthin transportiert, wo eine Bibliothek sie zeichnen kann. Welches Ausgabeformat für dein Projekt sinnvoller ist, klärt Lottie vs. GIF vs. MP4.