Lottie-Viewer
Kostenloser Online-Lottie-Player. Lottie-JSON-Animationen öffnen, abspielen, Frame für Frame scrubben, Tempo ändern, Schleife ein-/ausschalten und auf transparentem Schachbrett prüfen — direkt im Browser.
Was ist eine Lottie-Datei?
Eine Lottie-Datei ist ein JSON-Export einer Vektoranimation, meist erstellt in After Effects mit dem Bodymovin-Plugin oder in Tools wie LottieFiles. Apps und Websites spielen sie mit einem leichten Renderer statt mit Video ab — winzige Dateien, gestochen scharf in jeder Größe.
Wie kann ich hier eine Lottie-Animation ansehen?
Klicken Sie auf die Upload-Fläche oder ziehen Sie Ihre .json-Datei hinein. Die Animation lädt sofort und startet. Mit dem Beispiel-Button testen Sie den Player auch mit einer eingebauten Sample-Animation.
Wird meine Animation auf einen Server hochgeladen?
Nein. Die Datei wird vollständig im Browser-Tab gelesen und gerendert. Nichts wird übertragen — sicher für unveröffentlichte Kundenprojekte und vertrauliche Assets.
Welche Wiedergabesteuerungen gibt es?
Abspielen und Pause, Neustart-Button, Loop-Schalter, ziehbare Frame-Leiste und ein Tempo-Wähler von 0,25x bis 2x. Die Anzeige zeigt aktuellen Frame, Gesamtanzahl und Framerate der Animation.
Warum gibt es einen Schachbrett-Hintergrund?
Das Schachbrett simuliert Transparenz wie in Designtools. Damit prüfen Sie, ob die Animation einen unerwünschten Hintergrund hat; auf Weiß oder Schwarz kontrollieren Sie Kanten, Glühen und Schatten auf hellen bzw. dunklen Flächen.
Welche Lottie-Versionen werden unterstützt?
Der Player nutzt den lottie-web-Renderer, kompatibel mit Bodymovin-JSON ab Version 4: Shape-Layer, Masken, Mattes, Trim Paths und die meisten beim Export eingebackenen Expressions.
Funktioniert das auf dem Handy?
Ja. Das Layout ist responsiv und gerendert wird mit demselben SVG-Renderer — läuft in iOS- und Android-Browsern. Die Bedienelemente sind touchgerecht dimensioniert.
Was ist der Unterschied zwischen .json und .lottie?
Das Format .lottie (dotLottie) ist ein komprimiertes Zip, das den JSON zusammen mit Assets enthalten kann. Dieser Viewer öffnet direkt den Standard-Lottie-.json-Export; bei dotLottie-Dateien entpacken Sie zuerst die darin enthaltene .json.
Warum spielt meine Animation langsam oder sieht falsch aus?
Animationen mit vielen Layern, Bildern oder Expressions sind renderintensiv. Prüfen Sie, ob Bilder nicht separat exportiert wurden, vereinfachen Sie die Komposition oder senken Sie das Tempo — die FPS-Anzeige zeigt die vorgesehene Rate der Animation.
So verwenden Sie Lottie-Viewer
Dieser Lottie-Viewer spielt Bodymovin-JSON-Animationen vollständig in deinem Browser mit dem lottie-web-Renderer ab. Lade eine Datei oder ziehe sie hinein, steuere die Wiedergabe Frame für Frame und prüfe auf transparentem, weißem oder schwarzem Hintergrund — nichts wird hochgeladen.
- Klicke auf den Upload-Bereich oder ziehe eine Lottie-.json-Datei darauf; die Animation lädt und beginnt sofort zu spielen.
- Steuere die Wiedergabe mit der großen Play/Pause-Taste und dem Neustart-Button.
- Ziehe den Frame-Regler, um zu einem beliebigen Frame zu springen; die Anzeige zeigt aktuellen Frame, Gesamtanzahl und FPS.
- Wähle eine Geschwindigkeit zwischen 0,25x und 2x und schalte die Schleife für Dauerwiederholung ein.
- Wechsle den Hintergrund zwischen transparentem Schachbrett, Weiß und Schwarz, um Kanten, Glühen und Schatten zu prüfen.
Drücke zuerst den Beispiel-Button, um zu sehen, wie sich der Player verhält, bevor du deine eigene Animation lädst — praktisch, wenn dir ein Kunde ein JSON schickt und du schnell prüfen willst.
Verwandte Tools
- SVG-Viewer & Editor SVG-Dateien online anzeigen, bearbeiten und optimieren. Echtzeit-Vorschau, Code-Bearbeitung und Optimierungstools.
- JSON-Baumansicht Visualisieren Sie JSON-Daten als interaktiven einklappbaren Baum. Suchen Sie nach Schlüsseln und Werten, verfolgen Sie JSONPath beim Hovern und verarbeiten Sie große Dateien mit Lazy Loading. Drag & Drop von .json-Dateien wird unterstützt.
- Sprite-Sheet-Generator Kombinieren Sie Bilder zu Sprite-Sheets mit Drag-to-Reorder, Rasterlayout, Abstand, Skalierungsmodi. Export als PNG/WebP/JPG mit JSON-Atlas-Daten für Spiel-Engines und CSS.
- Bild zu Base64 Bilder in Base64-Zeichenketten umwandeln und Base64 zurück in Bilder dekodieren. Unterstützt PNG, JPG, GIF, WebP, SVG, BMP, ICO. 100% im Browser, kein Upload.
- GIF Frames Extrahieren Extrahieren und laden Sie einzelne Bilder aus GIF-Animationen als PNG oder Sprite-Sheet herunter. Kostenloses Online-Tool mit Vorschau und ZIP-Export.
- GIF Rückwärts Kehren Sie die Abspielreihenfolge von GIF-Animationen kostenlos online um. Hochladen, Vorschau und sofort herunterladen.
- GIF-Geschwindigkeitsänderer Ändern Sie die GIF-Animationsgeschwindigkeit online. Beschleunigen oder verlangsamen Sie GIF-Dateien sofort.
- Video zu GIF Konvertieren Sie Video online in animierte GIFs. Passen Sie Qualität, Bildrate und Auflösung direkt im Browser an – kein Upload erforderlich.