Kā izveidot LottieFiles animāciju programmā After Effects

LottieFiles izveidoja ātru, mērogojamu, pēc renderēšanas rediģējamu faila tipu, un jūs varat viegli iesaistīties un izveidot animācijas šajā formātā. Izmantojot Adobe After efektus un dažus spraudņus, varat būt daļa no jaunākā faila tipa ažiotāžas: Lottie.

Kas ir Lotija?

Lottie jeb dotLottie ir faila tips, kas satrauc tīmekļa izstrādātājus. Iespējams, esat izveidojis animācijas, ko iekļaut savos dizainos neatkarīgi no tā, vai tās ir paredzētas sociālajiem medijiem, tīmekļa dizainam vai UX un UI dizainam. Un jūs, iespējams, saglabājat savas animācijas kā GIF, SVG vai PNG failus. Lottie fails ir visas šo failu tipu labās daļas, taču tas ir mazāks, ātrāks un vieglāk rediģējams pēc renderēšanas.

LottieFiles ir milzīga iepriekš sagatavotu animāciju datu bāze, kas saglabāta Lottie vai JSON formātā. Šīs animācijas tiek renderētas reāllaikā, ļaujot ātrāk ievietot jūsu dizainu. Nav jāgaida, līdz šie faili tiks lejupielādēti; tie parādīsies, tiklīdz lapa tiks atvērta.

Lai uzzinātu vairāk par LottieFiles, skatiet mūsu ievads Lottie.

Darba sākšana

Mēs izveidosim Lottie, izmantojot Adobe After Effects, taču ir arī cita programmatūra, ko varat izmantot, lai izveidotu Lottie animāciju. Lai izveidotu Lottie, varat izmantot Adobe Animate ar spraudni LottieFiles. Varat arī pārvērst SVG formāta animāciju par Lottie, ja jau esat izveidojis animāciju šajā formātā.

After Effects ir mūsu labākā izvēle, tomēr, ņemot vērā, ka LottieFiles sākotnēji tika izveidots, lai to izmantotu programmā After Effects. Sāksim.

1. Izveidojiet savu animāciju

Lottie animācijas aspekts ir tāds pats kā jebkuram citam formātam. Mēs izveidojām savas animācijas ilustrāciju, izmantojot Adobe Illustrator. Tādējādi slāņi ir atsevišķi un gatavi importēšanai programmā After Effects. Kad ilustrācija ir importēta, varat pielāgot kompozīcijas slāņus galīgajai animācijai.

Lottie animācijas darbojas nepārtrauktā cilpā, tāpēc ņemiet vērā to sava dizaina beigu un sākuma punktos. Animācijai jābūt vienkāršai un apmēram trīs sekundes garai.

2. Lejupielādējiet spraudņus

Lai izveidotu Lottie failu, varat izmantot divus spraudņus: spraudni LottieFiles vai spraudni Bodymovin. Abi ir pieejami programmai After Effects, taču spraudni LottieFiles var atrast arī citā programmatūrā. Katrs no tiem veic nedaudz atšķirīgas darbības, taču šobrīd mēs koncentrēsimies uz spraudni LottieFiles.

Lai lejupielādētu spraudni LottieFiles, dodieties uz LottieFiles After Effects spraudņa lapa. Jūs atradīsit divas lejupielādes iespējas.

Opcijai labajā pusē ir nepieciešams Pagarinājuma vadītājs no Anastasijas kas darbojas gan ar Mac, gan ar Windows. Kad esat lejupielādējis paplašinājumu pārvaldnieku, lejupielādējiet ZXP spraudni no lapas LottieFiles.

Kad ZXP spraudnis ir lejupielādēts, atveriet Anastasiy Extension Manager, noklikšķiniet uz After Effects, sarakstā atlasiet spraudni LottieFiles un nospiediet Uzstādīt.

Atgriežoties LottieFiles spraudņa lapā, lejupielādējiet arī Adobe Exchange spraudni; atveriet savu Creative Cloud darbvirsmas lietotni un instalējiet spraudni. Atgriezieties pie pabeigtā animācija programmā After Effects.

Dažiem lietotājiem, izmantojot šos spraudņus, rodas atļaujas kļūda. Lai izvairītos no šīs problēmas, dodieties uz After Effects > Preferences > Skriptēšana un izteiksmes > Lietojumprogrammu skriptēšana un atzīmējiet izvēles rūtiņu Ļaujiet skriptiem rakstīt failus un piekļūt tīklam.

Kad tas būs izdarīts, LottieFiles uznirstošajā logā jums tiks lūgts pieteikties. Ja jums vēl nav LottieFiles konta, tagad ir pienācis laiks to izveidot.

3. Eksportējiet savu Lottie

Ja ir instalēti LottieFiles spraudņi, varat renderēt savu Lottie animāciju. Gatavās animācijas kompozīcijas laikā noklikšķiniet uz Logs > Paplašinājumi > LottieFiles. Tiks atvērts uznirstošais logs ar jūsu skaņdarbu nosaukumiem. Noklikšķiniet uz zaļā bulta blakus skaņdarba nosaukumam tiks parādīts Lottie renderēšanas logs.

Pēc dažām sekundēm jūsu animācija parādīsies uznirstošajā logā. Animācija tiks atskaņota reāllaikā. Šeit jūs varat izvēlēties saglabāt savu animāciju vai augšupielādēt savu animāciju LottieFiles bibliotēkā.

Noklikšķinot Saglabāt kā sniegs jums divas eksportēšanas iespējas: Lottie JSON (*.json) vai dotLottie (*.lottie). DotLottie fails ir zip fails, kas ietver metadatus, kas mums nav īsti nepieciešami eksportēšanai. Mēs devāmies kopā ar Lottie JSON.

Jūsu eksportētais fails būs teksta fails, nevis vizuālas animācijas fails; šādi darbojas JSON faili. Bet ko darīt, ja vēlaties, lai animācija būtu gatava? Apskatīsim, kā varat tai piekļūt.

Kā jūs varat izmantot savu Lottie animāciju

Lai augšupielādētu savu Lottie bibliotēkā LottieFiles, noklikšķiniet uz Augšupielādēt. Tas tiks renderēts dažas sekundes. Pēc tam noklikšķiniet uz pogas ar globusu. Tiek atvērta vietne LottieFiles, kurā varat iesniegt savu Lottie animāciju LottieFiles bibliotēkai. Nosauciet failu un nospiediet Nodošana.

Kad jūsu animācija ir apstiprināta LottieFiles bibliotēkā, varat izmantot LottieFiles spraudni programmatūrā, piemēram, Adobe XD, Figma vai Sketch, lai nosūtītu animāciju uz jūsu dizainu.

Ir arī citi veidi, kā izmantot LottieFiles animāciju, ne tikai spraudņu bibliotēkā. Jūs varat turpināt rediģēt savu Lottie animāciju pārlūkprogrammas logā. Tas piedāvā pamata slāņu paneli; varat mainīt fona krāsu, atskaņošanas ātrumu, kadru ātrumu un vēl dažas lietas.

Nodošanas logā varat lejupielādēt savu animāciju kā a JSON fails ieviešanai tīmekļa izstrādē un dizains, vai arī varat to pārvērst GIF formātā tradicionālākām vajadzībām. Varat arī iegult savu animāciju, izmantojot HTML iegulšanas kodu, un ir pieejamas arī iOS un Android opcijas, lai jūs varētu nosūtīt animāciju savā tīmekļa dizainā.

Lottie HTML iegulšana ļauj rediģēt kodu, lai rediģētu animāciju. Jūs varat mainīt krāsas un izmērus tieši kodā, kad to pievienojat savai vietnei.

Lejupielādējot lietotni LottieFiles savā tālrunī, varat skenēt animācijas QR kodu, lai priekšskatītu animāciju lietotnē. Varat arī izmantot LottieFiles tastatūru un atstāt savu dotLottie kā komentāru noteiktās ziņās.

Izveidojiet lotiju programmā After Effects

Lai gan tas joprojām var šķist netradicionāls faila veids, jo jūs nevarat vienkārši augšupielādēt savu animāciju tieši sociālajos saziņas līdzekļos, piemēram, jūs varat, izmantojot GIF vai PNG, Lottie piedāvā daudzas priekšrocības tīmekļa izstrādātājiem un dizaineriem, kuri savās ierīcēs izmanto spraudņus vai iegultu kodus. dizaini.

Lottie un JSON faili ietaupa vietu un ielādes laiku, kā arī saglabā kvalitāti salīdzinājumā ar tradicionālajiem failu tipiem. LottieFiles pastāvīgi rada jaunus veidus, kā īstenot dizainu, iespējas ir bezgalīgas.

Kā izveidot kustības animāciju, izmantojot Procreate

Kustības animācijas izveide programmā Procreate ir vienkārša, un šajā rakstā tiks parādīts, kā to izdarīt.

Lasiet Tālāk

Par autoru