Lottie-katselin
Ilmainen Lottie-soitin verkossa. Avaa mikä tahans Lottie-JSON-animaatio, toista, selaa ruutu ruudulta, vaihda nopeutta, kytke silmukka päälle ja esikatsele läpinäkyvällä ruututaustalla — kokonaan selaimessa.
Mikä on Lottie-tiedosto?
Lottie-tiedosto on vektorianimaation JSON-vienti, joka tehdään yleensä After Effectsissä Bodymovin-lisäosalla tai työkaluilla kuten LottieFiles. Sovellukset ja verkkosivut toistavat sen kevyellä renderöijällä videon sijaan: tiedosto on pieni ja laatu täydellinen kaikissa koissa.
Miten katselen Lottie-animaation tässä?
Napsauta latausaluetta tai vedä .json-tiedostosi siihen. Animaatio latautuu heti ja alkaa toistua. Esimerkkipainikkeella voit kokeilla soitinta sisäänrakennetulla näytteellä.
Ladataanko animaationi palvelimelle?
Ei. Tiedosto luetaan ja renderöidään kokonaan selaimen välilehdessä. Mitään ei lähetetä mihinkään, joten se on turvallinen myös julkaisemattomaan asiakastyöhön ja luottamukselliseen aineistoon.
Mitä toisto-ohjauksia on saatavilla?
Toista ja keskeytä, uudelleenkäynnistyspainike, silmukka päälle/pois, vedettävä ruutualiukusäädin ja nopeusvalinta 0,25x–2x. Näytössä ovat nykyinen ruutu, kokonaismäärä ja animaation kuvataajuus.
Miksi taustalla on ruutukuvio?
Ruutukuvio esittää läpinäkyvyyttä aivan kuten suunnittelutyökaluissa. Sillä varmistat, ettei animaatiossa ole ei-toivottua taustaa; vaihda valkoiseen tai mustaan tarkistaaksesi reunat, hehkut ja varjot vaaleilla tai tummilla pinnoilla.
Mitkä Lottie-versiot ovat tuettuja?
Soitin käyttää lottie-web-renderöijää, joka tukee Bodymovin-JSONia versiosta 4 alkaen: muototasot, maskit, mattet, trim pathit ja useimmat viennissä sisäänrakennetut lausekkeet.
Toimiiko se mobiilissa?
Kyllä. Asettelu on responsiivinen ja renderöinti tapahtuu samalla SVG-moottorilla, joten se toimii iOS- ja Android-selaimissa. Ohjaimet on mitoitettu kosketukselle.
Miten .json ja .lottie eroavat?
.lottie (dotLottie) on pakattu zip, joka voi sisältää JSONin lisäksi resursseja. Tämä katselin avaa suoraan vakiomuotoisen Lottie .json-viennin; dotLottie-tiedostoista pura ensin sisällä oleva .json.
Miksi animaationi on hidas tai näyttää väärältä?
Monitasoiset, kuvapitoiset tai lausekkeita sisältävät animaatiot ovat raskaita renderöidä. Tarkista, ettei kuvia viety erikseen, yksinkertaista kompositiota tai laske nopeutta — FPS-näyttö kertoo animaation suunnitellun taajuuden.
Näin käytät työkalua Lottie-katselin
Tämä Lottie-katselin toistaa Bodymovin-JSON-animaatiot kokonaan selaimessasi lottie-web-renderöijällä. Lataa tiedosto tai raahaa se sisään, hallitse toistoa ruutu ruudulta ja esikatsele läpinäkyvällä, valkoisella tai mustalla taustalla — mitään ei lähetetä verkkoon.
- Napsauta latausaluetta tai raahaa Lottie-.json-tiedosto sen päälle; animaatio latautuu ja alkaa toistua heti.
- Hallitse toistoa suurella toista/keskeytä-painikkeella ja aloita alusta -painikkeella.
- Raahaa ruutuvalitsinta siirtyäksesi mihin tahansa ruutuun; näyttö kertoo nykyisen ruudun, kokonaismäärän ja FPS-arvon.
- Valitse nopeus väliltä 0,25x–2x ja kytke silmukkapainike jatkuvaan uudelleentoistoon.
- Vaihda tausta läpinäkyvän ruudukon, valkoisen ja mustan välillä tarkastellaksesi reunoja, hehkua ja varjoja.
Paina ensin esimerkkipainiketta nähdäksesi, miten soitin toimii, ennen kuin lataat oman animaatiosi — kätevää silloin, kun asiakas lähettää JSON-tiedoston ja tarvitset nopean tarkistuksen.
Aiheeseen liittyvät työkalut
- SVG-katselin ja Editori Esikatsele, muokkaa ja optimoi SVG-tiedostoja verkossa. Reaaliaikainen esikatselu, koodin muokkaus ja optimointityökalut.
- JSON-puun katselin Visualisoi JSON-tiedot interaktiivisena pienennettävänä puuna. Hae avaimia ja arvoja, seuraa JSONPathia hoveroitaessa ja käsittele suuria tiedostoja laiskalla latauksella. Tukee .json-tiedostojen raahausta ja pudotusta.
- Sprite Sheet Generaattori Yhdistä kuvat sprite sheetiksi vedä-järjestä-toisin, ruudukkoasettelu, täyte, skaalaustilat. Vie PNG/WebP/JPG JSON-atlas-tietojen kanssa pelimoottoreille ja CSS:lle.
- Kuva Base64 Muunna kuvat Base64-merkkijonoiksi ja pura Base64 takaisin kuviksi. Tukee PNG, JPG, GIF, WebP, SVG, BMP, ICO -muotoja. 100% selaimessa, ei latausta.
- GIF Jaa Kehykset Pura ja lataa yksittäisiä kehyksiä GIF-animaatioista PNG:nä tai sprite-sheetinä. Ilmainen online-työkalu esikatselulla ja ZIP-viennillä.
- GIF Käänteinen Käännä GIF-animaatioiden toistojärjestys ilmaiseksi verkossa. Lataa, esikatsele ja lataa heti.
- GIF Nopeuden Vaihtaja Vaihda GIF-animaation nopeutta verkossa. Kiihdytä tai hidasta GIF-tiedostoja välittömästi.
- Video GIF:ksi Muunna video animoiduksi GIF:ksi verkossa. Säädä laatua, kehysnopeutta ja resoluutiota suoraan selaimessasi ilman latausta.