Lottie-Animationen in React Native einbinden

1. Was ist Lottie und wie funktioniert die JSON-Pipeline?

Lottie ist ein von Airbnb entwickeltes Format und eine Rendering-Bibliothek, die Animationen aus Adobe After Effects als JSON-Datei exportiert und auf verschiedenen Plattformen nativ abspielt. Der Export läuft über das Plugin Bodymovin, das Ebenen, Formen, Pfade und Keyframes aus After Effects in eine deklarative JSON-Beschreibung übersetzt, die keine Rasterbilder enthält, sondern reine Vektordaten.

Auf React Native übernimmt lottie-react-native das Parsen und Rendern dieser JSON-Datei, indem es die nativen Lottie-Bibliotheken für iOS und Android unter der Haube einbindet. Die eigentliche Wiedergabe passiert dadurch nativ, vergleichbar mit einer Vektorgrafik, die bei jedem Frame neu interpoliert wird, nicht als abgespieltes Video oder animiertes GIF, was deutlich kleinere Dateigrößen und scharfe Darstellung auf jeder Bildschirmgröße ergibt.

2. Einrichtung: Installation und erste LottieView

Nach der Installation von lottie-react-native und dem nötigen nativen Linking lässt sich eine Animation entweder als lokale JSON-Datei über require() oder als entfernte URL einbinden. Für produktive Apps ist die lokale Variante meist vorzuziehen, weil sie keine Ladezeit und keine Abhängigkeit von Netzwerkverfügbarkeit mit sich bringt.

Die Komponente LottieView übernimmt dabei die komplette Wiedergabelogik: Größe, Wiederholung und Autostart lassen sich direkt über Props steuern, während feinere Kontrolle, etwa das gezielte Starten nach einem Nutzerereignis, über eine Ref und imperative Methoden erfolgt.

import LottieView from 'lottie-react-native';

function SuccessAnimation() {
  return (
    <LottieView
      source={require('./assets/success-check.json')}
      autoPlay
      loop={false}
      style={{ width: 160, height: 160 }}
    />
  );
}

3. Programmatische Steuerung: play, pause und Geschwindigkeit

Für Anwendungsfälle, in denen eine Animation gezielt zu einem bestimmten Zeitpunkt starten oder pausieren soll, etwa nach einem erfolgreichen Formular-Submit, wird eine Ref auf die LottieView gelegt. Darüber lassen sich play(), pause() und reset() imperativ aufrufen, wahlweise mit einem Start- und Endframe, um nur einen Ausschnitt der Animation abzuspielen.

Die Wiedergabegeschwindigkeit lässt sich über die speed-Prop anpassen, was sich in der Praxis eignet, um dieselbe Animationsdatei für unterschiedliche Kontexte wiederzuverwenden, etwa eine schnellere Version für ungeduldige Wiederholungsnutzer und eine langsamere für den ersten Onboarding-Moment.

function SubmitButton() {
  const animationRef = useRef<LottieView>(null);
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit() {
    setSubmitting(true);
    await submitForm();
    animationRef.current?.play(0, 60);
  }

  return (
    <LottieView
      ref={animationRef}
      source={require('./assets/success-check.json')}
      loop={false}
      autoPlay={false}
      onAnimationFinish={() => setSubmitting(false)}
    />
  );
}

4. Dynamische Farben ohne Bearbeitung der JSON-Datei

Eine häufige Anforderung ist, eine von Designern gelieferte Lottie-Animation an die aktuelle Markenfarbe oder ein Dark-Theme anzupassen, ohne für jede Variante eine eigene JSON-Datei zu pflegen. Über die colorFilters-Prop lassen sich einzelne benannte Ebenen der Animation zur Laufzeit umgefärbt, vorausgesetzt die Ebenen wurden in After Effects mit sprechenden Namen versehen.

Für komplexere Fälle bietet lottie-react-native zusätzlich eine Dynamic-Properties-API, mit der sich nicht nur Farben, sondern auch Position, Größe oder Deckkraft einzelner Ebenen zur Laufzeit überschreiben lassen, was Themes oder personalisierte Inhalte innerhalb derselben Animation ermöglicht.

<LottieView
  source={require('./assets/onboarding-illustration.json')}
  autoPlay
  loop
  colorFilters={[
    { keypath: 'Primary Shape', color: theme.colors.brandPrimary },
    { keypath: 'Accent Shape', color: theme.colors.brandAccent },
  ]}
/>

5. Interaktivität: Fortschritt an Scroll oder Geste koppeln

Über die progress-Prop lässt sich der Wiedergabefortschritt einer Lottie-Animation direkt setzen, statt sie automatisch abzuspielen. Damit lassen sich Animationen an Nutzerinteraktionen koppeln, etwa ein Pull-to-Refresh-Indikator, dessen Fortschritt proportional zur Zugdistanz gesetzt wird, oder eine Fortschrittsanzeige, die exakt zum Scrollstand eines Onboarding-Screens passt.

Wichtig ist dabei die Einschränkung, dass jede Aktualisierung von progress über den JS-Thread läuft, nicht über ein Worklet auf dem UI-Thread wie bei Reanimated. Bei sehr häufigen Updates, etwa bei jedem Pixel einer Scroll-Geste, kann das zu spürbaren Verzögerungen führen, weshalb in solchen Fällen eine Drosselung der Update-Frequenz sinnvoll ist.

const [progress, setProgress] = useState(0);

const scrollHandler = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
  const ratio = event.nativeEvent.contentOffset.y / MAX_SCROLL;
  setProgress(Math.min(Math.max(ratio, 0), 1));
};

<LottieView
  source={require('./assets/progress-indicator.json')}
  progress={progress}
/>

6. Performance-Eigenschaften und typische Bremsen

Lottie rendert nativ und ist für viele Alltagsanimationen performant genug, ohne dass Entwickler sich um Details kümmern müssen. Bei sehr komplexen Animationen mit vielen Ebenen, Masken oder Formen, die per Expression in After Effects berechnet wurden, kann die Wiedergabe auf älteren Geräten dennoch spürbar CPU-Last erzeugen, weil jede Ebene bei jedem Frame neu interpoliert werden muss.

In der Praxis hilft es, Animationen vor dem Export in After Effects zu vereinfachen: Formen zusammenfassen, unnötige Ebenen entfernen und Expressions durch feste Keyframes ersetzen, wo möglich. Das neuere dotLottie-Format bündelt zudem mehrere Animationen und Assets komprimiert in einer Datei und reduziert damit sowohl Bundle-Größe als auch Ladezeit gegenüber einzelnen JSON-Dateien.

7. Grenzen gegenüber selbst programmierten Reanimated-Animationen

Lottie eignet sich hervorragend für fest choreografierte, von Designern gestaltete Sequenzen wie Erfolgs-Checkmarks, Ladeanimationen oder Onboarding-Illustrationen, bei denen die Bewegung im Voraus feststeht. Sobald eine Animation aber dynamisch auf physikalische Eingaben reagieren soll, etwa eine Karte, die einer Fingerbewegung in Echtzeit folgt und dabei natürlich ausschwingt, stößt Lottie an seine Grenzen, weil die Wiedergabe an eine vorab aufgezeichnete Zeitachse gebunden bleibt.

Reanimated und Skia erlauben dagegen vollständig code-getriebene, worklet-basierte Animationen, die auf jeden beliebigen Eingabewert in Echtzeit reagieren können, ohne an eine feste Keyframe-Sequenz gebunden zu sein. Die pragmatische Faustregel lautet deshalb: Designer-authored, feste Sequenzen gehören zu Lottie, physikalisch reagierende oder datengetriebene Interaktionen gehören zu Reanimated oder Skia.

8. Die Asset-Pipeline in der Praxis: Fallstricke beim Export

Nicht jedes After-Effects-Feature wird von Lottie-Renderern unterstützt. Bestimmte Masken- und Matte-Typen, manche Expressions und einige Textlayer-Effekte werden vom Bodymovin-Export entweder ignoriert oder führen zu sichtbaren Abweichungen zwischen der Vorschau in After Effects und dem tatsächlichen Rendering in der App. Ein Test der exportierten Datei im LottieFiles-Preview vor der Integration erspart hier viel Zeit.

In der Zusammenarbeit mit einem Design-Team empfiehlt es sich, frühzeitig eine Liste unterstützter Features festzulegen und komplexe Effekte, die Lottie nicht abbilden kann, bewusst zu vermeiden, statt sie erst nach der Integration in der App als Bug zu entdecken.

9. Praxisbeispiel: ein Erfolgs-Checkmark nach Formular-Submit

Ein vollständiges Beispiel verbindet mehrere der zuvor gezeigten Bausteine: Die Animation startet erst nach erfolgreichem Server-Request, spielt einmalig ab und löst über onAnimationFinish die Weiterleitung zum nächsten Screen aus, ohne dass der Nutzer manuell weiterklicken muss.

Dieses Muster, Animation als Bestätigung eines abgeschlossenen Vorgangs statt als reines Dekorationselement, ist einer der häufigsten und zugleich nutzerfreundlichsten Einsatzzwecke von Lottie in produktiven Apps.

function SuccessScreen({ onDone }: { onDone: () => void }) {
  return (
    <LottieView
      source={require('./assets/success-check.json')}
      autoPlay
      loop={false}
      speed={1.2}
      onAnimationFinish={onDone}
      style={{ width: 200, height: 200, alignSelf: 'center' }}
    />
  );
}

10. Zusammenfassung

11. FAQ: Lottie in React Native