Blog - Daily Business
Who the f***is "Lottie"?
Die Ära der Lottie-Animationen.
„Lottie“ ist keine neue Mitarbeiter:in und auch nicht unser Agenturhund 😜
Lottie kommt vielmehr zum Einsatz, wenn es darum geht, schicke Animationen für unsere Anwendungen zu erstellen. Denn Lottie-Animationen sind JSON-basierte Dateien, die eine effizientere und flexibel einsetzbare Alternative zu herkömmlichen Animationen in Formaten wie GIF oder Video darstellen.
Sie ermöglichen gestochen scharfe, skalierbare Animationen bei geringer Dateigröße und hoher Performance – das lässt nicht nur die Herzen unserer Entwickler:innen höher schlagen, sondern auch die unserer Digital Designer:innen.
Warum wirLottie(s) lieben.
Lottie-Animationen sind JSON-basierte Dateien im Vektorformat und eine effizientere und flexiblere Alternative zu herkömmlichen Pixelformaten wie GIFs und Bildsequenzen.
Kleine Dateigröße
Lottie-Animationen sind 6 x kleiner als GIFs und und haben eine 5 x schnellere Seitenladegeschwindigkeit.
Multi-Plattform-Unterstützung
Man kann Lottie-Animationen unter anderem für iOS, Android und im Web ohne Modifizierung verwenden.
Interaktive Nutzung
Animationselemente sind bei Lottie-Animationen exponiert, damit man sie interaktiv nutzen kann, sodass sie auf Interaktionen wie Scrollen, Klicken und Streichen reagieren.
Unendlich Skalierbar
Lottie-Animationen sind vektorbasiert. Man kann sie deshalb vergrößern und verkleinern, ohne sich Sorgen um die Auflösung machen zu müssen.
Referenz: Design Barn Inc. (2024), www.lottiefiles.com/de/what-is-lottie
Was Lottie bei uns so macht.
Die Plattform „LottieFiles“ bietet eine benutzerfreundliche Umgebung, in der Designer:innen und Entwickler:innen nahtlos zusammenarbeiten können. Designer:innen können ihre Animationen in Programmen wie beispielsweise Adobe After Effects erstellen und mit Hilfe eines speziellen Plugins in das Lottie-Format exportieren. Entwickler:innen können diese Animationen anschließend direkt in ihre Projekte integrieren, was den Prozess erheblich vereinfacht. Sozusagen eine echte Win-win-Situation!
Designer:in meets Lottie.
Hier bei mutor machen den Anfang unsere Designer:innen in Adobe XD mit einem vereinfachten Designentwurf der geplanten Animation. Von dort erfolgt der Export nach Adobe After Effects, wo die Animation ausgearbeitet und verfeinert wird. Ist die Animation ready, kommt sie retour in den Design Prototypen von Adobe XD und kann unseren Kund:innen zur Freigabe vorgelegt werden.
Entwickler:in meets Lottie.
Ist die gewünschte Animation fertig und von unseren Kund:innen freigegeben, wird die Animation in ein kompaktes JSON-Format konvertiert und mit Hilfe eines Lottie-Players in die gewünschte Anwendung eingebunden.
Diese JSON-Datei enthält alle notwendigen Informationen in einer strukturierten textuellen Form; darunter Elemente, Keyframes und Interaktionsmöglichkeiten. Mit Hilfe von Lottie-Player-Bibliotheken kann dieses JSON von Clients, Frontends oder Apps wieder in eine visuelle Darstellung übersetzt werden. Die Player-Bibliothek rendert die JSON-Beschreibung entweder auf einem HTML-Canvas oder als SVG.
Das Rendering als SVG eröffnet zusätzliche Gestaltungsmöglichkeiten im Web. Einzelne Elemente der Animation können durch JavaScript und CSS im DOM weiter angepasst und mit zusätzlichen Funktionen versehen werden. In unserer Agentur haben wir eine Methode entwickelt, bei der durch die Benennung der Layer in Adobe After Effects erweiterte Interaktionsmöglichkeiten geschaffen werden.
So können beispielsweise Tooltips oder Labels, die automatisch gemäß der User-Sprache übersetzt werden, eingefügt werden. Der große Vorteil dieses Ansatzes liegt darin, dass lediglich eine Animation für verschiedene Sprachen erforderlich ist.