LottieFiles je ustvaril hitro, razširljivo, naknadno upodobljeno vrsto datoteke, ki jo je mogoče urejati, in enostavno se lahko vključite in ustvarite animacije v tej obliki. Z uporabo Adobe After Effects in nekaterih vtičnikov ste lahko del najnovejše vrste datotek: Lottie.
Kaj je Lottie?
Lottie ali dotLottie je vrsta datoteke, ki prevzame spletne razvijalce. Morda ste naredili animacije, ki jih želite vključiti v svoje modele, pa naj bodo za družbene medije, spletno oblikovanje ali oblikovanje UX in uporabniškega vmesnika. Svoje animacije verjetno shranite kot datoteke GIF, SVG ali PNG. Datoteka Lottie je vsi dobri deli teh vrst datotek, vendar manjša, hitrejša in enostavnejša za urejanje po upodabljanju.
LottieFiles je ogromna baza podatkov vnaprej izdelanih animacij, shranjenih v formatih Lottie ali JSON. Te animacije se upodabljajo v realnem času, kar omogoča hitrejše pošiljanje v vaše načrte. Ni treba čakati, da se te datoteke prenesejo; prikažejo se takoj, ko se stran odpre.
Če želite izvedeti več o LottieFiles, si oglejte našo uvod v Lottie.
Kako začeti
Ustvarili bomo Lottie z uporabo Adobe After Effects, vendar obstaja še druga programska oprema, ki jo lahko uporabite za ustvarjanje animacije Lottie. Za ustvarjanje Lottie lahko uporabite Adobe Animate z vtičnikom LottieFiles. Animacijo v formatu SVG lahko tudi pretvorite v Lottie, če ste že naredili animacijo v tej obliki.
After Effects je naša najboljša izbira, saj je bil LottieFiles prvotno ustvarjen za uporabo v After Effects. Začnimo.
1. Ustvarite svojo animacijo
Animacijski vidik vaše Lottie je enak kot pri kateri koli drugi obliki. Ilustracijo naše animacije smo ustvarili s programom Adobe Illustrator. Tako so plasti ločene in pripravljene za uvoz v After Effects. Ko je vaša ilustracija uvožena, lahko prilagodite plasti svoje kompozicije za končno animacijo.
Lotti animacije tečejo v neprekinjeni zanki, zato upoštevajte to za končne in začetne točke vašega dizajna. Animacija mora biti preprosta in dolga približno tri sekunde.
2. Prenesite vtičnike
Za ustvarjanje datoteke Lottie lahko uporabite dva vtičnika: vtičnik LottieFiles ali vtičnik Bodymovin. Oba sta na voljo za After Effects, vendar je vtičnik LottieFiles mogoče najti tudi v drugi programski opremi. Vsak počne nekoliko drugačne stvari, vendar se bomo zdaj osredotočili na vtičnik LottieFiles.
Če želite prenesti vtičnik LottieFiles, pojdite na Stran vtičnika LottieFiles After Effects. Našli boste dve možnosti prenosa.
Možnost na desni zahteva Upravitelj razširitev od Anastasiy ki deluje tako z Mac kot Windows. Ko prenesete Extension Manager, prenesite vtičnik ZXP s strani LottieFiles.
Ko je bil vtičnik ZXP prenesen, odprite Anastasiy Extension Manager, kliknite Po učinkih, s seznama izberite vtičnik LottieFiles in pritisnite Namestite.
Nazaj na stran vtičnika LottieFiles prenesite tudi vtičnik Adobe Exchange; odprite namizno aplikacijo Creative Cloud in namestite vtičnik. Vrnite se na končano animacija v programu After Effects.
Nekateri ljudje imajo pri uporabi teh vtičnikov napako pri dovoljenju. Če se želite izogniti tej težavi, pojdite na Po učinkih > Nastavitve > Skript in izrazi > Skriptiranje aplikacij in označite polje za Dovoli skriptom pisanje datotek in dostop do omrežja.
Ko bo to opravljeno, vas bo pojavno okno za LottieFiles pozvalo, da se prijavite. Če še nimate računa LottieFiles, je zdaj čas, da ga ustvarite.
3. Izvozite svojo Lotti
Z nameščenimi vtičniki LottieFiles lahko upodabljate svojo animacijo Lottie. Ko ste na končani kompoziciji animacije, kliknite okno > Razširitve > LottieFiles. To bo odprlo pojavno okno z imeni vaših skladb. Kliknite na zelena puščica poleg imena vaše kompozicije se prikaže okno za upodobitev Lottie.
Po nekaj sekundah se bo vaša animacija pojavila v pojavnem oknu. Animacija se bo predvajala v realnem času v zanki. Tukaj lahko izberete, da shranite svojo animacijo ali naložite svojo animacijo v knjižnico LottieFiles.
Klikanje Shrani kot vam bo dal dve možnosti izvoza: Lottie JSON (*.json) ali dotLottie (*.lottie). Datoteka dotLottie je stisnjena datoteka, ki vključuje metapodatke, ki jih za izvoz pravzaprav ne potrebujemo. Šli smo z Lottie JSON.
Vaša izvožena datoteka bo besedilna datoteka, ne datoteka vizualne animacije; tako delujejo datoteke JSON. Kaj pa, če bi želeli, da je animacija pripravljena? Poglejmo, kako lahko dostopate do njega.
Kako lahko uporabite svojo animacijo Lottie
Če želite naložiti svojo Lottie v knjižnico LottieFiles, kliknite Naloži. To se bo prikazalo nekaj sekund. Nato kliknite gumb z globusom na njem. S tem se odpre spletno mesto LottieFiles, kjer lahko svojo animacijo Lottie oddate v knjižnico LottieFiles. Poimenujte datoteko in pritisnite Roke stran.
Ko je vaša animacija odobrena v knjižnici LottieFiles, lahko uporabite vtičnik LottieFiles v programski opremi, kot je Adobe XD, Figma ali Sketch, da pošljete svojo animacijo v svoj dizajn.
Obstajajo tudi drugi načini uporabe vaše animacije LottieFiles, razen neposredno v knjižnici vtičnikov. Svojo animacijo Lottie lahko dodatno urejate v oknu v brskalniku. Ponuja osnovno ploščo plasti; spremenite lahko barvo ozadja, hitrost predvajanja, hitrost sličic in še nekaj drugih stvari.
V oknu Handoff lahko prenesete svojo animacijo kot a JSON datoteka za implementacijo v spletni razvoj in dizajn, ali pa ga lahko pretvorite v GIF za bolj običajno uporabo. Svojo animacijo lahko vdelate tudi z vdelano kodo HTML, na voljo pa sta tudi možnosti za iOS in Android, tako da lahko animacijo pošljete v svoj spletni dizajn.
Vdelava HTML Lottie vam omogoča urejanje kode za urejanje vaše animacije. Barve in velikosti lahko spremenite neposredno v kodi, ko jo dodate na svoje spletno mesto.
Prenos aplikacije LottieFiles v telefon vam omogoča skeniranje QR kode animacije za predogled animacije v aplikaciji. Uporabite lahko tudi tipkovnico LottieFiles in spustite svojo dotLottie kot komentar v določenih objavah.
Ustvarite Lottie v After Effects
Čeprav se morda še vedno zdi kot nekonvencionalna vrsta datoteke, saj svoje animacije ne morete preprosto naložiti naravnost v družbena omrežja, kot je lahko z GIF ali PNG, Lottie ima številne prednosti za spletne razvijalce in oblikovalce, ki uporabljajo vtičnike ali vdelajo kode v svoje modelov.
Datoteke Lottie in JSON prihranijo prostor in čas nalaganja ter ohranjajo kakovost v primerjavi s tradicionalnimi vrstami datotek. LottieFiles nenehno ustvarja nove načine za izvedbo načrtov, možnosti so neskončne.
Ustvarjanje animacije gibanja v Procreate je enostavno in ta članek vam bo pokazal, kako to storiti.
Preberite Naprej
- Kreativno
- Računalniška animacija
- Adobe
- Pretvorba datotek
Ruby je pisatelj v kategoriji Creative MUO, ki se osredotoča na pisanje o programski opremi za oblikovanje. Ker je delala kot oblikovalka, ilustratorka in fotografinja, je Ruby tudi diplomirala iz grafične komunikacije in magistrirala iz angleščine s kreativnim pisanjem.
Naročite se na naše novice
Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e-knjige in ekskluzivne ponudbe!
Kliknite tukaj, da se naročite