Eksporter efter effekter animationer til HTML5

Animation på nettet er her for at blive. Det er i alt fra de subtile bevægelser, der hjælper med at bringe vores UI Design. Til livet, til fuldt animerede lærredserfaringer og WebGL-eksperimenter, der udfordrer det, vi engang troede, var muligt i browseren.

Mens kreativiteten af ​​devs og kapaciteterne i browsere er stigende, har animation på nettet længe været et dårligt forhold til video - noget, som Motion Graphics-fællesskabet har kontaktet med forsigtighed i årevis. Husk at hvis du har et komplekst sted at vedligeholde, din Web Hosting. service skal være på punkt.

• Fordelene guide til UI design

Udviklere har påberåbt biblioteker som Greensock og Snap.svg til at gøre den tunge løft i reproduktion af animation via JavaScript. Mens disse værktøjer har givet stor fleksibilitet, kan de ikke sammenligne med den præcision og subtilitet af animation, der kan opnås ved hjælp af Eftervirkninger CC. egen tidslinje og lette grafer. Fra et webperspektiv er eftervirkninger meget velegnet til at tilpasse og prøve motivet, før det begår den til kode.

Gå ind Bodymovin. , en banebrydende udvidelse til Adobe After Effects, der eksporterer animation direkte fra eftervirkninger til JavaScript, der skal vises og manipuleres i browseren. Lavet af Hernan Torrisi. , Fjerner BodyMovin mange af hindringerne mellem animator og udvikler. På dets basisniveau fungerer plugin som den magiske 'Render for Web' funktion Adobe Glemt. På sit mest avancerede åbner det nye muligheder for interaktiv animation.

BodyMovin er et link i kæden af ​​værktøjer, plugins og systemer, der stiger for at imødekomme nogle af disse nye muligheder. Airbnb's Lottie. og Facebook's keyframes. Begge bygger på disse fundamenter - og de bringer endelig det mest magtfulde animationsværktøj til internettet.

Hvorfor bruge BodyMovin?

SVG har overtaget internettet og bragt med det forventning om, at alt skal være høj kvalitet, lys og skalerbar. BodyMovin gør alt i din sammensætning til smukt skarp SVG, der holder sin vektorkvalitet i enhver størrelse. Ikke mere kompromitterende med at lette det GIF eller tvinge dine brugere til at indlæse oppustede videofiler.

Udover at forenkle processen med at eksportere dine animationer åbner BodyMovin sig langt mere potentiale for udviklere for at blive kreative med nye interaktive oplevelser. Tjek CodePen for nogle af de fantastiske måder, hvorpå udvidelsen er blevet brugt - fra interaktive IK Rigs til ANIMAT-AS-YOU-type interaktiv tekst.

For yderligere at forenkle din web-dev-proces, prøv en Website Builder. .

Eksporteret animation kan manipuleres i browseren som ethvert andet element, så vi kan tænke på animation som et interaktivt og eksperimentelt værktøj inden for webdesign. Og nu på grund af BodyMovin, har du aldrig været lettere at bringe dine animationer til internettet. I denne vejledning lærer du, hvordan du eksporterer en animation fra eftervirkninger og opretter en simpel looping animation, der svarer til brugerens klik.

Sådan forbereder du dine eftervirkninger

Støtte til eftervirkninger Funktioner er forbedret stærkt, og du kan forvente at få ganske gode resultater lige ud af boksen. Når det er sagt, vil dine fancy flyvende 3D-lag ikke spille godt, så vær opmærksom på grænserne, før du kommer i gang. Før du begynder et projekt, skal du altid downloade den nyeste version af BodyMovin og kontrollere Github-siden for at se, hvilke funktioner der aktuelt understøttes.

Vær ikke for forhastet at flytte på den sjove del ... Tidy filer gør et ryddeligt sind. I dette tilfælde vil de også hjælpe med at tage noget af det ekstra arbejde væk fra browseren og give dig silkeagtig glat afspilning. For det første vil du sørge for, at dit indhold er i eftervirkning, formlag for fuld vektorkraft. For at konvertere enhver illustrator-fil til at forme lag kan du blot højreklikke og vælge Opret figurer fra Vector Layer. Eventuelle lag, der ikke er former på dette stadium, vil derefter blive omdannet til billeder, og de vil ikke blive gengivet som vektorer.

Dernæst har du en check gennem dine lag og underlag; Der er en god chance for at du kan forenkle indholdet af formen uden at ofre noget. Prøv at skære ned antal grupper, stier og fyldes til bare de bare essentials.

Pas på masker

Masker er en nem måde at glide op på dette stadium. Vær opmærksom på, at alfa masker vil fungere sammen med SVG Renderer, men vil ikke dukke op, hvis du vælger at skifte til lærred. Masker kan være dyre i ydeevne, så brug dem effektivt.

Gengivelse.

BodyMovin fungerer i to dele - en eftervirkning, der konverterer animationsdata til en JSON-fil og en BodyMovin.js-afspiller til at medtage i din webside, der kan fortolke denne fil og gøre den i browseren.

Tror dine filer er gode til at gå? Åbn BodyMovin-udvidelsen gennem vindue og gt; Udvidelser og derefter bodymovin.

Når du har ramt opdatering, vil du se en liste over alle sammensætningerne i dette eftervirkningsprojekt. Vælg din valgte comp og vælg derefter en destinationsmappe inde i dit webprojekt. Når du er glad, skal du bare klikke på Render og se magien ske. Når det er færdigt, får du en "færdig" besked. Tillykke! Du har netop eksporteret en JSON-fil med alle de oplysninger, som afspilleren skal genskabe animationen.

For at teste din nyligt eksporterede animation skal du klikke på Preview & GT; Nuværende gør og husk at skrubbe gennem tidslinjen, da du kan få øje på noget, der ser lidt anderledes ud for, hvad du ville forvente. Hvis du gør spot nogen problemer, hopper du tilbage og tjek dine lag - det kan være en ikke-understøttet funktion eller et udtryk, der anvendes i eftervirkninger.

Nogle eftervirkninger plugins som gummihose understøtter nu Bodymovin. GummiHose gør brug af guide lag og skjulte lag. For at aktivere disse skal du blot klikke på indstillingerne ved siden af ​​din valgte sammensætning og markere de funktioner, du har brug for.

Hvis alt ser godt ud, er der kun en ting, du skal gøre, før du forlader efter effekter bagved. På dette tidspunkt skal du have en frisk data.json-fil, der beskriver din animation, men ingen BodyMovin-spiller til at fortolke den. I forlængelsen skal du klikke på knappen 'Få afspilleren' øverst til højre og gemme den med din JSON-fil.

Indlæs animationen

Nu har du alt hvad du behøver, lad os hoppe lige ind i koden og lægge det grundlæggende for at få din animation, der viser på siden.

Først lav en ny container #Anim_container. at holde din animation. Du skal også medtage bodymovin.js. fil før lukkekroppen tag. Næste fortælle BodyMovin alt om din animation og læg den i den nye beholder.

Lad os gå gennem opsætningen trin for trin:

 Var Container = Document.GetelementById ('anim_container');
// oprette vores animation

var animdata = {
Container: beholder,
Renderer: 'SVG',
AutoPlay: TRUE,
LOOP: TRUE,
Sti: 'Data.json'
};
VAR ANIM = BODYMOVIN.LOADANIMATION (ANIMDATA); 

Du skal definere alle parametrene for animationen. Fortæl BodyMovin beholderen, du vil have animationen til at indlæse og derefter fortælle den for at gøre animationen som SVG-elementer. Næste, fortæl animationen at spille så snart den er indlæst, og at du vil have det til at løbe tilbage til starten, når den er færdig.

Stien Ejendommen fortæller BodyMovin-afspilleren, hvor de finder JSON-datafilen til animationen. På grund af Cross-Origin-ressource-delingspolitikken (CORS), vil den teknik, du vil bruge til at få adgang til JSON-filen, kun fungerer, hvis du er på en server eller lokal server. For at arbejde lokalt kan du lave det Data.json i en JavaScript-fil, der tildeler objektet til en variabel. I så fald kan din opsætning se sådan ud:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
var container = dokument.getelementbyid ('anim_container');
// oprette vores animation
var animdata = {
Container: beholder,
Renderer: 'SVG',
AutoPlay: TRUE,
LOOP: TRUE,
AnimationData: Data.
};
Var anim = bodymovin.loadanimation (animdata);
& lt; / script & gt; 

Opdater siden, og din animation skal afspilles inde i beholderen. Vælg med dine dev-værktøjer, og du vil se, at hvert element i animationen nu er indeholdt i & lt; g & gt; Tags, og bliver transformeret i realtid.

Ser fantastisk ud, ikke? Du skal nu have en smuk, skarp animation, der viser i browseren (uden en elendig video tag i syne ...). Animationen vil altid skalere til at passe sin beholder, så gå videre og blæse det op!

BodyMovin har en række kraftfulde metoder til styring af animationen, efter at den har lastet. Kalder en metode som anim.pause () eller anim.setDirection () vil gøre det muligt for dig at manipulere afspilning på forskellige måder. Lad os se på nogle eksempler:

• anim.setDirection (-1) vil spille animationen i omvendt
• anim.pause () og anim.play () vil starte og stoppe animationen
• anim.setSpeed ​​(0,5) vil spille animationen ved halv hastighed

Tilføj interaktion

I dette næste skridt vil du undersøge nogle af de forskellige måder at tilføje interaktion til dine animationer via JavaScript. I dette eksempel eksporterer vi en eftervirkning animation med to sektioner: sektion A og sektion B. Afsnit A Anvendelsesrammer fra en til 20 (trekant holder sin pogo stick) sektion B Anvendelsesrammer fra 20 til 40 (trekant hopper op og ned på en pogo stick).

Nu vil du spille sektion A på en loop derefter (kun efter brugerens klik) Play and Loop sektion B. Du kan gøre brug af Playsegments ejendom til at dele animationer op på denne måde. Denne metode vil tage to argumenter - en matrix med start- og slutværdier og et andet boolsk - ISFrame. Indstilling af dette til sand vil fortælle animationen for at læse start- og slutværdierne som rammer, mens False vil fortælle det at læse disse værdier som tiden.

 anim.pause ();
anim.Playsegments ([0,20], sande); 

Tilføjelse af dette fortæller BodyMovin at sætte pause på den første ramme og afspille kun animationen fra 0 til 20 rammer. Når du opretter din animation med en LOOP: TRUE. Ejendom Dette vil fortsætte med at spille sektion A igen og igen.

Lad os oprette hele eksemplet. Du vil bruge to segmenter af en animation til dette eksempel, så du vil oprette to funktioner:

 Var Container = Document.GetelementById ('anim_container');
// oprette vores animation
var animdata = {
Container: beholder,
Renderer: 'SVG',
AutoPlay: FALSE,
LOOP: TRUE,
Sti: 'Data.json'
};
Var anim = bodymovin.loadanimation (animdata);
// Når animationen er indlæst, kør vores FirstLoop-funktion
anim.addeventListener ('domloaded', Firstloop);
// Opret vores afspilningsfunktioner
Funktion FirstLoop () {
anim.Playsegments ([0,20], sande);
};
funktion secondoop () {
anim.Playsegments ([20,40], sande);
};
// Lyt til et klikhændelse
container.AddeventListener ('klik', funktion (begivenhed) {
anim.addeventListener ('loopcomplete', secondoop);
}); 

Måde at gå! Nu vil din animation fortsætte med at looping, indtil brugeren klikker på den, så begynder det den anden løkke. Det eneste problem er nu, at et spring som dette er meget brat, og det kan ødelægge animationens glathed.

En ideel situation er at medtage en tredje sektion til animationen, en, der overgår fra at holde pogo-holdet til at hoppe på den. Nu vil din struktur se noget sådan ud:

• FirstLoop. - Ramme 0 til 20
• Overgang - Ramme 20 til 30
• secondoop. - Ramme 30 til 50

Vi vil have din animation til at blive i første loop, indtil den er klikket. På det tidspunkt vil du gerne vente på slutningen af ​​sløjfen, du er i øjeblikket i og bevæger sig på overgangen. Efter overgangen er færdig, flyt til din anden løkke. Dette lyder kompliceret, men forbliver hos mig! Her er din kode fuldt ud:

 Var Container = Document.GetelementById ('anim_container');
// oprette vores animation
var animdata = {
Container: beholder,
Renderer: 'SVG',
AutoPlay: FALSE,
LOOP: TRUE,
Sti: 'Data.json'
};
Var anim = bodymovin.loadanimation (animdata);
// Når animationen er indlæst, kør vores FirstLoop-funktion
anim.addeventListener ('domloaded', Firstloop);
// Opret vores afspilningsfunktioner
Funktion FirstLoop () {
anim.Playsegments ([0,20], sand);
};
Funktionsovergang () {
anim.Playsegments ([20,30], sande);
anim.removeeventListener ('loopcomplete');
anim.addeventListener ('loopcomplete', secondoop);
};
funktion secondoop () {
anim.Playsegments ([30.100], TRUE);
anim.removeeventListener ('loopcomplete');
};
// Lyt til et klikhændelse
container.AddeventListener ('klik', funktion (begivenhed) {
anim.addeventListener ('loopcomplete', overgang);
}); 

På klik bruger du en loopcomplete. lytter til at vente, indtil du når den sidste ramme af sløjfen, og kør derefter din Overgang () fungere. Her fjerner du den sidste lytter, afspiller det næste sæt rammer og derefter gør det samme igen. Efter overgangen er færdig, vil den ringe secondloop () .

Det er det!

Du har arbejdet med nogle af funktionerne i BodyMovin i dag, men hvis du er interesseret i at lære mere om plugin, kan du finde en belastning af oplysninger om BodyMovin Github. side. For flere eksempler, tjek den stadig imponerende BodyMovin CodePen-samling.

Forhåbentlig vil denne vejledning have givet dig en ide om de forskellige slags måder, som du kan kombinere brugen af ​​eftervirkninger og bodymovin til at producere nogle superkool animation til internettet!

Du kan nu oprette animation, der skal eksporteres til internettet, tag dine eksporterede filer i browseren og gør din animation responsivt at klikke på. Tænk ud over de MP4-filer, som du tidligere har udnyttet og se til BodyMovin for at skabe meget rigere weboplevelser i fremtiden.

At kunne involvere animatorer tæt i udviklingsprocessen bliver mere og mere vigtig, og området for web animation bevæger sig utroligt hurtigt. Med en stadigt voksende samling af nye udvidelser, plugins og rammer, kan animatorer og udviklere forvente, at denne proces bliver lettere og bedre over tid. Jeg for en kan ikke vente med at se, hvad fremtiden holder.

Fik mange filer til at sikkerhedskopiere? Tjek vores Sky lagring vælger.

Denne artikel optrådte oprindeligt i Net Magazine. i 2017. Abonner her .

Læs mere:

• Skabe og animere SVG polygoner
• 14 fantastiske Adobe. Eftervirkninger plugins.
• Opret storyboards til web animationer