Cum se creează o animație LottieFiles în After Effects

LottieFiles a creat un tip de fișier editabil rapid, scalabil, post-rendat și vă este ușor să vă implicați și să creați animații în acest format. Folosind Adobe After Effects și unele plugin-uri, puteți face parte din cel mai nou tip de fișier hype: Lottie.

Ce este o Lottie?

Un Lottie, sau dotLottie, este un tip de fișier care ia cu asalt dezvoltatorii web. Este posibil să fi făcut animații pentru a le include în design-ul dvs., fie că sunt pentru rețelele sociale, design web sau design UX și UI. Și probabil că veți salva animațiile ca fișiere GIF, SVG sau PNG. Un fișier Lottie este toate părțile bune ale acestor tipuri de fișiere, dar mai mic, mai rapid și mai ușor de editat după randare.

LottieFiles este o bază de date uriașă de animații prefabricate salvate în formatele Lottie sau JSON. Aceste animații sunt afișate în timp real, permițând o livrare mai rapidă a design-urilor dvs. Nu trebuie să așteptați ca aceste fișiere să se descarce; vor apărea imediat ce pagina se deschide.

Pentru a afla mai multe despre LottieFiles, consultați introducere la Lottie.

Noțiuni de bază

Vom crea o Lottie folosind Adobe After Effects, dar există și alte programe pe care le puteți folosi pentru a vă crea animația Lottie. Puteți utiliza Adobe Animate cu pluginul LottieFiles pentru a crea o Lottie. De asemenea, puteți converti o animație în format SVG într-o Lottie dacă ați realizat deja o animație în acest format.

After Effects este alegerea noastră de top, totuși, dat fiind că LottieFiles a fost creat inițial pentru a fi folosit în After Effects. Să începem.

1. Creați-vă animația

Aspectul de animare al lui Lottie este același ca pentru orice alt format. Am creat ilustrația animației noastre folosind Adobe Illustrator. Acest lucru menține straturile separate și gata de import în After Effects. Odată ce ilustrația este importată, puteți adapta straturile compoziției pentru animația finală.

Animațiile Lottie rulează pe o buclă continuă, așa că luați în considerare acest lucru pentru punctele de sfârșit și de început ale designului dvs. Animația ar trebui să fie simplă și să dureze aproximativ trei secunde.

2. Descărcați pluginurile

Există două pluginuri pe care le puteți utiliza pentru a crea un fișier Lottie: pluginul LottieFiles sau pluginul Bodymovin. Ambele sunt disponibile pentru After Effects, dar pluginul LottieFiles poate fi găsit și în alte programe. Fiecare face lucruri ușor diferite, dar ne vom concentra pe pluginul LottieFiles chiar acum.

Pentru a descărca pluginul LottieFiles, mergeți la Pagina de plugin LottieFiles After Effects. Veți găsi două opțiuni de descărcare.

Opțiunea din dreapta necesită un Manager de extensie de la Anastasiy care funcționează atât cu Mac, cât și cu Windows. După ce ați descărcat Extension Manager, descărcați pluginul ZXP de pe pagina LottieFiles.

După ce pluginul ZXP a fost descărcat, deschideți Anastasiy Extension Manager, faceți clic Dupa efecte, selectați pluginul LottieFiles din listă și apăsați Instalare.

Înapoi pe pagina de plugin LottieFiles, descărcați și pluginul Adobe Exchange; deschideți aplicația desktop Creative Cloud și instalați pluginul. Întoarce-te la terminat animație în After Effects.

Unii oameni au o eroare de permisiune când folosesc aceste pluginuri. Pentru a evita această problemă, accesați Dupa efecte > Preferințe > Scriptare și expresii > Scriptarea aplicației și bifați căsuța pentru Permiteți scripturilor să scrie fișiere și să acceseze rețeaua.

Odată ce se face acest lucru, fereastra pop-up pentru LottieFiles vă va cere să vă conectați. Dacă nu aveți deja un cont LottieFiles, acum este momentul să creați unul.

3. Exportați-vă Lottie

Cu pluginurile LottieFiles instalate, vă puteți reda animația Lottie. În timp ce ați terminat compoziția animației, faceți clic Fereastră > Extensii > LottieFiles. Aceasta va afișa o fereastră pop-up cu numele compozițiilor dvs. Apasă pe săgeată verde lângă numele compoziției dvs., aceasta va afișa fereastra de randare Lottie.

După câteva secunde, animația ta va apărea în fereastra pop-up. Animația se va reda în timp real în buclă. Aici, puteți alege să vă salvați animația sau să vă încărcați animația în biblioteca LottieFiles.

Făcând clic Salvează ca vă va oferi două opțiuni de export: Lottie JSON (*.json) sau dotLottie (*.lottie). Fișierul dotLottie este un fișier arhivat care include metadate, de care nu avem nevoie cu adevărat pentru export. Am mers cu Lottie JSON.

Fișierul dvs. exportat va fi un fișier text, nu un fișier de animație vizuală; așa funcționează fișierele JSON. Dar ce se întâmplă dacă ai vrea ca animația să fie pregătită? Să vedem cum îl poți accesa.

Cum vă puteți folosi animația Lottie

Pentru a încărca Lottie în biblioteca LottieFiles, faceți clic Încărcați. Aceasta va fi redată pentru câteva secunde. Apoi, faceți clic pe butonul cu globul de pe el. Aceasta deschide site-ul web LottieFiles unde vă puteți trimite animația Lottie în biblioteca LottieFiles. Denumiți fișierul și apăsați Ia mâna.

Odată ce animația dvs. a fost aprobată în biblioteca LottieFiles, puteți utiliza pluginul LottieFiles în software precum Adobe XD, Figma sau Sketch pentru a vă trimite animația la designul dvs.

Există și alte modalități de a folosi animația LottieFiles în afară de direct în biblioteca de pluginuri. Puteți edita în continuare animația Lottie din fereastra browserului. Oferă un panou de straturi de bază; puteți schimba culoarea de fundal, viteza de redare, rata de cadre și alte câteva lucruri.

Din fereastra Handoff, vă puteți descărca animația ca a Fișier JSON pentru implementare în dezvoltarea web și design, sau îl puteți converti într-un GIF pentru utilizări mai convenționale. De asemenea, vă puteți încorpora animația cu un cod de încorporare HTML și există și opțiuni pentru iOS și Android, astfel încât să puteți trimite animația în designul dvs. web.

Încorporarea Lottie HTML vă permite să editați codul pentru a vă edita animația. Puteți schimba culorile și dimensiunile chiar în cod atunci când îl adăugați pe site-ul dvs. web.

Descărcarea aplicației LottieFiles pe telefon vă permite să scanați codul QR al animației pentru a previzualiza animația în aplicație. De asemenea, puteți folosi tastatura LottieFiles și lăsați-vă dotLottie ca comentariu în anumite postări.

Creați o lottie în After Effects

Deși se poate simți totuși ca un tip de fișier neconvențional, deoarece nu puteți pur și simplu să vă încărcați animația direct pe rețelele sociale, cum ar fi puteți cu un GIF sau PNG, Lottie vine cu multe beneficii pentru dezvoltatorii web și designeri care folosesc pluginuri sau încorporează coduri în desene.

Fișierele Lottie și JSON economisesc spațiu și timpul de încărcare și păstrează calitatea în comparație cu tipurile de fișiere tradiționale. LottieFiles creează în mod constant noi modalități de implementare a design-urilor, posibilitățile sunt nesfârșite.

Cum se creează o animație în mișcare folosind Procreate

Crearea unei animații în mișcare în Procreate este ușoară, iar acest articol vă va arăta cum să o faceți.

Citiți în continuare

Despre autor