Ako vytvoriť animáciu LottieFiles v After Effects

LottieFiles vytvoril rýchly, škálovateľný, po vykreslení upraviteľný typ súboru a je pre vás ľahké zapojiť sa a vytvárať animácie v tomto formáte. Pomocou efektov Adobe After a niektorých zásuvných modulov sa môžete stať súčasťou najnovšieho hype typu súborov: Lottie.

Čo je to Lottie?

Lottie alebo dotLottie je typ súboru, ktorý berie vývojárov webu útokom. Možno ste vytvorili animácie, ktoré chcete zahrnúť do svojich návrhov, či už ide o sociálne médiá, webový dizajn alebo dizajn UX a používateľského rozhrania. A svoje animácie pravdepodobne ukladáte ako súbory GIF, SVG alebo PNG. Súbor Lottie sú všetky dobré časti týchto typov súborov, ale po vykreslení sú menšie, rýchlejšie a ľahšie upraviteľné.

LottieFiles je obrovská databáza predpripravených animácií uložených vo formátoch Lottie alebo JSON. Tieto animácie sa vykresľujú v reálnom čase, čo umožňuje rýchlejšie odosielanie do vašich návrhov. Na stiahnutie týchto súborov nemusíte čakať; zobrazia sa hneď po otvorení stránky.

Ak sa chcete dozvedieť viac o LottieFiles, pozrite si naše úvod do Lottie.

Začíname

Vytvoríme Lottie pomocou Adobe After Effects, ale existuje aj iný softvér, ktorý môžete použiť na vytvorenie animácie Lottie. Na vytvorenie Lottie môžete použiť Adobe Animate s doplnkom LottieFiles. Môžete tiež previesť animáciu formátu SVG na Lottie, ak ste už vytvorili animáciu v tomto formáte.

After Effects je naša najlepšia voľba, keďže LottieFiles bol pôvodne vytvorený na použitie v After Effects. Začnime.

1. Vytvorte si animáciu

Animačný aspekt vašej Lottie je rovnaký ako pri akomkoľvek inom formáte. Ilustráciu našej animácie sme vytvorili pomocou programu Adobe Illustrator. Vďaka tomu budú vrstvy oddelené a pripravené na import do After Effects. Po importovaní ilustrácie môžete prispôsobiť vrstvy kompozície pre konečnú animáciu.

Lottie animácie bežia v nepretržitej slučke, takže to zvážte pre koncové a počiatočné body vášho návrhu. Animácia by mala byť jednoduchá a mala by trvať približne tri sekundy.

2. Stiahnite si pluginy

Existujú dva doplnky, ktoré môžete použiť na vytvorenie súboru Lottie: doplnok LottieFiles alebo doplnok Bodymovin. Oba sú dostupné pre After Effects, ale doplnok LottieFiles možno nájsť aj v inom softvéri. Každý z nich robí trochu iné veci, ale my sa teraz zameriame na doplnok LottieFiles.

Ak si chcete stiahnuť doplnok LottieFiles, prejdite na stránku Stránka doplnku LottieFiles After Effects. Nájdete dve možnosti sťahovania.

Možnosť vpravo vyžaduje Správca rozšírenia od Anastasiy ktorý funguje s Mac aj Windows. Po stiahnutí Správcu rozšírení si stiahnite doplnok ZXP zo stránky LottieFiles.

Po stiahnutí doplnku ZXP otvorte Anastasiy Extension Manager a kliknite After Effects, vyberte zo zoznamu doplnok LottieFiles a stlačte Inštalácia.

Vráťte sa na stránku doplnku LottieFiles a stiahnite si aj doplnok Adobe Exchange; otvorte počítačovú aplikáciu Creative Cloud a nainštalujte doplnok. Vráťte sa k dokončeniu animácie v After Effects.

Niektorí ľudia majú pri používaní týchto doplnkov chybu povolenia. Ak sa chcete tomuto problému vyhnúť, prejdite na stránku After Effects > Predvoľby > Skriptovanie a výrazy > Skriptovanie aplikácií a začiarknite políčko pre Povoliť skriptom zapisovať súbory a pristupovať k sieti.

Keď to urobíte, vyskakovacie okno LottieFiles vás požiada, aby ste sa prihlásili. Ak ešte nemáte účet LottieFiles, teraz je čas si ho vytvoriť.

3. Exportujte svoju lotériu

S nainštalovanými zásuvnými modulmi LottieFiles môžete vykresliť animáciu Lottie. Keď máte hotovú kompozíciu animácie, kliknite okno > Rozšírenia > LottieFiles. Zobrazí sa kontextové okno s názvami vašich skladieb. Kliknite na zelený šíp vedľa názvu vašej kompozície sa zobrazí okno vykresľovania Lottie.

Po niekoľkých sekundách sa vaša animácia objaví vo vyskakovacom okne. Animácia sa prehrá v reálnom čase v slučke. Tu si môžete vybrať, či chcete svoju animáciu uložiť alebo ju nahrať do knižnice LottieFiles.

Kliknutie Uložiť ako vám poskytne dve možnosti exportu: Lottie JSON (*.json) alebo dotLottie (*.lottie). Súbor dotLottie je komprimovaný súbor, ktorý obsahuje metadáta, ktoré na export v skutočnosti nepotrebujeme. Išli sme s Lottie JSON.

Váš exportovaný súbor bude textový súbor, nie súbor s vizuálnou animáciou; takto fungujú súbory JSON. Čo ak však chcete, aby bola animácia pripravená? Pozrime sa, ako k nemu môžete pristupovať.

Ako môžete použiť svoju animáciu Lottie

Ak chcete nahrať svoju Lottie do knižnice LottieFiles, kliknite Nahrať. Toto sa vykreslí na niekoľko sekúnd. Potom kliknite na tlačidlo so zemeguľou. Tým sa otvorí webová stránka LottieFiles, kde môžete odoslať svoju animáciu Lottie do knižnice LottieFiles. Pomenujte svoj súbor a stlačte Ruky preč.

Po schválení vašej animácie v knižnici LottieFiles môžete použiť doplnok LottieFiles v softvéri ako Adobe XD, Figma alebo Sketch na odoslanie animácie do vášho návrhu.

Okrem priamo v knižnici doplnkov existujú aj iné spôsoby použitia animácie LottieFiles. Animáciu Lottie môžete ďalej upravovať z okna prehliadača. Ponúka panel základných vrstiev; môžete zmeniť farbu pozadia, rýchlosť prehrávania, snímkovú frekvenciu a niekoľko ďalších vecí.

Z okna Handoff si môžete stiahnuť svoju animáciu ako a Súbor JSON na implementáciu pri vývoji webu a dizajn, alebo ho môžete previesť na GIF pre bežnejšie použitie. Svoju animáciu môžete vložiť aj pomocou kódu na vloženie HTML a existujú aj možnosti pre systémy iOS a Android, takže animáciu môžete odoslať do svojho webového dizajnu.

Vloženie Lottie HTML vám umožní upraviť kód na úpravu vašej animácie. Farby a veľkosti môžete zmeniť priamo v kóde, keď ho pridáte na svoj web.

Stiahnutie aplikácie LottieFiles do telefónu vám umožní naskenovať QR kód animácie a zobraziť ukážku animácie v aplikácii. Môžete tiež použiť klávesnicu LottieFiles a vložiť dotLottie ako komentár k určitým príspevkom.

Vytvorte lotériu v After Effects

Aj keď to stále môže vyzerať ako nekonvenčný typ súboru, pretože svoju animáciu nemôžete jednoducho nahrať priamo na sociálne médiá, ako je môžete s GIF alebo PNG, Lottie prichádza s mnohými výhodami pre webových vývojárov a dizajnérov, ktorí používajú pluginy alebo vkladajú kódy do svojich dizajnov.

Súbory Lottie a JSON šetria miesto a čas načítania a zachovávajú kvalitu v porovnaní s tradičnými typmi súborov. LottieFiles neustále vytvárajú nové spôsoby implementácie návrhov, možnosti sú nekonečné.

Ako vytvoriť pohybovú animáciu pomocou programu Procreate

Vytvorenie pohybovej animácie v Procreate je jednoduché a tento článok vám ukáže, ako na to.

Prečítajte si ďalej

O autorovi