Lottie
Web-Animation
Lottie ist eine Open-Source-Bibliothek, die von Airbnb entwickelt wurde und die Integration von hochwertigen Animationen in mobile und Web-Anwendungen erleichtert. Sie ermöglicht die Verwendung von animierten Vektorgrafiken im JSON-Format, die plattformübergreifend und ressourcenschonend sind. Die Vorteile von Lottie umfassen eine verbesserte Benutzererfahrung durch ansprechende Animationen, einfachere Erstellung und Anpassung von Animationen sowie eine verbesserte Leistung im Vergleich zu herkömmlichen Animationsformaten.
Lottie im Einsatz bei TYPONiels
Es wurden keine weiteren Informationen zum Einsatz von Lottie bei TYPONiels hinterlegt.
Was ist Lottie?
Lottie ist ein JSON-basiertes Animationsformat und eine Bibliothek, die Adobe After Effects-Animationen als leichtgewichtige JSON-Dateien auf Web, iOS, Android und React Native rendert. Entwickelt von Airbnb und 2017 Open Source veröffentlicht, revolutionierte Lottie die Integration von hochwertigen Animationen in digitale Produkte: Statt GIFs oder Videos (mit hohem Dateivolumen) liefern Lottie-Animationen vektorbasierte, skalierbare Bewegtgrafiken bei einem Bruchteil der Dateigröße.
Workflow: After Effects zu Lottie
Der Workflow beginnt in Adobe After Effects: Animatoren erstellen Animationen und exportieren sie mit dem Bodymovin-Plugin als JSON-Datei. Diese JSON-Datei wird dann mit der Lottie-Bibliothek (lottie-web, lottie-react, lottie-android, lottie-ios) gerendert. LottieFiles.com bietet eine riesige Bibliothek vorgefertigter Animationen sowie einen Online-Editor für Anpassungen. Der LottieFiles-Editor ermöglicht auch Änderungen ohne After Effects.
Performance und Plattformunterstützung
Lottie-Animationen werden nativ auf dem Device gerendert – kein Video-Dekoding, keine GIF-Palette-Limitation. Vektorbasiert bedeutet: scharf auf jedem Display, egal welche Auflösung. Interaktive Lottie-Animationen können per JavaScript gesteuert werden: play, pause, setSpeed, setDirection und frame-genaues Scrubbing. Für React gibt es lottie-react, für Vue lottie-vue, für Angular ngx-lottie als spezialisierte Wrapper.
Lottie im Produktdesign-Workflow
Lottie wird heute für Onboarding-Animationen, Lade-Indikatoren, Button-Feedback, Leerzustands-Illustrationen und App-Illustrationen eingesetzt. Die Kombination aus Design-Tool-Export, kleiner Dateigröße und plattformübergreifendem Rendering hat Lottie zum Standard für produktionsreife UI-Animationen gemacht. Für Product-Designer und Frontend-Entwickler, die hochwertige Bewegtgrafiken ohne Performance-Kompromisse integrieren wollen, ist Lottie das bevorzugte Format.
Die Heimat von ... Lottie
Informationen zu Lottie lassen sich doch am Besten an offizieller Stelle finden.
airbnb.designMeine Links zu Lottie
Einige lesenswerte Ressourcen, die mir bei beim Einsatz von Lottie geholfen haben.