Eksporter etter effekter animasjoner til HTML5

Animasjon på nettet er her for å bli. Det er i alt fra de subtile bevegelsene som bidrar til å bringe vår UI Design Til livet, til fullt animerte lerretopplevelser og webgl-eksperimenter som utfordrer det vi en gang trodde var mulig i nettleseren.

Mens kreativiteten til devs og evnen til nettlesere øker, har animasjon på nettet lenge vært et dårlig forhold til video - noe som bevegelsesgrafikkfellesskapet har nærmet seg med forsiktighet i årevis. Husk at hvis du har et komplekst nettsted for å opprettholde, din Web Hosting. Tjenesten må være på punkt.

• Pros Guide til UI Design

Utviklere har stolt på biblioteker som Greensock og Snap.SVG for å gjøre den tunge løftingen i å reprodusere animasjon gjennom JavaScript. Mens disse verktøyene har gitt mye fleksibilitet, kan de ikke sammenligne med presisjonen og subtiliteten av animasjon som kan oppnås ved hjelp av Etter effekter CC. egen tidslinje og lette grafer. Fra et webperspektiv er ettervirkninger veldig godt egnet for å justere og prøve ut bevegelse før du forplikter det til koden.

Tast inn Bodymovin. , en banebrytende utvidelse for Adobe After Effects som eksporterer animasjon direkte fra After Effects til JavaScript som skal vises og manipuleres i nettleseren. Laget av Hernan Torrisi. , BodyMovin fjerner mange av barrierer mellom animator og utvikler. På grunnnivået fungerer pluginet som den magiske "Render for web" -funksjonen Adobe Glemt. På sitt mest avanserte åpner det nye muligheter for interaktiv animasjon.

BodyMovin er en lenke i kjeden av verktøy, plugins og systemer som stiger for å møte noen av disse nye mulighetene. Airbnbs Lottie. og Facebooks keyframes. Begge bygger på disse grunnene - og de tar endelig det kraftigste animasjonsverktøyet til nettet.

Hvorfor bruke BodyMovin?

SVG har tatt over Internett og brakt med det forventningen om at alt skal være høy kvalitet, lys og skalerbar. BodyMovin gjør alt i sammensetningen din til vakkert skarp SVG som holder vektorkvaliteten i alle størrelser. Ikke mer kompromittere for å lyse opp som GIF eller tvinge brukerne til å laste opp oppblåste videofiler.

I tillegg til å forenkle prosessen med å eksportere animasjonene dine, åpner BodyMovin måte mer potensial for utviklere å bli kreative med nye interaktive opplevelser. Sjekk ut Codepen for noen av de fantastiske måtene The Extension har blitt brukt - fra interaktive IK-rigger for å animere-som-du-type interaktiv tekst.

For å forenkle Web Dev-prosessen, prøv en Nettstedbygger .

Eksportert animasjon kan manipuleres i nettleseren som et annet element, slik at vi kan tenke på animasjon som et interaktivt og eksperimentelt verktøy innen webdesign. Og nå på grunn av BodyMovin, har du aldri vært enklere å bringe animasjonene dine på nettet. I denne opplæringen lærer du hvordan du kan eksportere en animasjon fra ettervirkninger og skape en enkel looping animasjon som reagerer på brukerens klikk.

Slik forbereder du på After Effects-filer

Støtte for Effects-funksjoner har forbedret seg sterkt, og du kan forvente å få ganske gode resultater rett ut av esken. Når det er sagt, vil dine fancy flygende 3D-lag ikke spille fint, så vær oppmerksom på grensene før du kommer i gang. Før du starter et prosjekt, last alltid ned den nyeste versjonen av BodyMovin og sjekk Github-siden for å se hvilke funksjoner som støttes for øyeblikket.

Ikke vær for rask til å flytte på den morsomme delen ... ryddige filer gjør et ryddig sinn. I dette tilfellet vil de også bidra til å ta noe av det ekstra arbeidet vekk fra nettleseren og gi deg silkeaktig glatt avspilling. For det første vil du sørge for at innholdet ditt er i After Effects Shape Layers for full vektorkraft. Hvis du vil konvertere en illustratørfil til å forme lag, kan du bare høyreklikke og velge Lag former fra vektorlag. Eventuelle lag som ikke er former på dette stadiet, vil da bli omgjort til bilder, og de vil ikke bli gjengitt som vektorer.

Deretter har du en sjekk gjennom lagene dine og underlayers; Det er en god sjanse for at du kan forenkle innholdet i formen uten å ofre noe. Prøv å kutte ned antall grupper, stier og fylles til bare de bare nødvendighetene.

Ta vare på masker

Masker er en enkel måte å glide på dette stadiet. Vær oppmerksom på at alfa-masker vil fungere med SVG Renderer, men vil ikke vises hvis du velger å bytte til lerret. Masker kan være dyre i ytelse, så bruk dem effektivt.

Gjengivelse

BodyMovin fungerer i to deler - en ettervirkende utvidelse som konverterer animasjonsdata til en JSON-fil og en bodymovin.js-spiller som skal inkluderes i websiden din som kan tolke denne filen og gjøre den i nettleseren.

Tenk filene dine er gode å gå? Åpne BodyMovin-utvidelsen gjennom Window & GT; Utvidelser og deretter bodymovin.

Når du rammer oppdateringen, vil du se en liste over alle komposisjonene i dette prosjektet etter effekter. Velg din valgte komp og velg deretter en destinasjonsmappe inne i ditt webprosjekt. Når du er glad, klikker du bare og se på magien. Når det er gjort, får du en "ferdig" melding. Gratulerer! Du har nettopp eksportert en JSON-fil med all den informasjonen som spilleren trenger for å gjenskape animasjonen.

For å teste din nylig eksporterte animasjon, klikk på Preview & GT; Nåværende gjøre og husk å skrubbe gjennom tidslinjen, da du kanskje ser noe som ser litt annerledes ut på hva du forventer. Hvis du ser på noen problemer, hopper du tilbake og kontroller lagene dine - det kan være en ikke-støttet funksjon eller et uttrykk som brukes i ettervirkninger.

Noen ettervirkningsplugger som Rubberhose støtter nå BodyMovin. Rubberhose gjør bruk av styrelag og skjulte lag. For å aktivere disse, klikker du bare på Innstillinger COG ved siden av den valgte sammensetningen og merk av de funksjonene du trenger.

Hvis alt ser bra ut, er det bare en ting du trenger å gjøre før du forlater ettervirkninger bak. På dette stadiet bør du ha en fersk data.json-fil som beskriver animasjonen din, men ingen bodymovin-spiller for å tolke den. I utvidelsen, klikk på "Få spillerens" -knappen øverst til høyre og lagre den med JSON-filen.

Legg animasjonen

Nå har du alt du trenger, la oss hoppe rett inn i koden og legge ned grunnleggende for å få animasjonen som vises på siden.

Først gjør en ny beholder #Anim_Container. å holde animasjonen din. Du må også inkludere bodymovin.js. fil før sluttkroppen. Neste Fortell BodyMovin alt om animasjonen din og last den inn i den nye beholderen.

La oss gå gjennom oppsettet trinnvis:

 var container = dokument.getElementbyid ('anim_container');
// Sett opp animasjonen vår

var animdata = {
Container: Beholder,
Renderer: 'SVG',
Autoplay: True,
LOOP: SANT,
Sti: 'data.json'
};
var anim = bodymovin.loadanimation (animdata); 

Du må definere alle parametrene for animasjonen. Fortell BodyMovin Containeren du vil at animasjonen skal lastes inn, og fortell det å gjøre animasjonen som SVG-elementer. Neste, fortell animasjonen å spille så snart den er lastet og at du vil at den skal leke tilbake til starten når den er ferdig.

Path-egenskapen forteller BodyMovin-spilleren hvor du finner JSON-datafilen for animasjonen. På grunn av Ressursdelingspolicy (Cors), vil teknikken du bruker for å få tilgang til JSON-filen, bare fungere hvis du er på en server eller lokal server. For å jobbe lokalt kan du gjøre det til data.json til en JavaScript-fil som tilordner objektet til en variabel. I så fall kan oppsettet ditt se slik ut:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
var container = document.getelementbyid ('anim_container');
// Sett opp animasjonen vår
var animdata = {
Container: Beholder,
Renderer: 'SVG',
Autoplay: True,
LOOP: SANT,
AnimationData: Data
};
var anim = bodymovin.loadanimation (animdata);
& lt; / script & gt; 

Oppdater siden og animasjonen din skal spille inne i beholderen. Velg med DEV-verktøyene dine, og du vil se at hvert element i animasjonen nå finnes i & lt; g & gt; Tags, og blir forvandlet i sanntid.

Ser fantastisk ut, ikke sant? Du bør nå ha en vakker, skarp animasjon som viser i nettleseren (uten en elendig videotag i sikte ...). Animasjonen vil alltid skalere for å passe dens beholder, så fortsett og blås den opp!

BodyMovin har en rekke kraftige metoder for å kontrollere animasjonen etter at den har lastet inn. Ringe en metode som anim.pause () eller anim.SetDirection () vil gjøre det mulig for deg å manipulere avspilling på forskjellige måter. La oss se på noen eksempler:

• anim.SetDirection (-1) vil spille animasjonen i omvendt
• anim.pause () og anim.play () vil starte og stoppe animasjonen
• anim.setpeed (0,5) vil spille animasjonen med halv hastighet

Legg til interaksjon

I dette neste trinnet vil du utforske noen av de forskjellige måtene for å legge til interaksjon på animasjonene dine gjennom JavaScript. I dette eksemplet eksporterer vi en After-animasjon med to seksjoner: Seksjon A og Seksjon B. Seksjon En bruksrammer fra en til 20 (trekant holder sin POGO-pinne) Seksjon B Brukerrammer fra 20 til 40 (trekant hopper opp og ned på en pogo-pinne).

Nå vil du spille av seksjon A på en løkke da (bare etter at brukeren klikker) spiller og loop-seksjon B. Du kan benytte seg av spillegruppen til å dele animasjoner opp på denne måten. Denne metoden vil ta to argumenter - en matrise med start- og sluttverdier og en annen boolsk - Iframe. Innstilling av dette til sant vil fortelle animasjonen å lese start- og sluttverdiene som rammer, mens falske vil fortelle det å lese disse verdiene som tiden.

 anim.pause ();
anim.playsegments ([0,20], sant); 

Å legge til dette forteller BodyMovin å pause på den første rammen og spille bare animasjonen fra 0 til 20 rammer. Som du setter opp animasjonen din med a Loop: TRUE Eiendom Dette vil fortsette å spille av seksjonen igjen og igjen.

La oss sette opp hele eksempelet. Du bruker to segmenter av en animasjon for dette eksemplet, så du vil lage to funksjoner:

 var container = dokument.getElementbyid ('anim_container');
// Sett opp animasjonen vår
var animdata = {
Container: Beholder,
Renderer: 'SVG',
Autoplay: False,
LOOP: SANT,
Sti: 'data.json'
};
var anim = bodymovin.loadanimation (animdata);
// når animasjonen er lastet, kjør vår FirstLoop-funksjon
anim.addeventlistener ('domloaded', firstloop);
// Opprett våre avspillingsfunksjoner
Funksjon FirstLoop () {
anim.playsegments ([0,20], sant);
};
Funksjon andreLoop () {
anim.playsegments ([20,40], sant);
};
// Lytt etter et klikkhendelse
container.addeventlistener ('klikk', funksjon (hendelse) {
anim.addeventlistener ('loopcomplete', secondloop);
}); 

Bra jobbet! Nå vil animasjonen din holde looping til brukeren klikker på den, så starter den andre sløyfen. Det eneste problemet nå er at et hopp som dette er veldig brått, og det kan ødelegge animasjonens glatthet.

En ideell situasjon er å inkludere en tredje del til animasjonen, en som overganger fra å holde Pogo holde seg til å hoppe på den. Nå vil strukturen din se slik ut:

• FirstLoop. - Ramme 0 til 20
• overgang - Ramme 20 til 30
• SecondLoop. - Ramme 30 til 50

Vi vil at animasjonen din skal være i den første sløyfen til den er klikket. På det tidspunktet vil du vente på slutten av løkken du er i og flytte på overgangen. Etter at overgangen er ferdig, flytt til din andre løkke. Dette høres komplisert ut, men vær med meg! Her er koden din i sin helhet:

 var container = dokument.getElementbyid ('anim_container');
// Sett opp animasjonen vår
var animdata = {
Container: Beholder,
Renderer: 'SVG',
Autoplay: False,
LOOP: SANT,
Sti: 'data.json'
};
var anim = bodymovin.loadanimation (animdata);
// når animasjonen er lastet, kjør vår FirstLoop-funksjon
anim.addeventlistener ('domloaded', firstloop);
// Opprett våre avspillingsfunksjoner
Funksjon FirstLoop () {
anim.playsegments ([0,20], sant);
};
Funksjonsovergang () {
anim.playsegments ([20,30], sant);
anim.RemoveeventListener ('loopcomplete');
anim.addeventlistener ('loopcomplete', secondloop);
};
Funksjon andreLoop () {
anim.playsegments ([30,100], sant);
anim.RemoveeventListener ('loopcomplete');
};
// Lytt etter et klikkhendelse
container.addeventlistener ('klikk', funksjon (hendelse) {
anim.addeventlistener ('loopcomplete', overgang);
}); 

På klikk, bruker du en loopcomplete. lytter til å vente til du kommer til den siste rammen av sløyfen, og kjør din overgang() funksjon. Her fjerner du den siste lytteren, spiller neste sett med rammer og gjør det samme igjen. Etter at overgangen er ferdig, vil den ringe SecondLoop () .

Det er det!

Du har jobbet med noen av funksjonene i BodyMovin i dag, men hvis du er interessert i å lære mer om plugin, kan du finne en last med informasjon på BodyMovin Gitub. side. For flere eksempler, sjekk ut den stadig imponerende BodyMovin Codepen-samlingen.

Forhåpentligvis vil denne opplæringen ha gitt deg en ide om de ulike typer måter du kan kombinere bruken av Effects og BodyMovin for å produsere litt supercool animasjon for nettet!

Du kan nå sette opp animasjon som skal eksporteres for nettet, ta med de eksporterte filene til nettleseren og gjør animasjonen din responsive til å klikke. Tenk utover MP4-filene som du tidligere brukte og se på BodyMovin for å skape mye rikere webopplevelser i fremtiden.

Å være i stand til å involvere animatorer tett i utviklingsprosessen blir stadig viktigere, og feltet av web animasjon beveger seg utrolig raskt. Med en stadig voksende samling av nye utvidelser, kan plugins og rammer, animere og utviklere forventer at denne prosessen blir enklere og bedre over tid. Jeg for en kan ikke vente med å se hva fremtiden holder.

Fikk mange filer for å sikkerhetskopiere? Sjekk ut vår skylagring plukker.

Denne artikkelen opprinnelig dukket opp i Net Magazine. i 2017. Abonner her .

Les mer:

• Skape og animere SVG polygoner
• 14 Fantastisk Adobe. After Effects Plugins.
• Lag storyboards for web animasjoner