Kaip sukurti LottieFiles animaciją naudojant After Effects

„LottieFiles“ sukūrė greitą, keičiamo dydžio, po atvaizdavimo redaguojamą failo tipą, todėl jums nesunku įsitraukti ir kurti šio formato animacijas. Naudodami „Adobe After Effects“ ir kai kuriuos papildinius galite tapti naujausio failo tipo ažiotažu: „Lottie“ dalimi.

Kas yra Lotija?

„Lottie“ arba „dotLottie“ yra failo tipas, kuris pribloškia žiniatinklio kūrėjus. Galbūt sukūrėte animaciją, kurią norite įtraukti į savo dizainą, nesvarbu, ar jie skirti socialinei žiniasklaidai, žiniatinklio dizainui, UX ir vartotojo sąsajos dizainui. Ir tikriausiai išsaugosite savo animacijas kaip GIF, SVG arba PNG failus. „Lottie“ failas yra visos gerosios šių failų tipų dalys, tačiau mažesnės, greitesnės ir lengviau redaguojamos po pateikimo.

LottieFiles yra didžiulė iš anksto sukurtų animacijų, išsaugotų Lottie arba JSON formatais, duomenų bazė. Šios animacijos pateikiamos realiuoju laiku, todėl jūsų dizainą galima greičiau pristatyti. Nereikia laukti, kol šie failai bus atsisiųsti; jie bus rodomi iškart, kai atsidarys puslapis.

Norėdami sužinoti daugiau apie LottieFiles, peržiūrėkite mūsų įvadas į Lottie.

Darbo pradžia

Mes sukursime Lottie naudodami Adobe After Effects, tačiau yra ir kitos programinės įrangos, kurią galite naudoti kurdami Lottie animaciją. Norėdami sukurti Lottie, galite naudoti „Adobe Animate“ su „LottieFiles“ papildiniu. Taip pat galite konvertuoti SVG formato animaciją į Lottie, jei jau sukūrėte šio formato animaciją.

„After Effects“ yra mūsų geriausias pasirinkimas, tačiau atsižvelgiant į tai, kad „LottieFiles“ iš pradžių buvo sukurtas naudoti „After Effects“. Pradėkime.

1. Sukurkite savo animaciją

Jūsų Lottie animacinis aspektas yra toks pat kaip ir bet kurio kito formato. Animacijos iliustraciją sukūrėme naudodami „Adobe Illustrator“. Taip sluoksniai bus atskirti ir paruošti importuoti į After Effects. Kai iliustracija bus importuota, galėsite pritaikyti kompozicijos sluoksnius galutinei animacijai.

„Lottie“ animacija vykdoma nenutrūkstamu ciklu, todėl apsvarstykite tai savo dizaino pabaigos ir pradžios taškuose. Animacija turėtų būti paprasta ir maždaug trijų sekundžių trukmės.

2. Atsisiųskite papildinius

Yra du įskiepiai, kuriuos galite naudoti kurdami Lottie failą: LottieFiles įskiepį arba Bodymovin įskiepį. Abu yra prieinami „After Effects“, tačiau „LottieFiles“ papildinį galima rasti ir kitoje programinėje įrangoje. Kiekvienas iš jų daro šiek tiek skirtingus dalykus, tačiau šiuo metu daugiausia dėmesio skirsime „LottieFiles“ papildiniui.

Norėdami atsisiųsti „LottieFiles“ papildinį, eikite į LottieFiles After Effects papildinio puslapis. Rasite dvi atsisiuntimo parinktis.

Dešinėje esanti parinktis reikalauja Pratęsimo vadovas iš Anastasiy kuri veikia tiek su „Mac“, tiek su „Windows“. Atsisiuntę plėtinių tvarkyklę, atsisiųskite ZXP papildinį iš LottieFiles puslapio.

Atsisiuntę ZXP papildinį atidarykite Anastasiy Extension Manager, spustelėkite After Effects, iš sąrašo pasirinkite LottieFiles papildinį ir paspauskite Diegti.

Grįžę į LottieFiles papildinio puslapį, atsisiųskite ir Adobe Exchange papildinį; atidarykite „Creative Cloud“ darbalaukio programą ir įdiekite papildinį. Grįžkite į baigtą animacija „After Effects“..

Kai kurie žmonės, naudodami šiuos papildinius, patiria leidimo klaidą. Norėdami išvengti šios problemos, eikite į After Effects > Parinktys > Scenarijų rašymas ir išraiškos > Programos scenarijus ir pažymėkite langelį Leisti scenarijus rašyti failus ir pasiekti tinklą.

Kai tai bus padaryta, LottieFiles iššokantis langas paprašys jūsų prisijungti. Jei dar neturite LottieFiles paskyros, pats laikas ją sukurti.

3. Eksportuokite savo Lottie

Įdiegę „LottieFiles“ papildinius galite atkurti „Lottie“ animaciją. Kurdami baigtą animacijos kompoziciją spustelėkite Langas > Plėtiniai > LottieFiles. Bus parodytas iššokantis langas su jūsų kompozicijų pavadinimais. Spustelėkite žalia strėlė šalia jūsų kompozicijos pavadinimo bus parodytas Lottie atvaizdavimo langas.

Po kelių sekundžių jūsų animacija pasirodys iššokančiajame lange. Animacija bus rodoma realiuoju laiku. Čia galite pasirinkti išsaugoti animaciją arba įkelti animaciją į LottieFiles biblioteką.

Paspaudus Išsaugoti kaip suteiks jums dvi eksportavimo parinktis: Lottie JSON (*.json) arba dotLottie (*.lottie). „DotLottie“ failas yra suglaudintas failas, kuriame yra metaduomenų, kurių mums tikrai nereikia eksportuoti. Mes išvykome su Lottie JSON.

Jūsų eksportuotas failas bus tekstinis, o ne vaizdinės animacijos failas; taip veikia JSON failai. O kas, jei norėtumėte, kad animacija būtų paruošta? Pažiūrėkime, kaip galite jį pasiekti.

Kaip galite naudoti savo Lottie animaciją

Norėdami įkelti savo Lottie į LottieFiles biblioteką, spustelėkite Įkelti. Tai bus rodoma keletą sekundžių. Tada spustelėkite mygtuką su gaubliu. Taip atidaroma LottieFiles svetainė, kurioje galite pateikti savo Lottie animaciją į LottieFiles biblioteką. Pavadinkite failą ir paspauskite Perdavimas.

Kai jūsų animacija bus patvirtinta „LottieFiles“ bibliotekoje, galite naudoti „LottieFiles“ papildinį programinėje įrangoje, pvz., „Adobe XD“, „Figma“ arba „Sketch“, kad pristatytumėte animaciją į savo dizainą.

Yra ir kitų būdų, kaip naudoti „LottieFiles“ animaciją, išskyrus tiesioginį papildinių biblioteką. Galite toliau redaguoti Lottie animaciją naršyklės lange. Jame yra pagrindinių sluoksnių skydelis; galite pakeisti fono spalvą, atkūrimo greitį, kadrų dažnį ir dar keletą dalykų.

Perdavimo lange galite atsisiųsti savo animaciją kaip a JSON failas, skirtas diegti kuriant žiniatinklius ir dizainas, arba galite konvertuoti jį į GIF, kad galėtumėte naudoti įprastesnius. Taip pat galite įterpti animaciją naudodami HTML įterpimo kodą, taip pat yra iOS ir Android parinkčių, kad galėtumėte siųsti animaciją į savo žiniatinklio dizainą.

Įdėjus Lottie HTML galite redaguoti kodą ir redaguoti animaciją. Galite pakeisti spalvas ir dydžius tiesiai kode, kai pridedate jį prie savo svetainės.

Atsisiuntę į savo telefoną programėlę LottieFiles, galėsite nuskaityti animacijos QR kodą ir peržiūrėti animaciją programoje. Taip pat galite naudoti „LottieFiles“ klaviatūrą ir palikti „dotLottie“ kaip komentarą tam tikruose įrašuose.

Sukurkite loteriją „After Effects“.

Nors tai vis tiek gali atrodyti kaip netradicinis failo tipas, nes negalite tiesiog įkelti animacijos tiesiai į socialinę žiniasklaidą, pvz., Galite naudoti GIF arba PNG, „Lottie“ suteikia daug privalumų žiniatinklio kūrėjams ir dizaineriams, kurie naudoja papildinius arba įterpia kodus savo dizaino.

Lottie ir JSON failai taupo vietą ir įkėlimo laiką bei išsaugo kokybę, palyginti su tradiciniais failų tipais. LottieFiles nuolat kuria naujus dizaino įgyvendinimo būdus, galimybės yra neribotos.

Kaip sukurti judesio animaciją naudojant „Procreate“.

Sukurti judesio animaciją naudojant Procreate yra paprasta, ir šiame straipsnyje bus parodyta, kaip tai padaryti.

Skaitykite toliau

Apie autorių