Sådan opretter du en LottieFiles-animation i After Effects

LottieFiles skabte en hurtig, skalerbar, eftergengivet redigerbar filtype, og det er nemt for dig at blive involveret og oprette animationer i dette format. Ved at bruge Adobe After effects og nogle plugins kan du være en del af den nyeste filtypehype: Lottie.

Hvad er en Lottie?

En Lottie, eller dotLottie, er en filtype, der tager webudviklere med storm. Du har muligvis lavet animationer til at inkludere i dine designs, uanset om de er til sociale medier, webdesign eller UX- og UI-design. Og du gemmer sandsynligvis dine animationer som GIF-, SVG- eller PNG-filer. En Lottie-fil er alle de gode dele af disse filtyper, men mindre, hurtigere og nemmere at redigere efter gengivelse.

LottieFiles er en enorm database med færdiglavede animationer gemt i Lottie- eller JSON-formater. Disse animationer gengives i realtid, hvilket giver mulighed for hurtigere forsendelse til dine designs. Der er ingen ventetid på, at disse filer skal downloades; de vises, så snart siden åbner.

For at lære mere om LottieFiles, tjek vores introduktion til Lottie.

Kom godt i gang

Vi vil oprette en Lottie ved hjælp af Adobe After Effects, men der er anden software, du kan bruge til at oprette din Lottie-animation. Du kan bruge Adobe Animate med LottieFiles-plugin'et til at oprette en Lottie. Du kan også konvertere en animation i SVG-format til en Lottie, hvis du allerede har lavet en animation i dette format.

After Effects er vores bedste valg, men da LottieFiles oprindeligt blev skabt til at blive brugt i After Effects. Lad os komme igang.

1. Opret din animation

Det animerende aspekt af din Lottie er det samme som for ethvert andet format. Vi lavede illustrationen af ​​vores animation ved hjælp af Adobe Illustrator. Dette holder lagene adskilt og klar til at importeres til After Effects. Når din illustration er importeret, kan du tilpasse din kompositions lag til den endelige animation.

Lottie-animationer kører på en kontinuerlig løkke, så overvej det for slutningen og startpunkterne for dit design. Animationen skal være enkel og omkring tre sekunder lang.

2. Download plugins

Der er to plugins, du kan bruge til at oprette en Lottie-fil: LottieFiles-plugin'et eller Bodymovin-plugin'et. Begge er tilgængelige til After Effects, men LottieFiles-plugin'et kan også findes i anden software. De gør hver især lidt forskellige ting, men vi vil fokusere på LottieFiles-pluginnet lige nu.

For at downloade LottieFiles-pluginnet skal du gå til LottieFiles After Effects plugin-side. Du finder to downloadmuligheder.

Indstillingen til højre kræver en Extension Manager fra Anastasiy der fungerer med både Mac og Windows. Når du har downloadet Extension Manager, skal du downloade ZXP-plugin'et fra LottieFiles-siden.

Når ZXP-pluginnet er blevet downloadet, skal du åbne Anastasiy Extension Manager, klikke After Effects, vælg LottieFiles-plugin fra listen, og tryk Installere.

Tilbage på LottieFiles-plugin-siden kan du også downloade Adobe Exchange-pluginnet; åbn din Creative Cloud-skrivebordsapp og installer pluginnet. Vend tilbage til din færdige animation i After Effects.

Nogle mennesker har en tilladelsesfejl, når de bruger disse plugins. For at undgå dette problem, gå til After Effects > Præferencer > Scripting og udtryk > Application Scripting og sæt kryds i boksen for Tillad scripts at skrive filer og få adgang til netværket.

Når dette er gjort, vil pop op-vinduet for LottieFiles bede dig om at logge ind. Hvis du ikke allerede har en LottieFiles-konto, er det nu, du skal oprette en.

3. Eksporter din Lottie

Med LottieFiles-plugins installeret, kan du gengive din Lottie-animation. Klik på din færdige animationskomposition Vindue > Udvidelser > LottieFiles. Dette åbner en pop op med navnene på dine kompositioner. Klik på grøn pil ud for navnet på din komposition vil dette vise Lottie-gengivelsesvinduet.

Efter et par sekunder vises din animation i pop op-vinduet. Animationen afspilles i realtid på loop. Her kan du vælge at gemme din animation eller uploade din animation til LottieFiles-biblioteket.

Klikker Gem som vil give dig to eksportmuligheder: Lottie JSON (*.json) eller dotLottie (*.lottie). DotLottie-filen er en zippet fil, der indeholder metadata, som vi ikke rigtig har brug for til eksport. Vi gik med Lottie JSON.

Din eksporterede fil vil være en tekstfil, ikke en visuel animationsfil; dette er hvordan JSON-filer fungerer. Men hvad nu hvis du ville have animationen klar til at gå? Lad os se, hvordan du kan få adgang til det.

Sådan kan du bruge din Lottie-animation

For at uploade din Lottie til LottieFiles-biblioteket skal du klikke Upload. Dette gengives i et par sekunder. Klik derefter på knappen med kloden på. Dette åbner LottieFiles-webstedet, hvor du kan indsende din Lottie-animation til LottieFiles-biblioteket. Navngiv din fil og tryk Overdragelse.

Når din animation er blevet godkendt i LottieFiles-biblioteket, kan du bruge LottieFiles-plugin'et i software som Adobe XD, Figma eller Sketch til at sende din animation til dit design.

Der er andre måder at bruge din LottieFiles-animation på bortset fra direkte i plugin-biblioteket. Du kan yderligere redigere din Lottie-animation fra vinduet i browseren. Det tilbyder et grundlæggende lagpanel; du kan ændre baggrundsfarven, afspilningshastigheden, billedhastigheden og et par flere ting.

Fra Handoff-vinduet kan du downloade din animation som en JSON-fil til implementering i webudvikling og design, eller du kan konvertere det til en GIF til mere konventionel brug. Du kan også integrere din animation med en HTML-indlejringskode, og der er også iOS- og Android-muligheder, så du kan sende animationen ind i dit webdesign.

Indlejring af Lottie HTML giver dig mulighed for at redigere koden for at redigere din animation. Du kan ændre farver og størrelser direkte i koden, når du tilføjer den til din hjemmeside.

Når du downloader LottieFiles-appen på din telefon, kan du scanne animationens QR-kode for at få vist animationen i appen. Du kan også bruge LottieFiles-tastaturet og slippe din dotLottie som en kommentar i visse indlæg.

Opret en Lottie i After Effects

Selvom det stadig kan føles som en ukonventionel filtype, da du ikke bare kan uploade din animation direkte til sociale medier som f.eks. du kan med en GIF eller PNG, Lottie kommer med mange fordele for webudviklere og designere, der bruger plugins eller indlejrede koder i deres designs.

Lottie- og JSON-filer sparer plads og indlæsningstid og bevarer kvaliteten sammenlignet med traditionelle filtyper. LottieFiles skaber konstant nye måder at implementere designerne på, mulighederne er uendelige.

Sådan opretter du en bevægelsesanimation ved hjælp af Procreate

Det er nemt at oprette en bevægelsesanimation i Procreate, og denne artikel viser dig, hvordan du gør det.

Læs Næste

Om forfatteren