Hur man skapar en LottieFiles-animation i After Effects

LottieFiles skapade en snabb, skalbar, efterrenderad redigerbar filtyp, och det är lätt för dig att engagera dig och skapa animationer i detta format. Genom att använda Adobe After effects och några plugins kan du vara en del av den senaste filtypshypen: Lottie.

Vad är en Lottie?

En Lottie, eller dotLottie, är en filtyp som tar webbutvecklare med storm. Du kanske har gjort animationer för att inkludera i dina designs, oavsett om de är för sociala medier, webbdesign eller UX- och UI-design. Och du sparar förmodligen dina animationer som GIF-, SVG- eller PNG-filer. En Lottie-fil är alla de goda delarna av dessa filtyper, men mindre, snabbare och lättare att redigera efter rendering.

LottieFiles är en enorm databas med förgjorda animationer sparade i Lottie- eller JSON-format. Dessa animationer återges i realtid, vilket möjliggör snabbare leverans till dina mönster. Det finns ingen väntan på att dessa filer ska laddas ner; de visas så snart sidan öppnas.

För att lära dig mer om LottieFiles, kolla in vår introduktion till Lottie.

Komma igång

Vi kommer att skapa en Lottie med hjälp av Adobe After Effects, men det finns andra program du kan använda för att skapa din Lottie-animation. Du kan använda Adobe Animate med LottieFiles-plugin för att skapa en Lottie. Du kan också konvertera en animering i SVG-format till en Lottie om du redan har gjort en animation i detta format.

After Effects är vårt bästa val, dock med tanke på att LottieFiles ursprungligen skapades för att användas i After Effects. Låt oss börja.

1. Skapa din animation

Den animerande aspekten av din Lottie är densamma som för alla andra format. Vi skapade illustrationen av vår animation med Adobe Illustrator. Detta håller lagren åtskilda och redo att importeras till After Effects. När din illustration har importerats kan du anpassa kompositionens lager för den slutliga animeringen.

Lottie-animationer körs i en kontinuerlig loop, så tänk på det för slut- och startpunkterna för din design. Animationen ska vara enkel och cirka tre sekunder lång.

2. Ladda ner plugins

Det finns två plugins du kan använda för att skapa en Lottie-fil: LottieFiles-plugin eller Bodymovin-plugin. Båda är tillgängliga för After Effects, men LottieFiles-pluginen kan också hittas i annan programvara. De gör var och en lite olika saker, men vi kommer att fokusera på LottieFiles-pluginen just nu.

För att ladda ner LottieFiles-plugin, gå till LottieFiles After Effects plugin-sida. Du hittar två nedladdningsalternativ.

Alternativet till höger kräver en Extension Manager från Anastasiy som fungerar med både Mac och Windows. När du har laddat ner Extension Manager, ladda ner ZXP-plugin från LottieFiles-sidan.

Efter att ZXP-pluginen har laddats ner, öppna Anastasiy Extension Manager, klicka Bieffekter, välj LottieFiles-plugin från listan och tryck Installera.

Tillbaka på LottieFiles-pluginsidan, ladda ner Adobe Exchange-plugin också; öppna din Creative Cloud-skrivbordsapp och installera plugin-programmet. Återgå till din färdiga animation i After Effects.

Vissa personer har ett behörighetsfel när de använder dessa plugins. För att undvika det här problemet, gå till Bieffekter > Inställningar > Skript och uttryck > Application Scripting och kryssa i rutan för Tillåt skript att skriva filer och få åtkomst till nätverk.

När detta är gjort kommer popup-fönstret för LottieFiles att be dig logga in. Om du inte redan har ett LottieFiles-konto är det nu dags att skapa ett.

3. Exportera din Lottie

Med LottieFiles-plugins installerade kan du rendera din Lottie-animation. Klicka på den färdiga animationskompositionen Fönster > Tillägg > LottieFiles. Detta kommer att få upp en popup med namnen på dina kompositioner. Klicka på grön pil bredvid namnet på din komposition kommer detta att visa Lottie-renderingsfönstret.

Efter några sekunder kommer din animation att visas i popup-fönstret. Animationen kommer att spelas i realtid på loop. Här kan du välja att spara din animation eller ladda upp din animation till LottieFiles-biblioteket.

Klickar Spara som ger dig två exportalternativ: Lottie JSON (*.json) eller dotLottie (*.lottie). DotLottie-filen är en zippad fil som innehåller metadata, som vi egentligen inte behöver för att exportera. Vi åkte med Lottie JSON.

Din exporterade fil kommer att vara en textfil, inte en visuell animationsfil; så här fungerar JSON-filer. Men tänk om du ville ha animationen redo? Låt oss se hur du kan komma åt det.

Hur du kan använda din Lottie-animation

För att ladda upp din Lottie till LottieFiles-biblioteket, klicka Ladda upp. Detta återges i några sekunder. Klicka sedan på knappen med jordklotet på. Detta öppnar LottieFiles-webbplatsen där du kan skicka in din Lottie-animation till LottieFiles-biblioteket. Namnge filen och tryck Bort med tassarna.

När din animation har godkänts i LottieFiles-biblioteket kan du använda LottieFiles-plugin i programvara som Adobe XD, Figma eller Sketch för att skicka din animation till din design.

Det finns andra sätt att använda din LottieFiles-animation förutom direkt i plugin-biblioteket. Du kan ytterligare redigera din Lottie-animation från fönstret i webbläsaren. Den erbjuder en grundläggande lagerpanel; du kan ändra bakgrundsfärg, uppspelningshastighet, bildhastighet och några fler saker.

Från Handoff-fönstret kan du ladda ner din animation som en JSON-fil för implementering i webbutveckling och design, eller så kan du konvertera den till en GIF för mer konventionell användning. Du kan också bädda in din animation med en HTML-inbäddningskod, och det finns iOS- och Android-alternativ också, så att du kan skicka animationen till din webbdesign.

Genom att bädda in Lottie HTML kan du redigera koden för att redigera din animation. Du kan ändra färger och storlekar direkt i koden när du lägger till den på din webbplats.

Genom att ladda ner LottieFiles-appen på din telefon kan du skanna animationens QR-kod för att förhandsgranska animationen i appen. Du kan också använda LottieFiles-tangentbordet och släppa din dotLottie som en kommentar i vissa inlägg.

Skapa en Lottie i After Effects

Även om det fortfarande kan kännas som en okonventionell filtyp, eftersom du inte bara kan ladda upp din animation direkt till sociala medier som du kan med en GIF eller PNG, Lottie kommer med många fördelar för webbutvecklare och designers som använder plugins eller inbäddade koder i deras mönster.

Lottie- och JSON-filer sparar utrymme och laddningstid och bevarar kvaliteten jämfört med traditionella filtyper. LottieFiles skapar ständigt nya sätt att implementera designen, möjligheterna är oändliga.

Hur man skapar en rörelseanimering med Procreate

Det är enkelt att skapa en rörelseanimation i Procreate, och den här artikeln visar hur du gör det.

Läs Nästa

Om författaren