LottieFiles loi nopean, skaalautuvan, jälkirenderöidyn muokattavan tiedostotyypin, ja sinun on helppo osallistua ja luoda animaatioita tässä muodossa. Adobe After Effectsillä ja joidenkin lisäosien avulla voit olla osa uusinta tiedostotyyppihypeä: Lottie.
Mikä on Lottie?
Lottie tai dotLottie on tiedostotyyppi, joka valtaa verkkokehittäjät. Olet ehkä tehnyt animaatioita sisällytettäväksi suunnitelmiisi, olivatpa ne sitten sosiaalista mediaa, web-suunnittelua tai UX- ja käyttöliittymäsuunnittelua varten. Ja todennäköisesti tallennat animaatiosi GIF-, SVG- tai PNG-tiedostoina. Lottie-tiedosto on kaikki näiden tiedostotyyppien hyvät osat, mutta pienempi, nopeampi ja helpompi muokata renderöinnin jälkeen.
LottieFiles on valtava tietokanta valmiista animaatioista, jotka on tallennettu Lottie- tai JSON-muotoon. Nämä animaatiot renderöidään reaaliajassa, mikä mahdollistaa nopeamman toimituksen suunnitelmiisi. Näiden tiedostojen lataamista ei tarvitse odottaa. ne tulevat näkyviin heti, kun sivu avautuu.
Jos haluat lisätietoja LottieFilesista, tutustu meidän johdatus Lottiin.
Päästä alkuun
Aiomme luoda Lottien käyttämällä Adobe After Effects, mutta on olemassa muitakin ohjelmia, joiden avulla voit luoda Lottie-animaatiosi. Voit luoda Lottien käyttämällä Adobe Animatea LottieFiles-laajennuksen kanssa. Voit myös muuntaa SVG-muotoisen animaation Lottieksi, jos olet jo tehnyt animaation tässä muodossa.
After Effects on kuitenkin paras valintamme, koska LottieFiles luotiin alun perin käytettäväksi After Effectsissä. Aloitetaan.
1. Luo oma animaatiosi
Lottien animaatio on sama kuin missä tahansa muussa muodossa. Teimme animaatiomme kuvituksen Adobe Illustratorilla. Tämä pitää tasot erillään ja valmiina tuotavaksi After Effectsiin. Kun kuvasi on tuotu, voit muokata sävellyksesi tasoja lopullista animaatiota varten.
Lottie-animaatiot toimivat jatkuvana silmukana, joten harkitse sitä suunnittelusi loppu- ja aloituspisteissä. Animaation tulee olla yksinkertainen ja noin kolme sekuntia pitkä.
2. Lataa laajennukset
Voit käyttää Lottie-tiedoston luomiseen kahta lisäosaa: LottieFiles- tai Bodymovin-laajennusta. Molemmat ovat saatavilla After Effectsille, mutta LottieFiles-laajennus löytyy myös muista ohjelmistoista. Jokainen heistä tekee hieman erilaisia asioita, mutta keskitymme nyt LottieFiles-laajennukseen.
Lataa LottieFiles-laajennus siirtymällä kohtaan LottieFiles After Effects -laajennussivu. Löydät kaksi latausvaihtoehtoa.
Oikealla oleva vaihtoehto edellyttää Laajennuspäällikkö Anastasiylta joka toimii sekä Macin että Windowsin kanssa. Kun olet ladannut Extension Managerin, lataa ZXP-laajennus LottieFiles-sivulta.
Kun ZXP-laajennus on ladattu, avaa Anastasiy Extension Manager ja napsauta Jälkivaikutukset, valitse luettelosta LottieFiles-laajennus ja paina Asentaa.
Palaa LottieFiles-laajennussivulle, lataa myös Adobe Exchange -laajennus; avaa Creative Cloud -työpöytäsovellus ja asenna laajennus. Palaa valmiiseen animaatio After Effectsissä.
Joillakin ihmisillä on lupavirhe käytettäessä näitä laajennuksia. Voit välttää tämän ongelman siirtymällä osoitteeseen Jälkivaikutukset > Asetukset > Käsikirjoitus ja ilmaisut > Sovelluksen komentosarjat ja rastita ruutuun Salli komentosarjojen kirjoittaa tiedostoja ja käyttää verkkoa.
Kun tämä on tehty, LottieFilesin ponnahdusikkuna pyytää sinua kirjautumaan sisään. Jos sinulla ei vielä ole LottieFiles-tiliä, nyt on aika luoda sellainen.
3. Vie Lottiesi
Kun LottieFiles-laajennukset on asennettu, voit renderöidä Lottie-animaatiosi. Napsauta valmiissa animaatiokoostumuksessasi Ikkuna > Laajennukset > LottieFiles. Tämä tuo esiin ponnahdusikkunan, jossa on sävellyksiäsi nimet. Klikkaa vihreä nuoli sävellyksesi nimen vieressä tämä tuo esiin Lottie-renderöintiikkunan.
Muutaman sekunnin kuluttua animaatiosi tulee näkyviin ponnahdusikkunaan. Animaatio toistetaan reaaliajassa silmukassa. Täällä voit tallentaa animaatiosi tai ladata animaatiosi LottieFiles-kirjastoon.
Napsauttamalla Tallenna nimellä antaa sinulle kaksi vientivaihtoehtoa: Lottie JSON (*.json) tai dotLottie (*.lottie). DotLottie-tiedosto on zip-tiedosto, joka sisältää metatietoja, joita emme todellakaan tarvitse vientiin. Menimme Lottie JSONin kanssa.
Viemäsi tiedosto on tekstitiedosto, ei visuaalinen animaatiotiedosto. näin JSON-tiedostot toimivat. Mutta entä jos haluat animaation olevan valmis? Katsotaan kuinka pääset siihen käsiksi.
Kuinka voit käyttää Lottie-animaatiotasi
Lataa Lottie LottieFiles-kirjastoon napsauttamalla Lataa. Tämä näkyy muutaman sekunnin ajan. Napsauta sitten painiketta, jossa on maapallo. Tämä avaa LottieFiles-verkkosivuston, jossa voit lähettää Lottie-animaatiosi LottieFiles-kirjastoon. Nimeä tiedosto ja paina Handoff.
Kun animaatiosi on hyväksytty LottieFiles-kirjastoon, voit käyttää LottieFiles-laajennusta ohjelmistoissa, kuten Adobe XD, Figma tai Sketch, lähettääksesi animaatiosi suunnitteluusi.
On muitakin tapoja käyttää LottieFiles-animaatiota, paitsi suoraan laajennuskirjastossa. Voit muokata Lottie-animaatiotasi edelleen selaimen ikkunasta. Se tarjoaa peruskerrospaneelin; voit muuttaa taustaväriä, toistonopeutta, kehysnopeutta ja muutamia muita asioita.
Handoff-ikkunasta voit ladata animaatiosi a JSON-tiedosto verkkokehityksen käyttöönottamiseksi ja suunnitteluun tai voit muuntaa sen GIF-muotoon tavanomaisempaan käyttöön. Voit myös upottaa animaatiosi HTML-upotuskoodilla, ja käytettävissä on myös iOS- ja Android-vaihtoehtoja, joten voit lähettää animaation verkkosuunnitteluun.
Upottamalla Lottie HTML -koodin voit muokata koodia animaatiosi muokkaamiseksi. Voit muuttaa värejä ja kokoja suoraan koodissa, kun lisäät sen verkkosivustollesi.
Lataamalla LottieFiles-sovelluksen puhelimeesi voit skannata animaation QR-koodin esikatsellaksesi animaatiota sovelluksessa. Voit myös käyttää LottieFiles-näppäimistöä ja pudottaa dotLottie-tietosi kommentiksi tiettyihin viesteihin.
Luo Lottie After Effectsissä
Vaikka se saattaa silti tuntua epätavanomaiselta tiedostotyypiltä, koska et voi vain ladata animaatiotasi suoraan sosiaaliseen mediaan, kuten voit GIF- tai PNG-muodossa, Lottie tarjoaa monia etuja verkkokehittäjille ja suunnittelijoille, jotka käyttävät laajennuksia tai upottavat koodeja mallit.
Lottie- ja JSON-tiedostot säästävät tilaa ja latausaikaa sekä säilyttävät laadun perinteisiin tiedostotyyppeihin verrattuna. LottieFiles luo jatkuvasti uusia tapoja toteuttaa malleja, mahdollisuudet ovat rajattomat.
Liikeanimaatioiden luominen Procreatessa on helppoa, ja tämä artikkeli näyttää, kuinka se tehdään.
Lue Seuraava
- Luova
- Tietokoneanimaatio
- Adobe
- Tiedoston muuntaminen
Ruby on kirjailija MUO: n luovassa kategoriassa ja keskittyy suunnitteluohjelmistoista kirjoittamiseen. Suunnittelijana, kuvittajana ja valokuvaajana työskennellyllä Rubylla on myös BA-tutkinto graafisesta viestinnästä ja englannin maisterin tutkinto luovasta kirjoittamisesta.
tilaa uutiskirjeemme
Liity uutiskirjeemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e-kirjoja ja eksklusiivisia tarjouksia!
Klikkaa tästä tilataksesi
