Was ist eine Lottie?

Eine Lottie ist ein JSON-basiertes Animationsdateiformat, welches es dir ermöglicht, Animationen auf jeder Plattform genau so einfach wie statische Inhalte zu verschicken. Es sind kleine Dateien, die auf jedem Gerät funktionieren und ohne Verpixelung verkleinert oder vergrössert werden können. LottieFiles lässt dich eine Lottie auf die leichteste Weise erstellen, bearbeiten, testen, daran mitwirken und sie verschicken.

Warum Lottie?

Hier sind ein paar Vorteile, die Lottie gegenüber den anderen Animationsdateiformaten hat, die es da draussen gibt.

Kleine Dateigröße

Unendlich skalierbar

Lottie-Animationen sind vektorbasiert, was bedeutet, dass man sie vergrössern und verkleinern kann, ohne sich Sorgen um die Auflösung machen zu müssen.

Multi-Plattform-Unterstützung und Bibliotheken

Für all die Entwickler da draussen: Die Lottie-Implementation ist superleicht. Man kann Lottie-Animationen auf iOS, Android, im Web und auf React Native ohne Modifizierung verwenden.

Interaktivität

Bei Lottie-Animationen sind die Animationselemente exponiert, damit man sie interaktiv nutzen kann, sodass sie auf Interaktionen wie Scrollen, Klicken und Streichen reagieren. Erfahre mehr im Leitfaden zum Thema „Interaktivität“.

Die Welt nutzt Lottie

Lottie wird von mehr als Unternehmen weltweit genutzt und steckt in vielen Werkzeugen, die du täglich benutzt.

A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
Apple Landing Page with Lottie Animation
Apple Logo

Zielseiten

Zielseiten

Zielseiten

Duolingo with Lottie Animation
Duolingo Logo

Bring Freude in digitale Erlebnisse.

Bring Freude in digitale Erlebnisse.

Bring Freude in digitale Erlebnisse.

Telegram Stickers with Lottie Animation
Telegram Logo

Animierte Sticker in Nachrichten.

Animierte Sticker in Nachrichten.

Animierte Sticker in Nachrichten.

Samsung Watch with Lottie Animation
Samsung Logo

System animations for smart watches, TV, and appliances

System animations for smart watches, TV, and appliances

System animations for smart watches, TV, and appliances

Interactive Infographics with Lottie Animation
The Guardian Logo

Interaktive Infografiken

Interaktive Infografiken

Interaktive Infografiken

Product Walkthroughs with Lottie Animation
Google Logo

Produktbeispielsanwendungen

Produktbeispielsanwendungen

Produktbeispielsanwendungen

Bewegung ist die Zukunft von Design

… und LottieFiles machen es einfach.

So legst du mit Lottie los

Werkzeuge und Ressourcen, die dir dabei helfen, mit Lottie loszulegen.

SCHRITT 1

Finde oder erstelle eine Lottie

Finde eine Lottie-Animation

Durchsuche unsere Bibliothek nach direkt benutzbaren, kostenlosen Animationen. Schneide dann eine beliebige Lottie auf deine Marke oder deine Lieblingsfarben zu, indem du das Farbpaletten-Werkzeug oder den Lottie-Editor benutzt.

LottieFiles featured animations page
LottieFiles featured animations page
LottieFiles featured animations page

Oder erstelle eine ganz neue Lottie

Wenn du ein paar Animations-Bruchstücke hast, erstelle eine Lottie mit unseren Adobe-PlugIns. Ansonsten schnapp dir einfach ein SVG und wende mit unserem SVG-zu-Lottie-Konvertierer ein paar Voreinstellungen darauf an.

SCHRITT 2

Benutze deine Lottie

Nutze Lotties in deinem Design, Code und Produktivitätswerkzeugen

Lottie-Bibliotheken für Entwickler

Lottie wird auch bei vielen anderen Werkzeugen von Vornherein unterstützt.

Various company logos
Various company logos

Die Geschichte von Lottie

Die Geschichte von Lottie

Die Geschichte von Lottie

Die Geschichte von Lottie

Stylized pixellated flower
Stylized pixellated flower

2010

Vor Lottie erstellten Bewegungsdesigner ihre Animationen und schickten sie für die Implementierung an Softwareentwickler. Die Optionen für die Implementierung waren begrenzt. Entwickler exportierten Animationen in niedriger Qualität oder versuchten, die Animation von Grund auf als Code zu rekonstruieren. Das war nicht effizient und resultierte oft in suboptimalen Animationen, die weit davon entfernt waren, so auszusehen, wie es der Bewegungsdesigner beabsichtigt hatte.

2015

2015

Hernan Torrisi hatte die Idee, die Repräsentation einer Animation nach Adobe After Effects zu exportieren und die Animation in Laufzeit zu rendern. Er nutzte die Skriptfähigkeiten von After Effects, um ein Animationsprojekt aufzusetzen, und veröffentlichte ein Plugin für After Effects namens Bodymovin, das die Beschreibung einer Animation im JSON-Format exportierte. Außerdem veröffentlichte er den allerersten Renderer für das Format mit einem JavaScript-basierten Player für Browser.

JSON file
JSON file
Pencil with Lottie written out
Pencil with Lottie written out

2017

Die Ingenieure Brandon Withrow, Gabriel Peal und Leland Richardson bei Airbnb erkannten das Potenzial der JSON-basierten Animationen und die dadurch gelösten Probleme. Sie schlossen sich mit dem Chefanimateur Salih Abdul-Karim von Airbnb zusammen, um Bibliotheken bei iOS und Android zu erstellen, die diese JSON-Animationsdateien rendern konnten, die sie “Lottie” nannten.

Rocketship with LottieFiles logo
Rocketship with LottieFiles logo

LottieFiles war geboren!

LottieFiles war geboren und bot Animateuren und Entwicklern einen Ort, wo sie ihre Animationen sofort testen, teilen und im Web zeigen konnten.

2018

2018

Microsoft und die .Net-Stiftung veröffentlichten eine Bibliothek, um Lottie auf Windows zu rendern.

Window with flowerpot
Window with flowerpot
Hamster wheel with a Qt file running on it
Hamster wheel with a Qt file running on it

2019

Qt fügte den Kundendienst für Lottie hinzu, indem sie ein QML API zum Rendern von Lottie hinzufügten. Samsung veröffentlichte rLottie, einen plattformunabhängigen C++-basierten Renderer für Lottie und fügte den Lottie-Kundendienst in Tizen hinzu.

2020

2020

dotLottie wurde erschaffen. dotLottie ist ein Open-Source-Dateiformat, das eine oder mehrere Lottie-Animationen und deren zugehörige Ressourcen in einer einzigen Datei zusammenfasst. Dies wird die nächste Generation von Lottie für die Zukunft der Animation werden.

Lottie illustration
Lottie illustration

FAQ

FAQ

Was ist eine Lottie-Animation?

Eine Lottie ist ein JSON-basiertes Animationsdateiformat, welches es dir ermöglicht, Animationen auf jeder Plattform genau so einfach wie statische Inhalte zu verschicken. Es sind kleine Dateien, die auf jedem Gerät funktionieren und ohne Verpixelung verkleinert oder vergrössert werden können.

Ist Lottie besser als SVG?

Ist Lottie besser als GIF?

Wie nutzt man Lottie?

Wie erstellt man eine Lottie?

Warum sollte ich Lottie verwenden?

Wer kann LottieFiles nutzen?

Wo kann ich mehr über Lottie-Animationen erfahren?

Wie bearbeite ich Lottie-Animationen?

Bewegung ist die Zukunft von Design

Bewegung ist die Zukunft von Design

… und LottieFiles machen es einfach.

… und LottieFiles machen es einfach.

Zielseiten

Bring Freude in digitale Erlebnisse.

Animierte Sticker in Nachrichten.

System animations for smart watches, TV, and appliances

Triff dich mit anderen Lottie-Erstellern, Designern und Entwicklern

Produktbeispielsanwendungen

Erschaffe. Kollaboriere. Versende.

Lass Bewegung Teil jedes deiner Designs sein. Lass deiner Vorstellungskraft freien Lauf und hauche deinen Designs Leben ein.

Erschaffe. Kollaboriere. Versende.

Lass Bewegung Teil jedes deiner Designs sein. Lass deiner Vorstellungskraft freien Lauf und hauche deinen Designs Leben ein.

Erschaffe. Kollaboriere. Versende.

Lass Bewegung Teil jedes deiner Designs sein. Lass deiner Vorstellungskraft freien Lauf und hauche deinen Designs Leben ein.

Erschaffe. Kollaboriere. Versende.

Lass Bewegung Teil jedes deiner Designs sein. Lass deiner Vorstellungskraft freien Lauf und hauche deinen Designs Leben ein.