Lottie begrensninger og vanlige feil i After Effects-animasjon

Vanlige feil gjort av nybegynnere når de lager animasjoner i After Effects for Lottie.

Hva er Lottie?

Lottie er en åpen kildekode, effektiv og fleksibel løsning som gjør implementering av animasjoner smertefritt og jevnt. Det reduserer kostnadene ved å skrive tusen linjer med kode og lar utviklere raskt implementere selv de mest komplekse animasjonene. Lottie-animasjon muliggjør en jevn arbeidsflyt, lagrer animasjonsverdier i JSON-filer, skaper rike animasjoner med mindre innsats, og utnytter blandingsmoduser uten å slå sammen oppsett.

Airbnb-teamet introduserte Lottie i 2017. Det er et iOS-, Android- og React Native-bibliotek som gjengir animasjoner laget i After Effects. Lottie bruker JSON-filer eksportert fra den gratis After Effects-plugin Bodymovin. Lottie støtter ulike funksjonaliteter og muligheter, inkludert keyframe-typer, formlag, streker, fyll, graderinger og andre After Effects-funksjoner.

Den daglige After Effects-arbeidsflyten er litt annerledes enn å lage animasjoner for Lottie. Før du i det hele tatt begynner å planlegge din fremtidige animasjon, må du forstå at Lottie har flere begrensninger, som en spesifikk liste over støttede After Effects-funksjoner eller forbudte plugins.

Hvis Lottie er nytt for deg og du ønsker å spare penger for kunden med et brukervennlig verktøy eller unngå timer med kamp med implementerte animasjoner som ikke fungerer, her er noen av de vanligste nybegynnerfeilene.

Feil å unngå når du lager animasjoner i After Effects for Lottie:

Gamle vaner

Etter år som animatører og designere, får vi mange vaner når det kommer til planlegging og skapelse av animasjoner. Å bruke og stole på kjente triks, plugins, presets og uttrykk i After Effects er den første vanlige nybegynnerfeilen.

Dessverre støtter ikke Lottie-biblioteket noen av de essensielle funksjonene i After Effects som uttrykk eller effekter (fra Effekter-menyen). Glem også blandingsmoduser, Luma Mattes og lag effekter (som Drop Shadow, Colour Overlay), fordi det støtter ikke disse funksjonene heller. Imidlertid støtter Lottie trim paths som en del av funksjonaliteten for formlag.

Plattformen (Android, iOS eller Web) hvor du planlegger å bruke animasjonen er også betydningsfull. Siden ikke alle funksjoner støttes på hver plattform, må du sjekke en lang liste over støttede funksjoner først.

Den sikreste, men kanskje ikke den enkleste løsningen er å fokusere mest på “rene” form-animasjoner og, hvis du må, bruke de støttede funksjonene. Hold prosjektet ditt så enkelt som mulig og skap vakre animasjoner!

Rotete lag

Det er åpenbart at Lottie fungerer best med formlag, men for å være ærlig, noen ganger er det smertefullt å tegne vektorillustrasjoner i After Effects selv. Selvfølgelig kan vi importere innhold fra programvare som Illustrator og konvertere enhver vektorressurs til AEs formlag. For Sketch er instruksjonene enda mer kompliserte. Likevel bør du være forsiktig med hva nøyaktig du har importert til komposisjonen din.

Rydd opp i formlagene dine rett etter import fra Adobe Illustrator

I de fleste tilfeller, når du legger til en ressurs forberedt i en annen programvare og konverterer den til et After Effects-form, vil det være noen unødvendige ting skjult i lagene. Du kan finne ting som ekstra sammenslåingsbaner eller grupper. Disse unyttige elementene påvirker ikke mye animasjonen i forhåndsvisningen i AE. Imidlertid, etter mye hardt arbeid når du eksporterer det og forhåndsviser det med Lottie, begynner noen mystiske, dårlige ting å skje. Vanligvis er animasjonen ødelagt på en eller annen måte og oppfører seg merkelig ugyldig.

Den første oppgaven, når du oppdager problemet, er å grave inn i hvert formlag og fjerne sammenslåingsbanene eller gruppene for å gjøre komposisjonen ryddig. Dessverre, i noen tilfeller, må du bygge det opp på en annen måte og animere det en gang til. Jeg vil anbefale å rydde opp i disse lagene rett etter import for å unngå mulige problemer i fremtiden.

Tilleggs tips: Fjern ressurser fra komposisjonen etter at du har konvertert den til formlag. Du vil unngå å eksportere det med JSON.

Unyttige keyframes

En av de viktigste fordelene med Lottie er den lette eksporterte JSON-filen. Utviklere er gale etter de små størrelsene på nettstedene og appene sine, og det bør du også være. Vær oppmerksom på konsekvensene av lange lastetider og laggende animasjoner.

Ved en feil kan du legge til uønskede kilobyte til din perfekte animasjon. Det første tipset er å bruke "parenting"-teknikken ved enhver anledning, fordi ekstra keyframes betyr ekstra kilobyte. Duplisering av de samme keyframes på relaterte lag legger til unyttige linjer med kode.

Animere langs en sti eller bruke forhåndsinnstillinger som Autotrace eller Wiggler genererer mange ekstra keyframes og kan gjøre størrelsen på JSON-filen din veldig problematisk.

Ikke bare betyr en haug med keyframes problemer, Alpha Matte og Mask-størrelse spiller også inn og kan betydelig påvirke ytelsen. Hvis du må bruke det, dekk så lite område som mulig. Du må finne en balanse mellom opprettelsen av animasjonen og effektiviteten i ytelsen.

Ikke sjekke to ganger

Selv om jeg har nevnt det tidligere, har jeg bestemt meg for å skrive et eget avsnitt om å gjennomgå animasjonen din, på grunn av viktigheten av dette emnet.

Test prosjektet ditt gjennom animasjonsprosessen

I noen tilfeller ser ikke animasjonen etter eksport med Bodymovin og forhåndsvisning med Lottie ut som animasjonen du har laget i After Effects. Spar tid, nerver og energi, og unngå å gjenskape animasjonen din ved å sjekke støttede Lottie-funksjoner og teste prosjektet ditt tidligere.

Gjennomgå tilstanden til animasjonen din gjennom animasjonsprosessen, ikke bare på slutten. Det vil være lettere å finne mulige hindringer og problemer hvis du sjekker den uferdige animasjonen i Bodymovin-forhåndsvisning inne i After Effects, Lotties nettsted eller med Lotties App.

Hvis du allerede har problemer med kompleks komposisjon, er det ikke så lett å isolere områder som forårsaker et problem. Du må gå gjennom hele strukturen, starte med å slå av noen av laggruppene og eksportere deler av animasjonen. Forhåndsvis det med Lottie og sjekk hvilken del som genererer komplikasjonen. Etter å ha oppdaget problemet, bør du grave deg ned i disse lagene, fjerne ekstra stier eller bygge det opp på en annen måte.

Bonus: Ikke-engelske After Effects

Gradientproblemer er ikke unike, men jeg ble sjokkert da jeg først fant løsningen. Det vanligste problemet er at en fargerik gradient eksporteres som svart og hvit. Når fargene dine ikke ser ut til å fungere, sjekk om After Effects er på engelsk og om alle lagene og komposisjonene dine er navngitt unikt på engelsk. Det fungerer ikke hver gang, men det har fungert under mine tester.

Kraften av Lottie

Til tross for noen begrensninger, er Lottie et kraftig verktøy. Først og fremst er arbeidsflyten veldig enkel. Designere kan lage rike lottie-animasjoner med komplekse interaksjoner uten at det tar mye tid, og utviklere kan enkelt konvertere disse animasjonene til kode. Designere kan enkelt eksportere animasjonene sine fra After Effects, og utviklere kan lett legge dem inn i appens ressurser. I tillegg er Lottie plattformuavhengig, så du kan bruke den samme JSON-filen på nettet så vel som på iOS-apper. Det er også verdt å vurdere å bruke Lottie på grunn av skalerbarheten til vektoranimajoner og de lette eksporterte filene.

Hvis du har problemer med prosessen, vil jeg anbefale å søke gjennom Airbnb’s Github eller legge ut om problemene dine der. Jeg har lagt merke til at støtten er veldig hjelpsom, og svarer på hver bekymring.

Nå som du vet om Lotties begrensninger, er du klar til å laste ned det du trenger for å komme i gang og lære hvordan Bodymovin fungerer, for å begynne på ditt første prosjekt! Til slutt, etter år med kamp, er implementeringen av animasjon enkel og lett.