Johan Mo

Bodymovin/Lottie är ett verktyg som alla som gillar att arbeta med Adobe After Effects borde lära sig använda i alla fall på en grundlig nivå. Det är ett enkelt sätt för en med vana att animera i After Effects att utöka sin räckvidd från film till världen av programmering och applikationsdesign.

Hernan Torrisi skapade Bodymovin som en plugin till AE som enbart exporterade HTML kod, sedan gav företaget AirBnB det resurser och de byggde Lottie, som utökade exporteringsmöjligheterna till en mängd olika programmeringskod, främst då iOS och Android kompabilitet.

Jag tänker inte djupdyka på exakt hur det fungerar, men det du behöver veta är att det ger dig en massa nya coola möjligheter att använda dina färdigheter i AE till!

I den här OER:en kommer jag kort gå igenom:

  1. Hur du kommer igång med att använda tekniken.
  2. Vad som fungerar och vad som inte fungerar
  3. Hur man exporterar en .json-fil med Bodymovin
  4. Mina egna små tips

  1. Hur man kommer igång
    Ladda ner Bodymovin via: https://aescripts.com/bodymovin/

Med fördel så kan du även ladda ner appen Lotttie Previews för Android eller iOS samt bokmarkera https://www.lottiefiles.com/. Dessa kommer hjälpa dig testa dels hur animationerna ser ut som kod och om det uppstår några problem.

  1. Vad som fungerar och vad som inte fungerar:
    Innan du blir för frälst så bör man sätta sig in i vad som fungerar och vad som inte fungerar. Generellt sett så fungerar basverktygen, men inte de mer filmiska sakerna som vissa blandningsinställningar etc.
    Sök noggrant igenom http://airbnb.io/lottie/supported-features.html#supported-features och sätt dig in i hur du kan jobba runt detta. Dock skall sägas att Lottie fortfarande är under konstant uppdatering så många saker som inte fungerar idag kan komma att implementeras i framtiden!

Det du kommer göra här är ju vektoranimation. Som du kanske vet har Adobe även i vektorvärlden ett program som är mer eller mindre bransch-standard, Illustrator. Man kan ju rita shapes direkt i After Effects, men det är inte lika optimerat för det ändamålet, så med fördel ritar du dina shapes i Illustrator och expoterar dem till After Effects, om du vill använda komplexare former än basformerna. Som tur är så är detta en enkel process att exportera emellan programmen:

Här har jag gjort en enkel animation på en elips som snurrar 180 grader på

1 sekund, och plockat fram Bodymovins renderfönster via: Window>Extentions>Bodymovin

Bocka i vilken komposition du vill använda och sätt en exportdestination:

Öppna Settings genom att klicka på kugghjulet, här finns det en hel del inställningar som man kan bocka i beroende på vad din komposition innehåller och vad du ska exportera till:

Du behöver inte använda några speciella inställningar här, men ibland så krävs det för vissa syften.
Split: Delar upp exporteringen i flera .json filer varje X sekund. Detta är bra om man har stora filer eller vill ha specifika delar av hela kompositionen separerade
Glyphs: Gör om typsnitt till shapes

Hidden: Exportera även lager som är gömda
Guides: Exportera även guide-lager

Extra Comps: aktivera om du har aniamtionsuttryck som pekar mot kompositioner utanför den specifika kompositionen du nu exporterar

Assets: Rasera eventuella bildfiler som finns i kompositionen (ej vectorfiler, detta gäller png/jpg).

Standalone: Exporterar filen med en inbyggd spelare så att du inte behöver öppna filen i Lottiepreviews. Kan vara bra när du skickar till mindre tekniska uppdragsgivare t.ex.
Demo: Exporterar som en HTML fil så att du kan pröva den lokalt på en server t.ex.

AVD: Exporterar som en XML fil för Android Vector Drawable.

När du avgjort om du behöver göra några specifika ändringar, vilket jag inte känner behövs för denna korta animation, så kan vi sätta igång med renderingen.

Renderingen går i regel väldigt fort, max ett par sekunder. När den är klar kommer du tillbaka till renderingsfönstret. Då kan du välja preview läget och komma hit:

Klicka på Current Renders och välj vilken rendering du vill previewa.
Här kan du bläddra igenom animationen och ta snapshots på specifika frames.

Här bör du dock gå ett steg till för att säkerställa att animationen fungerar för den plattform som den ska befinna sig på, som sagt tidigare så fungerar inte allt som hela Loiitebiblioteket stödjer på Android och främst iOS har en del begränsningar.

Detta gör du enkelt genom att gå in på: https://www.lottiefiles.com/preview

Dra bara in json filen hit och så laddar den in:

Här kan du byta bakgrundsfärg etc, och du ser animationen i korrekt framerate.
Främst så kan du använda QR-koden för att med din Android eller iOS app Lottie Preview se så att animationen fungerar på dessa plattformar också.

Om något inte skulle fungera som du tänkt dig så har även Android appen en jätte bra funktion som ger dig varningar om vad som är fel, den känner inte av alla fel, men de vanligaste känner den oftast och det hjälper dig mycket.

Annars kan du använda dig av https://airbnb.io/lottie/supported-features.html igen och gå igenom vad det skulle kunna vara som bråkar.

Hittar du inte felet men hjälp av detta så får man ta till mer traditionell felsökning. Vad fungerar och vad fungerar inte. Använd med fördel divide and conquer principen och bryt ner problemet i mindre och mindre beståndsdelar, prova om de fungerar separat tills du hittar felet/ felen.

  1. Mina egna små tips

Lär dig av andra.
På youtube och på olika bloggar samt så klart https://airbnb.io/lottie/ och https://github.com/airbnb/lottie-web/wiki som är de officiella sidorna, så finns det väldigt mycket bra information om hur du använder Lottie. Det finns även ett litet community runt https://www.lottiefiles.com/ där folk laddar upp sina egna json filer och After Effects projekt under CC licenser. Det är väldigt givande att se hur andra tänker när de bygger sina AE-projet eller bara för att jämföra olika estetiska stilar, timingar och för att få inspiration.

Optimera dina filer

För animationer som ska in i mobila plattformar främst så behöver de vara så kompakta och små filer som möjligt.
Använd parenting funktionen så mycket du kan. Det gör ju så att barnen inte behöver spara information om var de befinner sig i en keyframe utan får det från föräldern. Animera paths med keyframes endast när du verkligen behöver, när du gör det får varje vertex data på varje keyframe, vilket tar upp mycket data.

Försök alltså att hitta snåla lösningar hela tiden.
Lottie själva går in på optimering och annat här: https://airbnb.io/lottie/after-effects/general-tips.html (AirBnB, 2019)

Källor:
AirBnB, C. (2019). General tips & guidelines · Lottie. [online] Airbnb.io. Available at: https://airbnb.io/lottie/after-effects/general-tips.html [Accessed 18 Jan. 2019].