Kuidas luua LottieFilesi animatsiooni rakenduses After Effects

LottieFiles lõi kiire, skaleeritava, järelrenderdatava redigeeritava failitüübi ning teil on lihtne selles vormingus kaasa lüüa ja animatsioone luua. Adobe After Effecti ja mõningate pistikprogrammide abil saate olla osa uusimast failitüübist: Lottie.

Mis on Lottie?

Lottie või dotLottie on failitüüp, mis haarab veebiarendajaid tormiliselt. Võimalik, et olete oma kujundustesse lisamiseks teinud animatsioone, olgu need siis sotsiaalmeedia, veebidisaini või UX-i ja kasutajaliidese kujunduse jaoks. Ja tõenäoliselt salvestate oma animatsioonid GIF-, SVG- või PNG-failidena. Lottie-fail on nende failitüüpide kõik head osad, kuid väiksem, kiirem ja hõlpsamini redigeeritav pärast renderdamist.

LottieFiles on tohutu andmebaas Lottie- või JSON-vormingus salvestatud eelanimatsioonidest. Need animatsioonid renderdatakse reaalajas, võimaldades teie kujundusi kiiremini kohale toimetada. Nende failide allalaadimist ei pea ootama. need ilmuvad kohe, kui leht avaneb.

LottieFilesi kohta lisateabe saamiseks vaadake meie Lottie tutvustus.

Alustamine

Loome Lottie kasutades Adobe After Effects, kuid on ka muud tarkvara, mida saate oma Lottie animatsiooni loomiseks kasutada. Lottie loomiseks saate kasutada Adobe Animate'i koos pistikprogrammiga LottieFiles. Samuti saate SVG-vormingus animatsiooni Lottieks teisendada, kui olete selles vormingus animatsiooni juba teinud.

After Effects on aga meie parim valik, kuna LottieFiles loodi algselt After Effectsis kasutamiseks. Alustame.

1. Looge oma animatsioon

Teie Lottie animatsiooniaspekt on sama, mis mis tahes muu vormingu puhul. Lõime oma animatsiooni illustratsiooni Adobe Illustratori abil. See hoiab kihid eraldi ja valmis After Effectsi importimiseks. Kui illustratsioon on imporditud, saate kohandada oma kompositsiooni kihte lõpliku animatsiooni jaoks.

Lottie animatsioonid töötavad pideva tsüklina, nii et arvestage sellega oma kujunduse lõpp- ja alguspunktides. Animatsioon peaks olema lihtne ja umbes kolm sekundit pikk.

2. Laadige alla pluginad

Lottie-faili loomiseks saate kasutada kahte pistikprogrammi: pistikprogrammi LottieFiles või Bodymovini pistikprogrammi. Mõlemad on saadaval After Effectsi jaoks, kuid pistikprogrammi LottieFiles võib leida ka muust tarkvarast. Nad kõik teevad veidi erinevaid asju, kuid me keskendume praegu pistikprogrammile LottieFiles.

LottieFilesi pistikprogrammi allalaadimiseks minge lehele LottieFiles After Effectsi pistikprogrammi leht. Leiate kaks allalaadimisvalikut.

Parempoolne valik nõuab Laiendusjuht Anastasiy'lt mis töötab nii Maci kui ka Windowsiga. Kui olete laiendushalduri alla laadinud, laadige lehelt LottieFiles alla ZXP pistikprogramm.

Pärast ZXP pistikprogrammi allalaadimist avage Anastasiy Extension Manager ja klõpsake nuppu Järelmõjud, valige loendist pistikprogramm LottieFiles ja klõpsake nuppu Installige.

Tagasi LottieFilesi pistikprogrammi lehele, laadige alla ka Adobe Exchange'i pistikprogramm; avage oma Creative Cloudi töölauarakendus ja installige pistikprogramm. Naaske lõpetatud juurde animatsioon After Effectsis.

Mõnel inimesel on nende pistikprogrammide kasutamisel loa tõrge. Selle probleemi vältimiseks minge aadressile Järelmõjud > Eelistused > Skriptimine ja väljendid > Rakenduse skriptimine ja märkige ruut Luba skriptidel faile kirjutada ja võrgule juurde pääseda.

Kui see on tehtud, palub LottieFiles'i hüpikaken teil sisse logida. Kui teil pole veel LottieFilesi kontot, on nüüd aeg see luua.

3. Eksportige oma Lottie

Kui LottieFilesi pistikprogrammid on installitud, saate oma Lottie animatsiooni renderdada. Kui olete valmis animatsioonikompositsioonis, klõpsake nuppu Aken > Laiendused > LottieFiles. See avab hüpikakna teie kompositsioonide nimedega. Klõpsake nuppu roheline nool kompositsiooni nime kõrval avab see Lottie renderdusakna.

Mõne sekundi pärast kuvatakse teie animatsioon hüpikaknas. Animatsiooni esitatakse reaalajas. Siin saate valida, kas salvestate oma animatsiooni või laadite selle üles LottieFilesi teeki.

Klõpsates Salvesta kui annab teile kaks ekspordivalikut: Lottie JSON (*.json) või dotLottie (*.lottie). DotLottie fail on pakitud fail, mis sisaldab metaandmeid, mida me tegelikult eksportimiseks ei vaja. Käisime koos Lottie JSONiga.

Teie eksporditud fail on tekstifail, mitte visuaalne animatsioonifail; JSON-failid töötavad nii. Aga mis siis, kui soovite, et animatsioon oleks valmis? Vaatame, kuidas saate sellele juurde pääseda.

Kuidas saate oma Lottie animatsiooni kasutada

Lottie teeki LottieFiles üleslaadimiseks klõpsake nuppu Laadi üles. See renderdatakse mõneks sekundiks. Seejärel klõpsake nuppu, millel on maakera. See avab veebisaidi LottieFiles, kus saate oma Lottie-animatsiooni LottieFilesi teeki saata. Andke failile nimi ja klõpsake nuppu Käsi eemale.

Kui teie animatsioon on LottieFilesi teegis heaks kiidetud, saate kasutada LottieFilesi pistikprogrammi tarkvaras, nagu Adobe XD, Figma või Sketch, et saata animatsioon oma kujundusele.

LottieFilesi animatsiooni kasutamiseks on ka teisi viise peale otse pistikprogrammide teegis. Saate oma Lottie animatsiooni edasi redigeerida brauseri aknas. See pakub põhikihtide paneeli; saate muuta taustavärvi, taasesituskiirust, kaadrisagedust ja veel mõnda asja.

Üleandmise aknast saate oma animatsiooni alla laadida kui a JSON-fail veebiarenduses juurutamiseks ja disaini või saate selle tavapärasema kasutuse jaoks teisendada GIF-iks. Saate manustada oma animatsiooni ka HTML-i manustamiskoodiga ning saadaval on ka iOS-i ja Androidi valikud, nii et saate animatsiooni oma veebikujundusse saata.

Lottie HTML-i manustamine võimaldab teil animatsiooni redigeerimiseks koodi redigeerida. Saate muuta värve ja suurusi otse koodis, kui lisate selle oma veebisaidile.

Rakenduse LottieFiles allalaadimine telefoni võimaldab teil skannida animatsiooni QR-koodi, et rakenduses animatsiooni eelvaadet vaadata. Võite kasutada ka LottieFilesi klaviatuuri ja lisada oma dotLottie teatud postitustesse kommentaarina.

Looge mängus After Effects

Kuigi see võib siiski tunduda ebatavalise failitüübina, kuna te ei saa lihtsalt oma animatsiooni otse sotsiaalmeediasse üles laadida, näiteks GIF- või PNG-vormingus on Lottie'l palju eeliseid veebiarendajatele ja disaineritele, kes kasutavad pistikprogramme või manustavad koode. kujundused.

Lottie- ja JSON-failid säästavad ruumi ja laadimisaega ning säilitavad kvaliteedi võrreldes traditsiooniliste failitüüpidega. LottieFiles loob pidevalt uusi viise kujunduste elluviimiseks, võimalused on lõputud.

Kuidas luua Procreate'i abil liikumisanimatsiooni

Liikumisanimatsiooni loomine Procreate'is on lihtne ja see artikkel näitab, kuidas seda teha.

Loe edasi

Autori kohta