Hvordan lage en LottieFiles-animasjon i After Effects

LottieFiles opprettet en rask, skalerbar, post-gjengert redigerbar filtype, og det er enkelt for deg å engasjere deg og lage animasjoner i dette formatet. Ved å bruke Adobe After effects og noen plugins kan du være en del av den nyeste filtypehypen: Lottie.

Hva er en Lottie?

En Lottie, eller dotLottie, er en filtype som tar webutviklere med storm. Du kan ha laget animasjoner for å inkludere i designene dine, enten de er for sosiale medier, webdesign eller UX- og UI-design. Og du lagrer sannsynligvis animasjonene dine som GIF-, SVG- eller PNG-filer. En Lottie-fil er alle de gode delene av disse filtypene, men mindre, raskere og enklere å redigere etter gjengivelse.

LottieFiles er en enorm database med forhåndslagde animasjoner lagret i Lottie- eller JSON-formater. Disse animasjonene gjengis i sanntid, noe som gir raskere levering til designene dine. Det er ingen ventetid på at disse filene skal lastes ned; de vises så snart siden åpnes.

For å lære mer om LottieFiles, sjekk ut vår introduksjon til Lottie.

Starter

Vi skal lage en Lottie ved å bruke Adobe After Effects, men det finnes annen programvare du kan bruke til å lage din Lottie-animasjon. Du kan bruke Adobe Animate med LottieFiles-pluginen for å lage en Lottie. Du kan også konvertere en animasjon i SVG-format til en Lottie hvis du allerede har laget en animasjon i dette formatet.

After Effects er vårt beste valg, men gitt LottieFiles ble opprinnelig laget for å brukes i After Effects. La oss komme i gang.

1. Lag din animasjon

Animasjonsaspektet til Lottie er det samme som for alle andre formater. Vi laget illustrasjonen av animasjonen vår ved hjelp av Adobe Illustrator. Dette holder lagene atskilt og klare til å importeres til After Effects. Når illustrasjonen er importert, kan du tilpasse komposisjonens lag for den endelige animasjonen.

Lottie-animasjoner kjører på en kontinuerlig sløyfe, så tenk på det for slutt- og startpunktene for designet ditt. Animasjonen skal være enkel og rundt tre sekunder lang.

2. Last ned plugins

Det er to plugin-moduler du kan bruke til å lage en Lottie-fil: LottieFiles-pluginen eller Bodymovin-pluginen. Begge er tilgjengelige for After Effects, men LottieFiles-pluginen kan også finnes i annen programvare. Hver av dem gjør litt forskjellige ting, men vi skal fokusere på LottieFiles-pluginen akkurat nå.

For å laste ned LottieFiles-plugin, gå til LottieFiles After Effects plugin-side. Du finner to nedlastingsalternativer.

Alternativet til høyre krever en Extension Manager fra Anastasiy som fungerer med både Mac og Windows. Når du har lastet ned Extension Manager, last ned ZXP-plugin fra LottieFiles-siden.

Etter at ZXP-pluginen er lastet ned, åpner du Anastasiy Extension Manager, klikker Etter effekter, velg LottieFiles-plugin fra listen, og trykk Installere.

Tilbake på LottieFiles-plugin-siden, last ned Adobe Exchange-pluginen også; åpne Creative Cloud-skrivebordsappen og installer plugin-en. Gå tilbake til det ferdige animasjon i After Effects.

Noen mennesker har en tillatelsesfeil når de bruker disse pluginene. For å unngå dette problemet, gå til Etter effekter > Preferanser > Skripting og uttrykk > Application Scripting og kryss av for Tillat skript å skrive filer og få tilgang til nettverket.

Når dette er gjort, vil popup-vinduet for LottieFiles be deg om å logge på. Hvis du ikke allerede har en LottieFiles-konto, er det nå på tide å opprette en.

3. Eksporter Lottie

Med LottieFiles-pluginene installert, kan du gjengi Lottie-animasjonen. Klikk på den ferdige animasjonskomposisjonen Vindu > Utvidelser > LottieFiles. Dette vil få opp en popup med navnene på komposisjonene dine. Klikk på grønn pil ved siden av navnet på komposisjonen din, vil dette få opp Lottie-gjengivelsesvinduet.

Etter noen sekunder vil animasjonen din vises i popup-vinduet. Animasjonen spilles av i sanntid på loop. Her kan du velge å lagre animasjonen eller laste opp animasjonen til LottieFiles-biblioteket.

Klikker Lagre som vil gi deg to eksportalternativer: Lottie JSON (*.json) eller dotLottie (*.lottie). DotLottie-filen er en zippet fil som inneholder metadata, som vi egentlig ikke trenger for eksport. Vi dro med Lottie JSON.

Din eksporterte fil vil være en tekstfil, ikke en visuell animasjonsfil; dette er hvordan JSON-filer fungerer. Men hva om du ville ha animasjonen klar til å gå? La oss se hvordan du får tilgang til den.

Hvordan du kan bruke Lottie-animasjonen

For å laste opp Lottie til LottieFiles-biblioteket, klikk Laste opp. Dette vil gjengi i noen sekunder. Deretter klikker du på knappen med kloden på. Dette åpner LottieFiles-nettstedet hvor du kan sende inn Lottie-animasjonen til LottieFiles-biblioteket. Gi filen et navn og trykk Overrekke.

Når animasjonen din er godkjent i LottieFiles-biblioteket, kan du bruke LottieFiles-plugin-modulen i programvare som Adobe XD, Figma eller Sketch for å sende animasjonen til ditt design.

Det er andre måter å bruke LottieFiles-animasjonen på bortsett fra direkte i plugin-biblioteket. Du kan videre redigere Lottie-animasjonen fra vinduet i nettleseren. Den tilbyr et grunnleggende lagpanel; du kan endre bakgrunnsfargen, avspillingshastigheten, bildefrekvensen og noen flere ting.

Fra Handoff-vinduet kan du laste ned animasjonen som en JSON-fil for implementering i webutvikling og design, eller du kan konvertere den til en GIF for mer konvensjonell bruk. Du kan også bygge inn animasjonen med en HTML-innebyggingskode, og det er iOS- og Android-alternativer også, slik at du kan sende animasjonen inn i webdesignet ditt.

Ved å bygge inn Lottie HTML kan du redigere koden for å redigere animasjonen. Du kan endre farger og størrelser rett i koden når du legger den til på nettstedet ditt.

Ved å laste ned LottieFiles-appen på telefonen kan du skanne animasjonens QR-kode for å forhåndsvise animasjonen i appen. Du kan også bruke LottieFiles-tastaturet og slippe dotLottie som en kommentar i enkelte innlegg.

Lag en Lottie i After Effects

Selv om det fortsatt kan føles som en ukonvensjonell filtype, siden du ikke bare kan laste opp animasjonen rett til sosiale medier som du kan med en GIF eller PNG, Lottie kommer med mange fordeler for webutviklere og designere som bruker plugins eller innebygde koder i deres design.

Lottie- og JSON-filer sparer plass og lastetid, og bevarer kvaliteten sammenlignet med tradisjonelle filtyper. LottieFiles skaper stadig nye måter å implementere designene på, mulighetene er uendelige.

Hvordan lage en bevegelsesanimasjon ved å bruke Procreate

Det er enkelt å lage en bevegelsesanimasjon i Procreate, og denne artikkelen viser deg hvordan du gjør det.

Les Neste

Om forfatteren