Export efter effekter Animationer till HTML5

Animering på webben är här för att stanna. Det är i allt från de subtila rörelserna som hjälper till med att ta med oss Ui design Till liv, till helt animerade kanfasupplevelser och WebGL-experiment som utmanar vad vi en gång trodde var möjligt i webbläsaren.

Medan kreativiteten av devs och möjligheterna i webbläsare ökar, har animering på webben länge varit en fattig relation till video - något som rörelsegraferna har kontaktat med försiktighet i åratal. Kom ihåg att om du har en komplex sida för att behålla, din webbhotell Tjänsten måste vara på punkt.

• Pros guide till UI-design

Utvecklare har åberopat bibliotek som Greensock och Snap.svg för att göra den tunga lyftningen i reproducerande animering via JavaScript. Medan dessa verktyg har gett mycket flexibilitet, kan de inte jämföras med precision och subtilitet av animering som kan uppnås med After Effects cc s egna tidslinje och lätta grafer. Från ett webbperspektiv är efterverkningar mycket väl lämpat för att tweaking och prova rörelse innan den förbinder den för att koda.

Stiga på Bodmovin , en banbrytande förlängning för Adobe After Effects som exporterar animering direkt från After Effects till JavaScript som ska visas och manipuleras i webbläsaren. Skapad av Hernan Torrisi Bodymovin tar bort många av barriärerna mellan animator och utvecklare. På basnivå fungerar pluginen som den magiska "renderna för webben" -funktion Adobe Glömt. Vid sin mest avancerade öppnar det nya möjligheter för interaktiv animering.

Bodymovin är en länk i verktygskedjan, plugins och system som stiger för att möta några av dessa nya möjligheter. Airbnbs Lottie och Facebooks keyframes Båda bygger på dessa fundament - och de ger slutligen det mest kraftfulla animationsverktyget till webben.

Varför använda Bodymovin?

SVG har tagit över internet och tagit med det förväntan att allt ska vara högkvalitativt, ljust och skalbart. Bodymovin gör allt i din komposition till vackert skarp svg som håller sin vektorkvalitet på vilken storlek som helst. Inte mer kompromissa med att lätta upp den GIF eller tvinga dina användare att ladda uppblåsta videofiler.

Förutom att förenkla processen med att exportera dina animationer öppnar Bodymovin väldigt mer potential för utvecklare att bli kreativ med nya interaktiva upplevelser. Kolla in CodePen för några av de fantastiska sätten som förlängningen har använts - från interaktiva IK-riggar för att animera-som-du-typ interaktiv text.

För att ytterligare förenkla din webbdesprocess, prova en Website Builder .

Exporterad animering kan manipuleras i webbläsaren som alla andra element, så att vi kan tänka på animering som ett interaktivt och experimentellt verktyg inom webbdesign. Och nu på grund av Bodymovin, har du aldrig varit enklare. I den här handledningen lär du dig att exportera en animering från After Effects och skapa en enkel looping-animering som svarar på användarens klick.

Så här förbereder du dina After Effects-filer

Stöd för After Effects-funktioner har förbättrats kraftigt och du kan förvänta dig att få ganska bra resultat direkt ur lådan. Med det sagt kommer dina fina flygande 3D-lager inte att spela bra, så var medveten om gränserna innan du börjar. Innan du börjar ett projekt, ladda alltid den senaste versionen av Bodymovin och kolla github-sidan för att se vilka funktioner som stöds för närvarande.

Var inte för hastig att flytta på den roliga delen ... Tidiga filer gör ett snyggt sinne. I det här fallet hjälper de också till att ta några av det extra arbetet från webbläsaren och ge dig silkeslen slät uppspelning. För det första vill du se till att ditt innehåll är i After Effects-formlagren för full vektorkraft. För att konvertera någon illustratörsfil för att forma lager kan du helt enkelt högerklicka och välja Skapa former från Vector Layer. Eventuella lager som inte är former i detta skede kommer sedan att omvandlas till bilder och de kommer inte att göras som vektorer.

Därefter, ha en check genom dina lager och sublayers; Det finns en bra chans att du kan förenkla innehållet i formen utan att offra någonting. Försök att skära ner antalet grupper, vägar och fyller till bara de nakna väsentliga.

Var försiktig med masker

Masker är ett enkelt sätt att glida upp i detta skede. Var medveten om att alfasmasker kommer att fungera med SVG Renderer men kommer inte att dyka upp om du väljer att byta till duk. Masker kan vara dyra i prestanda så använd dem effektivt.

Tolkning

Bodymovin arbetar i två delar - en efterverkningsförlängning som konverterar animationsdata till en JSON-fil och en Bodymovin.js-spelare som ska inkluderas i din webbsida som kan tolka den här filen och göra den i webbläsaren.

Tänk dina filer är bra att gå? Öppna BodyMovin-förlängningen genom fönstret och GT; Förlängningar och sedan bodymovin.

När du har träffat uppdatering ser du en lista över alla kompositioner i projektet efter Effects. Välj din valda komp och välj sedan en destinationsmapp inuti ditt webbprojekt. När du är glad klickar du bara på Render och titta på magiken hända. När det är klart får du ett "färdigt" meddelande. Grattis! Du har just exporterat en JSON-fil med all information som spelaren behöver återskapa animationen.

För att testa din nybyggda animering, klicka på Preview & GT; Nuvarande gör och kom ihåg att skrubba genom tidslinjen som du kan upptäcka något som ser lite annorlunda ut än vad du förväntar dig. Om du upptäcker några problem hoppa tillbaka och kontrollera dina lager - det kan vara en ostödd funktion eller ett uttryck som används i After Effects.

Några efterföljande plugins som gummishose stöder nu Bodymovin. Gummihose använder sig av styrlager och dolda lager. För att aktivera dessa, klicka bara på inställningarna COG bredvid din valda komposition och kryssa de funktioner du behöver.

Om allt ser bra ut är det bara en sak du behöver göra innan du lämnar efter effekter bakom. I detta skede borde du ha en ny data.json-fil som beskriver din animering, men ingen Bodymovin-spelare för att tolka den. I förlängningen klickar du på knappen "Hämta spelarens" längst upp till höger och spara den med din JSON-fil.

Ladda animationen

Nu har du allt du behöver, låt oss hoppa direkt i koden och lägga ner grunderna för att få din animering som visas på sidan.

Gör först en ny behållare #anim_container att hålla din animering. Du måste också inkludera bodymovin.js fil före stängningskroppen. Nästa berätta för Bodymovin allt om din animering och ladda den i den nya behållaren.

Låt oss gå igenom installationen steg för steg:

 var container = document.getElementby ('anim_container');
// Ställ in vår animering

var animdata = {
behållare: behållare,
Renderer: "SVG",
autoplay: sant,
Loop: sant,
Path: 'data.json'
};
var anim = bodymovin.adanimation (animdata); 

Du måste definiera alla parametrar för animationen. Berätta för Bodymovin den behållare du vill ha animationen att ladda in och sedan berätta för att göra animationen som SVG-element. Därefter berätta animationen att spela så snart den är laddad och att du vill att den ska slinga tillbaka till början när den är klar.

Path-fastigheten berättar Bodymovin-spelaren där du hittar JSON-datafilen för animationen. På grund av Cross-Origin Resource Sharing Policy (CORS) fungerar den teknik du använder för att komma åt JSON-filen bara om du är på en server eller lokal server. För att arbeta lokalt kan du göra den data.json till en Javascript-fil som tilldelar objektet till en variabel. I så fall kan din installation se ut så här:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
var container = document.getelementby ('anim_container');
// Ställ in vår animering
var animdata = {
behållare: behållare,
Renderer: "SVG",
autoplay: sant,
Loop: sant,
AnimationData: Data
};
var anim = bodymovin.adanimation (animdata);
& lt; / script & gt; 

Uppdatera sidan och din animering ska spelas inuti behållaren. Välj med dina dev-verktyg och du får se att varje element i animationen nu finns i & lt; G & GT; Taggar, och omvandlas i realtid.

Ser fantastiskt, eller hur? Du borde nu ha en vacker, skarp animering som visar i webbläsaren (utan eländig videodel i sikte ...). Animationen kommer alltid att skala för att passa sin behållare, så fortsätt och blåsa upp det!

Bodymovin har en rad kraftfulla metoder för att styra animationen efter det att den har laddats. Ringer en metod som Anim.Pause () eller Anim.SetDirection () kommer att göra det möjligt för dig att manipulera uppspelning på olika sätt. Låt oss titta på några exempel:

• Anim.SetDirection (-1) kommer att spela animationen i omvänd
• Anim.Pause () och anim.play () kommer att börja och stoppa animationen
• Anim.SetSpeed ​​(0.5) kommer att spela animationen med halv hastighet

Lägg till interaktion

I det här nästa steget utforskar du några av de olika sätten att lägga till interaktion till dina animeringar via JavaScript. I det här exemplet exporterar vi en efterverkningsanimering med två sektioner: sektion A och avsnitt B. Avsnitt A Användarramar från en till 20 (triangeln håller sin pogo-pinne) avsnitt B Användar ramar från 20 till 40 (triangeln hoppar upp och ner på en pogo pinne).

Nu vill du spela avsnitt A på en slinga och sedan (endast efter att användarklick) spelar och loop avsnitt B. Du kan använda sig av Playsegments-egenskapen för att dela animationer upp på detta sätt. Denna metod tar två argument - en array med start- och slutvärden och en andra boolean-isram. Att ställa in detta till sant kommer att berätta för animationen för att läsa start- och slutvärdena som ramar, medan False kommer att berätta för att läsa dessa värden som tid.

 Anim.Pause ();
Anim.spelsegments ([0,20], sant); 

Lägga till detta berättar BodyMovin att pausa vid den första ramen och spela bara animationen från 0 till 20 ramar. När du ställer in din animering med a Loop: sant Fastighet Detta fortsätter att spela avsnitt A om och om igen.

Låt oss ställa upp hela exemplet. Du kommer att använda två segment av en animering för det här exemplet, så du skapar två funktioner:

 var container = document.getElementby ('anim_container');
// Ställ in vår animering
var animdata = {
behållare: behållare,
Renderer: "SVG",
Autoplay: False,
Loop: sant,
Path: 'data.json'
};
var anim = bodymovin.adanimation (animdata);
// när animationen är laddad kör vår FIRSTLOOP-funktion
anim.addeventlistener ('Domloaded', Firstloop);
// Skapa våra uppspelningsfunktioner
funktion firstloop () {
Anim.spelsegments ([0,20], sant);
};
funktion andraLoop () {
Anim.spelsegments ([20,40], sant);
};
// Lyssna på ett klickhändelse
container.Addeventlistener ('Click', Function (Event) {
anim.addeventlistener ('loopcomplete', secondloop);
}); 

Bra jobbat! Nu kommer din animering att fortsätta looping tills användaren klickar på den, så startar den andra slingan. Det enda problemet är nu att ett hopp som det här är mycket abrupt och det kan förstöra animationens jämnhet.

En idealisk situation är att inkludera en tredje sektion till animationen, en som övergår från att hålla pogo sticka till hoppning på den. Nu kommer din struktur att se ut så här:

• first - Frame 0 till 20
• övergång - Ram 20 till 30
• sortloop - Ram 30 till 50

Vi vill ha din animering att stanna i den första slingan tills den är klickad. Vid den tiden kommer du att vilja vänta på slutet av slingan du är i och flytta till övergången. Efter att övergången är klar Flytta till din andra slinga. Det här låter komplicerat men stanna hos mig! Här är din kod i sin helhet:

 var container = document.getElementby ('anim_container');
// Ställ in vår animering
var animdata = {
behållare: behållare,
Renderer: "SVG",
Autoplay: False,
Loop: sant,
Path: 'data.json'
};
var anim = bodymovin.adanimation (animdata);
// när animationen är laddad kör vår FIRSTLOOP-funktion
anim.addeventlistener ('Domloaded', Firstloop);
// Skapa våra uppspelningsfunktioner
funktion firstloop () {
Anim.spelsegments ([0,20], Sann);
};
Funktionstransition () {
Anim.pleSegments ([20,30], sant);
anim.RemoveEventlistener ('loopcomplete');
anim.addeventlistener ('loopcomplete', secondloop);
};
funktion andraLoop () {
Anim.spelsegments ([30,100], sant);
anim.RemoveEventlistener ('loopcomplete');
};
// Lyssna på ett klickhändelse
container.Addeventlistener ('Click', Function (Event) {
anim.addeventlistener ('loopcomplete', övergång);
}); 

På Klicka, använder du en loopcomplete Lyssnare att vänta tills du når den sista ramen på slingan och kör sedan din övergång() fungera. Här tar du bort den sista lyssnaren, spelar nästa uppsättning ramar och gör sedan detsamma igen. Efter att övergången är klar kommer det att ringa andraLoop () .

Det är allt!

Du har jobbat med några av funktionerna i Bodymovin idag, men om du är intresserad av att lära dig mer om plugin, kan du hitta en mängd information om Bodymovin github sida. För fler exempel, kolla in den ständigt imponerande Bodymovin Codepen-samlingen.

Förhoppningsvis kommer denna handledning att ha gett dig en uppfattning om de olika sätten som du kan kombinera användningen av efterverkningar och bodymovin för att producera lite supercool animation för webben!

Du kan nu konfigurera animering som ska exporteras för webben, ta med dina exporterade filer i webbläsaren och gör din animering mottaglig för att klicka. Tänk utöver de mp4-filer som du tidigare utnyttjade och titta på BodyMovin för att skapa mycket rikare webbupplevelser i framtiden.

Att kunna involvera animatörer i utvecklingsprocessen blir allt viktigare, och området för webbanimering rör sig otroligt snabbt. Med en ständigt växande samling av nya tillägg kan plugins och ramar, animatörer och utvecklare förvänta sig att denna process blir lättare och bättre över tiden. Jag kan inte vänta med att se vad framtiden håller.

Har många filer tillbaka? Kolla in vår molnlagring plockar.

Denna artikel uppträdde ursprungligen i nätmagasin år 2017. Prenumerera här .

Läs mer:

• Skapa och animera SVG-polygoner
• 14 fantastiska Adobe After Effects plugins
• Skapa storyboards för webbanimationer