News

Quelloffene Animationsbibliothek von Airbnb bringt Bewegung in eure Apps

(Grafik: Airbnb)

Mit Airbnbs Lottie-Bibliothek könnt ihr Animationsdaten von After Effects in eure Android- und iOS-Apps bringen. Wir werfen einen Blick auf die Open-Source-Library.

Airbnb veröffentlicht Animationsbibliothek unter Open-Source-Lizenz

Mit Animationen lässt sich Leben in eine App bringen. Allerdings ist es auch heute zumeist noch viel Arbeit, die Animation eines Designers umständlich nachzubauen. Mit Squall und Keyframe von Facebook gibt es zwar bereits zwei gute Lösungen, um Animationsdaten aus Adobes After Effect in eine App zu übertragen, beide Werkzeuge haben jedoch gewisse Nachteile. So unterstützt Squall nur iOS als Zielplattform, und Keyframes wiederum funktioniert nur mit einer ausgewählten Anzahl an After-Effects-Funktionen.

Lottie von Airbnb: Die Open-Source-Bibliothek bringt After-Effects-Animationen in eure Apps. (Grafik: Airbnb)

Diese Limitierungen haben auch die Entwickler bei Airbnb gestört. Daher haben sie jetzt mit Lottie eine eigene Animationsbibliothek vorgestellt, die After-Effects-Animationsdaten in eure Apps bringen soll. Die Daten dazu könnt ihr über das Open-Source-Plugin Bodymovin im JSON-Format aus After Effects exportieren. Als Zielplattformen werden iOS, Android und React-Native-Apps unterstützt.

Airbnb: Das sind die wichtigsten Features von Lottie

Lottie rendert eure Animationen in Echtzeit. Praktischerweise können die JSON-Animationsdaten aus dem Netzwerk geladen werden. So lassen sich verschiedene Varianten leicht in Form von A/B-Tests ausprobieren. Außerdem können Lottie-Animationen durch Nutzergesten beeinflusst werden.

Airbnb hat ein paar Beispielanimationen für Lottie gestalten lassen. (Grafik: Airbnb)

Airbnb hat den Quellcode von Lottie für iOS, Android und React-Native unter der Apache-Lizenz auf Github veröffentlicht. Der Community-Marktplatz hofft, Animatoren und Entwickler gleichermaßen von dem Projekt überzeugen zu können. Um die Fähigkeiten der Software zu demonstrieren, hat Airbnb auch gleich eine Reihe von Beispielanimationen in Auftrag gegeben und der Bibliothek beigelegt.

Ebenfalls interessant:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

2 Kommentare
Mike

Gibt’s die Möglichkeit diese Bibliothek auch irgendwie auf einer normalen Website zu nutzen?

Antworten
Karl Marks
Karl Marks

Bisher scheinbar nicht.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung