Lottie: Was es ist, Animationen und wie es auf mobilen Plattformen funktioniert

Was ist Lottie und wie funktioniert es

Lottie ist eine Open-Source-Bibliothek, die 2015 von Airbnb entwickelt wurde, um Vektor-Animationen in Echtzeit zu rendern. Der Entwickler erstellt eine Animation in Adobe After Effects, exportiert sie über das Bodymovin-Plugin nach JSON, und Lottie spielt dieses JSON auf dem Zielgerät ab, indem es Ebenen, Formen, Transparenz und Animationskurven interpretiert.

Anders als Videodateien oder GIFs ist Lottie auflösungsunabhängig – die Animation wird vektoriell gerendert und sieht auf Geräten mit beliebigem DPI gleich aus. Eine JSON-Animation ist im Durchschnitt 5-10 Mal kleiner als ein äquivalentes GIF oder Video, was für mobile Anwendungen mit begrenzter Bandbreite entscheidend ist.

Laut Airbnb Engineering reduzierte die Einführung von Lottie die Animationsgröße in der App um 80 % im Vergleich zu Precomposed-Videosequenzen, bei gleichbleibenden 60 FPS auf allen unterstützten Geräten. Heute wird Lottie auf iOS, Android, Flutter, React Native, Web (HTML Canvas und SVG) und Desktop-Plattformen unterstützt.

Die Leistung von Lottie beruht auf nativem Rendering: Unter iOS wird Core Animation mit CALayer verwendet, unter Android – ein eigener Canvas-Renderer in C++ über JNI. Dies ermöglicht das Abspielen komplexer Animationen mit Dutzenden von Ebenen ohne Bildausfälle selbst auf Mittelklasse-Geräten. Anders als WebView-basierte Lösungen (GIF, APNG, Video) erzeugt Lottie keinen separaten Render-Prozess und verbraucht keinen zusätzlichen Speicher für die Frame-Dekodierung.

Verwenden Sie Lottie für Lade-Indikatoren, Symbole mit Mikrointeraktionen, Onboarding-Bildschirme und festliche Promo-Animationen, bei denen Flüssigkeit und geringe Dateigröße wichtig sind.

Das Lottie-Ökosystem umfasst offizielle Player für acht Plattformen, den LottieFiles-Editor zur Vorschau im Browser und einen Marktplatz mit Tausenden von fertigen Animationen. Der Entwickler kann ein JSON herunterladen, in ein Projekt integrieren und Farben und Geschwindigkeit an das Designsystem anpassen, ohne After Effects öffnen zu müssen. LottieFiles bietet auch ein SDK für eine beschleunigte Integration mit der Möglichkeit, Animationen über einen AIR-Link zu laden, was Animations-Updates auf Geräten ermöglicht, ohne eine neue App-Version im App Store oder Google Play zu veröffentlichen.

Lottie JSON-Format und Bodymovin

Das Lottie JSON-Schema ist ein offener Standard zur Beschreibung von Vektor-Animationen, bestehend aus drei Ebenen: Komposition, Ebenen und Formen. Die Komposition enthält Metadaten: Leinwandgröße, Bildrate und Dauer.

JSON-Struktur

Das Wurzel-JSON-Objekt enthält das Feld layers – ein Array von Animationsebenen. Jede Ebene kann eine Shape-Ebene, Image-Ebene, Text-Ebene oder PreComp-Ebene sein. Für jede Ebene werden Transform-Eigenschaften definiert: Position, Skalierung, Rotation und Deckkraft, die an Keyframes gebunden sind.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

Keyframes werden als Arrays mit Zeitstempeln, Werten und Bezier-Kurven zur Interpolation definiert. Bodymovin konvertiert automatisch After Effects-Kurven in ein Lottie-kompatibles Format und bewahrt Timing und Easing-Funktionen mit Frame-genauer Präzision.

Bodymovin – Export-Plugin

Bodymovin ist eine Adobe After Effects-Erweiterung, die eine Komposition in eine Lottie-JSON-Datei exportiert. Das Plugin unterstützt die meisten After Effects-Funktionen: Formen, Masken, Effekte, Textebenen und Tracking. Einschränkungen gelten für 3D-Ebenen und einige Plugins – sie werden nicht exportiert und erfordern eine Vereinfachung der Animation auf 2D.

Lottie-Integration auf iOS

Auf iOS wird Lottie über Swift Package Manager, CocoaPods oder Carthage integriert. Die Hauptklassen sind LottieView für SwiftUI und LottieAnimationView für UIKit. Das Paket lottie-ios unterstützt Animationen aus dem Bundle, Netzwerk und Data-Objekten.

LottieView in SwiftUI

LottieView ist eine View-Komponente für SwiftUI, die einen JSON-Dateinamen aus dem Bundle oder eine URL zum Laden aus dem Netzwerk akzeptiert. Die Animation wird automatisch mit der angegebenen Geschwindigkeit und Wiederholungsanzahl abgespielt.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

Für UIKit wird LottieAnimationView verwendet, konfigurierbar über Interface Builder oder programmatisch. Die View unterstützt alle Animationszustände: Play, Pause, Stop sowie eine Fortschrittsanzeige zum Laden von Daten. LottieAnimationView kann in UITableViewCell oder UICollectionViewCell für animierte Symbole in Listen eingebettet werden – beim Scrollen pausiert die Animation und beim Erscheinen der Zelle auf dem Bildschirm wird sie fortgesetzt, was CPU- und GPU-Ressourcen spart.

Die moderne iOS-Entwicklung verwendet Lottie aktiv mit SwiftUI, um animierte Onboarding-Bildschirme und interaktive Elemente zu erstellen: Beim Scrollen wird der Animationsfortschritt über ScrollViewReader mit der Scrollposition synchronisiert. Dies erzeugt einen Parallax-Effekt, bei dem die Animation kontinuierlich der Fingerbewegung des Benutzers folgt und so das Engagement ohne schwere Videodateien steigert.

Wiedergabesteuerung

Der Lottie-Player auf iOS bietet eine API zur Wiedergabe von einem bestimmten Frame zu einem anderen, zum Ändern von Füll-/Strichfarben über KeyPaths und zum Abhören von Ereignissen über LottieAnimationDelegate. Sie können die Animation beim Scrollen pausieren und beim Anhalten fortsetzen, um die Leistung zu optimieren.

Lottie-Integration auf Android

Auf Android wird Lottie über die Gradle-Abhängigkeit com.airbnb.android:lottie hinzugefügt. Die Hauptkomponente ist LottieAnimationView, die im XML-Layout als normale View platziert und über Attribute oder programmatisch konfiguriert werden kann.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

Im XML-Layout wird LottieAnimationView über Attribute konfiguriert: lottie_rawRes (Verweis auf JSON in res/raw), lottie_autoPlay, lottie_loop. Das Laden aus dem Netzwerk wird über lottie_url oder programmatisch über setAnimationFromUrl unterstützt. Die Android-Version von Lottie verwendet einen eigenen Canvas-Renderer, der unabhängig von Hardware-Beschleunigung ist.

Laden aus RawRes und Netzwerk

Für statische Animationen wird JSON in res/raw abgelegt und über RawRes referenziert. Für dynamische Animationen lädt Lottie JSON von einer URL oder einem Data-Objekt mit einem Fortschritts-Callback, der den Download-Prozentsatz anzeigt. Der Lottie-Cache speichert geladene Animationen automatisch im Speicher, um erneutes Herunterladen bei wiederholtem Rendern zu vermeiden.

Lottie für Android unterstützt Animationen im RecyclerView über LottieAnimationView, die direkt in Listenelemente eingebettet wird. Zur Leistungsoptimierung wird empfohlen, setAnimation mit verzögertem Laden zu verwenden und Animationen für nicht sichtbare Elemente über den RecyclerView.OnChildAttachStateChangeListener-Callback zu deaktivieren. Dies verhindert FPS-Einbrüche beim Scrollen langer Listen mit animierten Symbolen.

Anpassung und Steuerung von Lottie-Animationen

Lottie bietet eine leistungsstarke API zur Anpassung fertiger Animationen ohne Änderung der ursprünglichen After Effects-Datei. Dies ermöglicht die Anpassung einer einzelnen Animation an verschiedene Designs, Farben und App-Größen.

Farbänderung über KeyPath

Füll- und Strich-Farben können zur Laufzeit über KeyPath geändert werden – einen Zeichenfolgenpfad zu einem Animationselement. Zum Beispiel, um die Farbe eines Wagensymbols von Rot auf Blau zu ändern, muss man nur seinen KeyPath finden und den neuen Wert anwenden. Dadurch entfällt die Notwendigkeit, mehrere Versionen derselben Animation für verschiedene Farbschemata zu speichern.

Geschwindigkeits- und Fortschrittssteuerung

Jede Lottie-Animation kann nach Geschwindigkeit (animationSpeed), Fortschritt (setProgress) und Bildbereich (play(fromFrame:toFrame:)) gesteuert werden. Der Fortschrittsmodus ermöglicht die Synchronisierung der Animation mit einer Scroll-Geste: Je weiter der Bildschirm gescrollt wird, desto weiter ist die Animation fortgeschritten – eine beliebte Technik für Onboarding und Parallax-Effekte.