Export după efecte animații la HTML5

Animația pe web este aici pentru a rămâne. Este în orice moment din mișcările subtile care ajută la aducerea noastră UI Design. la viață, la experiențe de canvas complet animate și experimente WebGL care provoacă ceea ce am crezut odată a fost posibil în browser.

În timp ce creativitatea devs și capabilitățile browserelor sunt în creștere, animația pe web a fost mult timp o relație slabă cu video - ceva pe care comunitatea grafică de mișcare sa apropiat de prudență de ani de zile. Amintiți-vă că dacă aveți un site complex de întreținut, dvs. web hosting serviciul trebuie să fie la punct.

• Prosul Ghid pentru designul UI

Dezvoltatorii s-au bazat pe biblioteci cum ar fi Greensock și Snap.Svg pentru a face ridicarea grea în reproducerea animației prin JavaScript. În timp ce aceste instrumente au dat o mulțime de flexibilitate, ele nu se pot compara cu precizia și subtilitatea animației care pot fi realizate folosind După efecte CC. propriile cronometre și grafice de relaxare. Din perspectivă web, după efectele sunt foarte potrivite pentru a elimina și a încerca o mișcare înainte de a-l angaja.

introduce Boodmovin. , o extensie revoluționară pentru Adobe după efecte care exportă animație direct de la efectele după JavaScript pentru a fi afișate și manipulate în browser. Creat de Hernan Torrisi. Boodmovin elimină multe dintre barierele dintre animator și dezvoltator. La nivelul de bază, pluginul acționează ca o caracteristică magică "Render for Web" Adobe a uitat. La cel mai avansat, acesta deschide noi posibilități de animație interactivă.

Bodymovin este o legătură în lanțul de instrumente, pluginuri și sisteme care se ridică pentru a satisface unele dintre aceste noi posibilități. Airbnb's Lottie. și Formamentele cheie ale Facebook Ambele se bazează pe aceste fundații - și în cele din urmă aduce cel mai puternic instrument de animație pe web.

De ce să folosiți Boodmovin?

SVG a preluat internetul și a adus cu ea așteptările ca totul să fie de înaltă calitate, lumină și scalabilă. Boodmovin face totul în compoziția dvs. la SVG frumos clare, care păstrează calitatea vectorului la orice dimensiune. Nu mai compromiteți să ușurați acel GIF sau forțând utilizatorii dvs. să încărcați fișiere video umflate.

Pe lângă simplificarea procesului de export de animații, Boodmovin deschide mai mult potențial pentru dezvoltatori pentru a obține creativ cu experiențe noi interactive. Check out CodePen pentru unele dintre căile fantastice a fost utilizată extensia - de la platformele interactive IK la un text interactiv de tip animat as-you.

Pentru a vă simplifica în continuare procesul Web Dev, încercați a Builder de site-uri web .

Animația exportată poate fi manipulată în browser ca orice alt element, permițându-ne să ne gândim la animație ca un instrument interactiv și experimental în cadrul designului web. Și acum din cauza lui Boodmovin, aducându-ți animațiile pe web nu a fost niciodată mai ușor. În acest tutorial veți afla cum să exportați o animație de la efecte și să creați o animație simplă de buclă care răspunde la clicul utilizatorului.

Cum să vă pregătiți fișierele dvs. după efecte

Suportul pentru caracteristicile de după efecte s-au îmbunătățit foarte mult și vă puteți aștepta să obțineți rezultate destul de bune din cutie. Acestea fiind spuse, straturile voastre fantezie 3D nu vor juca frumos, așa că fi conștienți de limitele înainte de a începe. Înainte de a începe un proiect, descărcați întotdeauna cea mai recentă versiune de Bodymovin și verificați pagina GitHub pentru a vedea ce caracteristici sunt acceptate în prezent.

Nu fi prea grăbit să vă deplasați pe partea distractivă ... Fișierele ordonate fac o minte ordonată. În acest caz, ei vor ajuta, de asemenea, să ia o parte din munca suplimentară de la browser și să vă dea redarea netedă. În primul rând, veți dori să vă asigurați că conținutul dvs. este în After Effects Straturi pentru puterea vectorială completă. Pentru a converti orice fișier ilustrator pentru a forma straturi, puteți face clic dreapta și alegeți Creare forme din stratul vectorial. Orice straturi care nu sunt forme în acest stadiu vor fi apoi convertite în imagini și nu vor fi redate ca vectori.

Apoi, aveți un cec prin straturile și substrații; Există o șansă bună să simplificați conținutul formei fără a sacrifica nimic. Încercați să reduceți numărul de grupuri, căi și umpleți doar esențialele goale.

Aveți grijă de măști

Măștile sunt o modalitate ușoară de alunecare în această etapă. Fiți conștienți de faptul că măștile Alpha vor funcționa cu Renderer SVG, dar nu vor apărea dacă alegeți să treceți la panza. Măștile pot fi costisitoare în performanță, astfel încât să le utilizați eficient.

Redare

Boodmovin lucrează în două părți - o extensie după efecte care convertește datele de animație într-un fișier JSON și un jucător bodymovin.js pentru a include în pagina dvs. web care poate interpreta acest fișier și îl poate face în browser.

Gândiți-vă că fișierele dvs. sunt bune pentru a merge? Deschideți extensia pentru bodymovină prin fereastră & GT; Extensii și apoi bodymovin.

Odată ce ați lovit reîmprospătarea, veți vedea o listă a tuturor compozițiilor din acest proiect după efecte. Selectați COMP selectat și apoi alegeți un dosar de destinație în interiorul proiectului dvs. web. Când sunteți fericit, faceți clic pe Render și urmăriți magia se întâmplă. Când sa terminat, veți primi un mesaj "terminat". Felicitări! Tocmai ați exportat un fișier JSON cu toate informațiile pe care jucătorul trebuie să le recreeze animația.

Pentru a testa animația dvs. nou exportată, faceți clic pe Previzualizare & GT; Renderi curente și nu uitați să curățați cronologia, deoarece ați putea observa ceva care arată puțin diferit de ceea ce vă așteptați. Dacă faceți la fața locului, sare înapoi și verificați straturile - ar putea fi o caracteristică neacceptată sau o expresie utilizată în After Effects.

Unele pluginuri după efecte, cum ar fi Rubberhose, suportă acum bodymovin. Rubberhose folosește straturi de ghidare și straturi ascunse. Pentru a le activa, faceți clic pe setările COG de lângă compoziția dvs. aleasă și bifați caracteristicile de care aveți nevoie.

Dacă totul arată bine, există doar un lucru pe care trebuie să-l faceți înainte de a pleca după efectele în urmă. În acest stadiu ar trebui să aveți un fișier proaspăt de date.json care descrie animația dvs., dar nici un jucător de bodymovin să-l interpreteze. În extensie, faceți clic pe butonul "Ia player" din partea dreaptă sus și salvează-o cu fișierul JSON.

Încărcați animația

Acum aveți tot ce aveți nevoie, să sarăm direct în cod și să lăsăm elementele de bază pentru a vă arăta animația pe pagină.

Mai întâi faceți un nou container #anim_container. pentru a ține animația. De asemenea, trebuie să includeți bodymovin.js. fișier înainte de eticheta corpului de închidere. Apoi spuneți lui Boodmovin totul despre animația dvs. și încărcați-l în noul container.

Să mergem prin instalarea pas cu pas:

 Var container = document.getelementbyid ("Anim_container");
// Configurați animația noastră

var animdata = {
Container: container,
Renderer: "SVG",
AutoPlay: Adevărat,
Loop: Adevărat,
Cale: "date.json"
};
var anim = bodymovin.loadanimare (animadta); 

Trebuie să definiți toți parametrii pentru animație. Spuneți bodymovinului recipientului dorit să se încarce animația și apoi să-i spuneți să facă animația ca elemente SVG. Apoi, spuneți animației să joace imediat ce este încărcată și că doriți să vă întoarceți la început când este terminat.

Proprietatea calea spune jucătorului de bodymovin unde să găsească fișierul de date JSON pentru animație. Datorită politicii de partajare a resurselor încrucișate (CORS), tehnica pe care o veți folosi pentru accesarea fișierului JSON va funcționa numai dacă vă aflați pe un server sau pe un server local. Pentru a lucra la nivel local, puteți face acele date.jon într-un fișier JavaScript care atribuie obiectul unei variabile. În acest caz, configurația dvs. ar putea arăta astfel:

& lt; script src = "js / date.js" & gt; / script & gt;
& lt; script & gt;
Var container = document.getelementbyid ("Anim_container");
// Configurați animația noastră
var animdata = {
Container: container,
Renderer: "SVG",
AutoPlay: Adevărat,
Loop: Adevărat,
AnimationData: Date
};
var anim = bodymovin.loaderanimarea (animtata);
& lt; / script & gt; 

Actualizați pagina și animația dvs. ar trebui să jucați în interiorul recipientului. Selectați cu instrumentele dvs. DEV și veți vedea că fiecare element din animație este acum conținut în & gt; Etichete și se transformă în timp real.

Pare uimitor, nu? Ar trebui să aveți acum o animație frumoasă și crocantă care arată în browser (fără o etichetă video nenorocită în vizualizare ...). Animația va scala întotdeauna pentru a se potrivi recipientului, așa că mergeți mai departe și aruncați-o!

Bodymovin are o serie de metode puternice pentru controlul animației după ce a fost încărcat. Apelând o metodă cum ar fi Anim.pause () sau anim.setdirection () vă va permite să manipulați redarea în moduri diferite. Să ne uităm la câteva exemple:

• anim.setdirection (-1) va juca animația în sens invers
• Anim.pause () și Anim.play () va începe și va opri animația
• Anim.setspeed (0.5) va juca animația la jumătate de viteză

Adăugați interacțiunea

În acest pas următor veți explora câteva dintre diferitele modalități de a adăuga interacțiunea cu animațiile dvs. prin JavaScript. În acest exemplu, exportăm o animație după efecte cu două secțiuni: secțiunea A și secțiunea B. Secțiunea A utilizează cadre de la unu la 20 (triunghiul păstrează pogo bastonul) Secțiunea B utilizează cadre de la 20 la 40 (triunghiul este sărituri în sus și în jos pe un stick pogo).

Acum, doriți să redați secțiunea A pe o buclă atunci (numai după clicurile utilizatorului) Redați și buclă Secțiunea B. Puteți utiliza proprietatea PlayseGments pentru a împărți animațiile în acest fel. Această metodă va lua două argumente - o matrice cu valori de început și de capăt și un al doilea boolean - Isframe. Setarea acestui lucru la True va spune animației să citească valorile de start și de sfârșit ca cadre, în timp ce False va spune să citească aceste valori ca timp.

 Anim.pause ();
Anim.playseGments ([0,20], TRUE); 

Adăugarea Acest lucru îi spune lui Boodmovin să pauze la primul cadru și să joace doar animația de la 0 la 20 de cadre. Pe măsură ce vă configurați animația cu a Loop: Adevărat Proprietate Acest lucru va continua să joace din nou secțiunea A și din nou.

Să stabilim întregul exemplu. Veți folosi două segmente ale unei animații pentru acest exemplu, deci veți crea două funcții:

 Var container = document.getelementbyid ("Anim_container");
// Configurați animația noastră
var animdata = {
Container: container,
Renderer: "SVG",
AUTOPLAY: FALSE,
Loop: Adevărat,
Cale: "date.json"
};
var anim = bodymovin.loaderanimarea (animtata);
// Când animația este încărcată, rulați funcția noastră de primăvară
anim.addeventlistener ("domload", primul strat);
// Creați funcțiile noastre de redare
Funcția FirstLoop () {
Anim.playseGments ([0,20], TRUE);
};
Funcția SetLoop () {
Anim.playseGments ([20,40], TRUE);
};
// ascultați pentru un eveniment de clic
container.addeventlistener ("clic", funcția (eveniment) {
Anim.adDeventlistener ("LoopComplete", SecondLoop);
}); 

Mod de a merge! Acum animația dvs. va păstra looping până când utilizatorul face clic pe acesta, apoi va începe a doua buclă. Singura problemă este acum că un salt ca acesta este foarte abrupt și poate ruina netezimea animației.

O situație ideală este aceea de a include o a treia secțiune la animație, una care trece de la menținerea stick-ului pogo la sărituri pe ea. Acum, structura dvs. va arăta așa ceva:

• Firstloop. - cadru 0 la 20
• tranziție - Cadru 20 până la 30
• secundoop. - cadrul de la 30 la 50

Vrem animația dvs. să rămână în prima buclă până când este făcută clic. În acel moment veți dori să așteptați capătul buclăului în care vă aflați în prezent și treceți la tranziție. După terminarea tranziției se deplasează la cea de-a doua buclă. Acest lucru pare complicat, dar stați cu mine! Iată codul dvs. în întregime:

 Var container = document.getelementbyid ("Anim_container");
// Configurați animația noastră
var animdata = {
Container: container,
Renderer: "SVG",
AUTOPLAY: FALSE,
Loop: Adevărat,
Cale: "date.json"
};
var anim = bodymovin.loaderanimarea (animtata);
// Când animația este încărcată, rulați funcția noastră de primăvară
anim.addeventlistener ("domload", primul strat);
// Creați funcțiile noastre de redare
Funcția FirstLoop () {
Anim.playseGments ([0,20], Adevărat);
};
Tranziția funcțiilor () {
Anim.playseGments ([20,30], TRUE);
Anim.removeeventListener ("LoopComplete");
Anim.adDeventlistener ("LoopComplete", SecondLoop);
};
Funcția SetLoop () {
Anim.playseGments ([30,100], TRUE);
Anim.removeeventListener ("LoopComplete");
};
// ascultați pentru un eveniment de clic
container.addeventlistener ("clic", funcția (eveniment) {
anim.addeventlistener ("LoopComplete", tranziție);
}); 

Faceți clic pe, utilizați a LoopComplete. ascultător să aștepte până când ajungeți la ultimul cadru al buclei, apoi să vă executați tranziție() funcţie. Aici eliminați ultimul ascultător, jucați următorul set de cadre și apoi faceți același lucru din nou. După terminarea tranziției, se va apela second () .

Asta este!

Ați lucrat cu câteva dintre caracteristicile Boodmovin astăzi, dar dacă sunteți interesat să aflați mai multe despre plugin, puteți găsi o încărcătură de informații despre Boodmovin Github. pagină. Pentru mai multe exemple, verificați colecția de codeprimă din lemn impresionantă.

Sperăm că acest tutorial vă va oferi o idee despre diferitele moduri de modalități pe care le puteți combina utilizarea efectelor după efecte și a bodymovinei pentru a produce o animație supercool pentru Web!

Acum puteți configura animația pentru a fi exportată pentru web, aduceți fișierele exportate în browser și faceți animația dvs. receptivă pentru a face clic pe. Gândiți-vă dincolo de fișierele MP4 pe care le-ați folosit anterior și uitați-vă la Boodmovin pentru a crea experiențe web mult mai bogate în viitor.

Fiind capabil să implice animatori îndeaproape în procesul de dezvoltare devine din ce în ce mai important, iar domeniul de animație web se mișcă incredibil de repede. Cu o colecție tot mai mare de noi extensii, pluginuri și cadre, animatorii și dezvoltatorii se pot aștepta ca acest proces să fie mai ușor și mai bun în timp. Eu nu pot aștepta să văd ce are viitorul.

Ai o mulțime de fișiere pentru a crea copii de rezervă? Verificați-vă Stocare in cloud Picks.

Acest articol a apărut inițial în revista netă în 2017. Abonați-vă aici .

Citeste mai mult:

• Creați și animați poligoane SVG
• 14 Adobe uimitoare After Effects Plugins.
• Creați storyboard-uri pentru animații web