Lottie-visare
Gratis Lottie-spelare online. Öppna valfri Lottie-JSON-animation, spela upp, scrubba bildruta för bildruta, ändra hastighet, slå på loop och förhandsgranska på transparent rutigt underlag — helt i webbläsaren.
Vad är en Lottie-fil?
En Lottie-fil är en JSON-export av en vektoranimation, vanligtvis skapad i After Effects med Bodymovin-pluginet eller i verktyg som LottieFiles. Appar och webbsidor spelar upp den med en lätt renderare istället för video: filen är minimal och kvaliteten perfekt i alla storlekar.
Hur förhandsgranskar jag en Lottie-animation här?
Klicka på uppladdningsytan eller dra din .json-fil dit. Animationen laddas direkt och börjar spela. Med exempelknappen testar du spelaren med en inbyggd provanimation.
Laddas min animation upp till en server?
Nej. Filen läses och renderas helt i webbläsarfliken. Ingenting skickas någonstans, vilket gör den säker för opublicerat kundarbete och konfidentiellt material.
Vilka uppspelningskontroller finns?
Spela och pausa, omstartsknapp, loop av/på, en dragbar bildrutereglande och hastighetsval från 0,25x till 2x. Utläsningen visar aktuell bildruta, totalantal och animationens bildfrekvens.
Varför finns ett rutigt underlag?
Rutnätet simulerar transparens, precis som i designverktyg. Använd det för att se att animationen inte har någon oönskad bakgrund; växla till vitt eller svart för att kontrollera kanter, glöd och skuggor på ljusa respektive mörka ytor.
Vilka Lottie-versioner stöds?
Spelaren använder lottie-web-renderaren, som stödjer Bodymovin-JSON från version 4: shape-lager, masker, mattes, trim paths och de flesta uttryck som bakats in vid export.
Fungerar det på mobil?
Ja. Layouten är responsiv och renderingen sker med samma SVG-motor, så det fungerar i iOS- och Android-webbläsare. Kontrollerna är anpassade för pekskärm.
Vad är skillnaden mellan .json och .lottie?
Formatet .lottie (dotLottie) är ett komprimerat zip-arkiv som kan innehålla JSON tillsammans med resurser. Denna visare öppnar direkt standardexporten Lottie .json; för dotLottie-filer, packa upp den inre .json-filen först.
Varför spelas min animation långsamt eller felaktigt?
Animationer med många lager, bilder eller uttryck är krävande att rendera. Kontrollera att bilderna inte exporterats separat, förenkla kompositionen eller sänk hastigheten — FPS-utläsningen visar animationens avsedda frekvens.
Hur man använder Lottie-visare
Denna Lottie-visare spelar Bodymovin-JSON-animationer helt i din webbläsare med lottie-web-renderaren. Ladda en fil eller dra in den, styr uppspelningen bildruta för bildruta och förhandsgranska på transparent, vit eller svart bakgrund — inget laddas upp någonstans.
- Klicka på uppladdningsytan eller dra en Lottie-.json-fil dit; animationen laddas och börjar spela direkt.
- Styr uppspelningen med den stora start/paus-knappen och omstartsknappen.
- Dra bildrutereglaget för att hoppa till valfri bildruta; visningen visar aktuell bildruta, totalt antal och FPS.
- Välj en hastighet mellan 0,25x och 2x och slå på loopknappen för upprepad uppspelning.
- Växla bakgrunden mellan transparent rutigt, vitt och svart för att granska kanter, glöd och skuggor.
Tryck först på exempelknappen för att se hur spelaren beter sig innan du laddar din egen animation — smidigt när en kund skickar en JSON och du snabbt vill kontrollera.
Relaterade verktyg
- SVG-visare och Redigerare Förhandsgranska, redigera och optimera SVG-filer online. Realtidsförhandsgranskning, kodredigering och optimeringsverktyg.
- JSON-trädvisare Visualisera JSON-data som ett interaktivt fällbart träd. Sök nycklar och värden, spåra JSONPath vid hover och hantera stora filer med lazy loading. Stöder dra och släpp av .json-filer.
- Sprite Sheet Generator Kombinera bilder till sprite sheet med dra-för-att-ordna-om, rutnätslayout, padding, skalningslägen. Exportera PNG/WebP/JPG med JSON-atlasdata för spelmotorer och CSS.
- Bild till Base64 Konvertera bilder till Base64-strängar och avkoda Base64 tillbaka till bilder. Stöder PNG, JPG, GIF, WebP, SVG, BMP, ICO. 100% i webbläsaren, ingen uppladdning.
- GIF Dela Bildrutor Extrahera och ladda ner enskilda bildrutor från GIF-animationer som PNG eller sprite-sheet. Gratis onlineverktyg med förhandsgranskning och ZIP-export.
- GIF Baklänges Vänd uppspelningsordningen för GIF-animationer gratis online. Ladda upp, förhandsgranska och ladda ner direkt.
- GIF Hastighetsändrare Ändra GIF-animeringshastighet online. Snabba upp eller sakta ner GIF-filer omedelbart.
- Video till GIF Konvertera video till animerad GIF online. Justera kvalitet, bildhastighet och upplösning direkt i webbläsaren utan uppladdning.