Lottie ist ein vektorbasiertes Grafikformat, das auf SVG und JSON basiert. Es wurde entwickelt, um das Einfügen von Animationen in Webseiten zu erleichtern. Die erstellten Dateien werden auch LottieFiles genannt, um sie von den verwendeten Programmbibliotheken gleichen Namens abzugrenzen.

Die herkömmliche Herangehensweise zur Nutzung von animierten Grafiken auf Webseiten erfordert meist das Erstellen pixelbasierter Videodateien. Dabei geht der Vorteil der beliebigen Skalierbarkeit von Vektordaten verloren. Zudem sind viele Videocodecs auf Realbilder optimiert und können (vor allem bei niedrigen Bitraten) bei der Komprimierung von Grafiken störende Komprimierungsartefakte erzeugen.

Zwar bietet auch das SVG-Format selbst bereits die Möglichkeit für Animationen, jedoch werden diese von vielen Browsern nicht oder nur teilweise unterstützt.[1] Um diese Probleme zu umgehen, entwickelten Mitarbeiter von Airbnb das Lottie-Format. Es handelt sich dabei um JSON-Daten, welche auch mit einem reinen Texteditor erstellt werden könnten. Da es sich um Vektordaten handelt, benötigen sie meist deutlich weniger Speicherplatz als vergleichbare Grafikanimationen in pixelbasierten Videoformaten.[2]

Es existieren mehrere Editoren und Plug-ins, die das Erstellen und Bearbeiten von LottieFiles in einer grafischen Oberfläche ermöglichen. Zudem ist ein Plug-in für Adobe After Effects verfügbar, durch das Animationen direkt in das Lottie-Format exportiert werden können.[3] Auf den Webseiten selbst ist ebenfalls ein Plug-in notwendig, das meist in Form einer JavaScript-Bibliothek eingebunden wird. Für viele CMS, wie beispielsweise WordPress, existieren bereits vorkonfigurierte Lösungen.

Geschichte Bearbeiten

Im Jahr 2015 beschrieb der Web-Entwickler Hernan Torrisi die Idee, Grafikanimationen von Adobe AfterEffects nicht auf Erzeugerseite pixelbasiert zu rendern, sondern stattdessen nur eine skriptbasierte Beschreibung der Animation zu exportieren. Das eigentliche Rendern sollte seiner Idee nach erst auf dem Gerät des Betrachters geschehen. Er programmierte ein erstes Plugin mit dem Titel Bodymovin und entschied sich für das JSON-Datenformat. Dazu programmierte er ebenfalls einen JavaScript-basierten Player für den Webbrowser. 2017 wurden die Airbnb-Entwickler Brandon Withrow, Gabriel Peal und Leland Richardson darauf aufmerksam und sagten ihre Unterstützung zu. Daraufhin entstanden Bibliotheken für Android und iOS. Zur gleichen Zeit wurde der Name Lottie geprägt. Er verweist auf Lotte Reiniger, eine deutsche Silhouetten-Animationsfilmerin, welche 1926 den ersten heute noch erhaltenen abendfüllenden Trickfilm schuf.[4]

Weblinks Bearbeiten

Einzelnachweise Bearbeiten

  1. Informationen zu SVG-Animationen Abgerufen am 29. April 2021.
  2. Projektseite von Airbnb Abgerufen am 29. April 2021.
  3. Blogeintrag von Simea Merki Abgerufen am 29. April 2021.
  4. Offizielle Webseite Abgerufen am 29. April 2021.