Vienti Effects-animaatiot HTML5: lle

Animaatio verkossa on täällä jäädä. Se on kaikessa hienot liikkeet, jotka auttavat tuomaan UI-muotoilu Elämälle, täysin animoituja kankaalle kokemuksia ja WebGL-kokeita, jotka ovat haastavia, mitä kerran ajatellut oli mahdollista selaimessa.

Vaikka Devsin luovuuttaminen ja selainominaisuudet kasvavat, animaatio verkossa on pitkään ollut huono suhde videoon - jotain, jonka liikkeen grafiikkayhteisö on lähestynyt varovaisesti vuosia. Muista, että jos sinulla on monimutkainen sivusto ylläpitää, sinun sivujen ylläpito Palvelun on oltava kohdalla.

• Ulosopas UI Design

Kehittäjät ovat vedonneet kirjastoihin, kuten Greenock and Snap.SVG: hen, jotta voit tehdä raskaan nostoa toistaa animaatiota JavaScriptin kautta. Vaikka nämä työkalut ovat antaneet paljon joustavuutta, he eivät voi verrata animaation tarkkuuteen ja hienovaraisuuteen After Effects CC Oma aikajana ja helpottavat kaavioita. Web-näkökulmasta, kun vaikutukset sopivat hyvin hienoksi ja kokeilemaan liikettä ennen kuin se sitoutuu koodiksi.

Tulla sisään Bodymovin , Uraauurtava laajennus Adobe After Effects, että vienti animaatio suoraan After Effects JavaScript näytetään ja manipuloida selaimessa. Luonut Hernan Torrisi , BodyMovin poistaa monet animaattorin ja kehittäjän väliset esteet. Pohjalevyllä plugin toimii maagisena "renderiksi Web" -ominaisuudella Adobe unohdin. Sen edistyksellisimmällä se avaa uusia mahdollisuuksia vuorovaikutteiseen animaatioon.

BodyMovin on linkki työkalujen, laajennuksiin ja järjestelmiin, jotka nousevat vastaamaan joitain näistä uusista mahdollisuuksista. Airbnbin Lottie ja Facebookin avainkehykset Molemmat rakentaa näitä säätiöitä - ja he lopulta tuovat tehokkaimman animaatiotyökalun verkkoon.

Miksi käyttää BodyMovinia?

SVG on ottanut internetin yli ja tuodaan siihen odotuksen, että kaiken pitäisi olla korkealaatuinen, valo ja skaalautuva. BodyMovin tekee kaiken koostumuksenne kauniisti Crisp SVG: lle, joka pitää sen vektorin laadun millään. Ei enää kompromisseja keventääksesi, että GIF tai pakottaa käyttäjiltäsi paistettuja videotiedostoja.

Sekä yksinkertaistetaan animaatiosi vientiä, BodyMovin avaa enemmän mahdollisuuksia kehittäjille saadakseen luovia uusilla vuorovaikutteisilla kokemuksilla. Tutustu Codepenille joitain fantastisia tapoja laajennus on käytetty - vuorovaikutteisista IK-laitteista animoida-as-you-tyyppinen interaktiivinen teksti.

Yritä edelleen yksinkertaistaa Web Dev -prosessiasi, kokeile a Verkkosivuston rakentaja .

Vietyä animaatiota voidaan manipuloida selaimessa kuin mikä tahansa muu elementti, mikä mahdollistaa animaation vuorovaikutteisena ja kokeellisena työkaluna web-suunnittelussa. Ja nyt bodyMinin takia, mikä tuo animaatiot verkkoon ei ole koskaan ollut helpompaa. Tässä opetusohjelmassa oppii viemään animaation jälkivaikutuksista ja luovat yksinkertaisen looping-animaation, joka vastaa käyttäjän klikkaukseen.

Kuinka valmistaa jälkivaikutustiedostoja

Tuki jälkivaikutusten ominaisuuksista on parantunut suuresti ja voit odottaa saada melko hyviä tuloksia suoraan laatikosta. Sanotaan, että fancy flying 3d kerrokset eivät pelaa mukavaa, joten ole tietoinen rajoista ennen kuin aloitat. Ennen kuin aloitat projektin, lataa aina bodyMinin uusin versio ja tarkista GitHub-sivu, jonka avulla voit nähdä parhaillaan toimintoja.

Älä ole liian hätäinen siirtyä hauskan osaan ... Siistit tiedostot tekevät siistiä mielen. Tällöin he myös auttavat ottamaan lisää ylimääräistä työtä pois selaimesta ja antavat sinulle silkkisen sileän toistoa. Ensinnäkin haluat varmistaa, että sisältösi on vaikutuksen jälkeen muotoilun kerrokset täydelliselle vektoritehtaan. Voit muuntaa kaikki Illustrator-tiedoston muotoilun muotoiluun Voit yksinkertaisesti napsauttaa hiiren kakkospainikkeella ja valita Luo muotoja vektorikerroksesta. Kaikki kerrokset, jotka eivät ole tässä vaiheessa muotoja, muunnetaan kuviksi, eikä niitä saa tehdä vektoreina.

Seuraavaksi on tarkistus kerrosten ja aliverkkojen kautta; On hyvä mahdollisuus, että voit yksinkertaistaa muodon sisältöä uhraamatta mitään. Yritä leikata ryhmien lukumäärää, polkuja ja täyttää vain paljaat olennaiset.

Huolehdi maskeista

Maskit ovat helppo tapa lipsahtaa tässä vaiheessa. Huomaa, että Alpha Maskit toimivat SVG-renderin kanssa, mutta eivät näy, jos haluat vaihtaa kankaalle. Maskit voivat olla kalliita suorituskyvyssä, joten käytä niitä tehokkaasti.

Renderointi

Bodymovin toimii kahdessa osassa - After Effects laajennus, joka muuntaa animaatiota dataa JSON tiedostoon ja Bodymovin.js pelaaja sisällyttää oman verkkosivun, joka voi tulkita asiaa ja tehdä sen selaimessa.

Ajattele, että tiedostot ovat hyviä mennä? Avaa kehonmovin laajennus ikkunan ja GT: n kautta; Laajennukset ja sitten bodymovin.

Kun olet noussut päivittämään, näet luettelon kaikista tämän jälkivaikutuksen projektin koostumuksista. Valitse valittu COMP ja valitse sitten kohde-kansio Web-projektisi sisällä. Kun olet onnellinen, klikkaa renderaa ja katsele taikaa tapahtumaan. Kun se on tehty, saat "Valmis" -viestin. Onnittelut! Olet juuri viettänyt JSON-tiedoston kaikkiin tietoihin, joita pelaajan on luotava animaatiolle.

Voit testata äskettäin viety animaatiota napsauttamalla Esikatselu & GT; Nykyiset rentävät ja muista puhdistaa aikajanalla, kun saatat havaita jotain, joka näyttää hieman erilaiselta kuin odotat. Jos havaitset ongelmia hypätä takaisin ja tarkista kerrokset - se voi olla tuettu ominaisuus tai ilmaisu, jota käytetään jälkivaikutuksissa.

Jotkut jälkivaikutukset Plugins, kuten Rubberhoose nyt tukevat kehonmovin. Rubiryhose käyttää ohjauskerroksia ja piilotettuja kerroksia. Voit aktivoida nämä napsauttamalla valitun koostumuksen vieressä olevaa Asetukset COGia ja valitse tarvitsemasi ominaisuudet.

Jos kaikki näyttää hyvältä, on vain vielä yksi asia, mitä sinun tarvitsee tehdä ennen kuin lähdet jälkivaikutusten jälkeen. Tässä vaiheessa sinulla on oltava tuore data.json-tiedosto, joka kuvaa animaatiota, mutta ei BodyMovin-soitinta tulkita sitä. Napsauta laajennuksessa "Hanki soittimen" -painiketta oikeassa yläosassa ja tallenna se JSON-tiedostosi kanssa.

Lataa animaatio

Nyt sinulla on kaikki mitä tarvitset, hypätä suoraan koodiin ja aseta perusasiat saadaksesi animaatiosi näyttämällä sivulla.

Tee ensin uusi säiliö #Anim_container pitää animaatiosi. Sinun on myös sisällytettävä bodymovin.js Tiedosto ennen sulkemisrungon tunnistetta. Seuraavaksi kerro bodymovin kaikesta animaatiostasi ja lataa se uuteen astiaan.

Käveletään asennusvaihe vaiheittain:

 var Container = document.gettelementbyid ('anim_container');
// perustaa animaatiomme

var animdata = {
Säiliö: Säiliö,
Renderer: "SVG",
Autoplay: True,
Silmukka: Totta,
Polku: "Data.json"
};
Var anim = bodymovin.loadanimation (animdata); 

Sinun on määriteltävä kaikki animaation parametrit. Kerro BodyMovin-säiliölle, jonka haluat, että animaatio latautuu ja kerro sen sitten animaation antamiseksi SVG-elementteiksi. Seuraavaksi kerro animaatio pelata heti kun se on ladattu ja että haluat sen silmukalle takaisin alkuun, kun se on valmis.

Path-ominaisuus kertoo BodyMovin-pelaajalle, josta löydät JSON-datatiedoston animaatiolle. Ristiperäisen resurssien jakamista koskevan politiikan (CORS) vuoksi tekniikka, jota käytät JSON-tiedoston käyttöä, toimii vain, jos olet palvelimella tai paikallisella palvelimella. Jos haluat työskennellä paikallisesti, voit tehdä tämän data.json JavaScript-tiedostoksi, joka määrittää objektin muuttujaksi. Tällöin asetus saattaa näyttää tältä:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; skripti & gt;
var Container = document.gettelementbyid ('anim_container');
// perustaa animaatiomme
var animdata = {
Säiliö: Säiliö,
Renderer: "SVG",
Autoplay: True,
Silmukka: Totta,
AnimationData: Tiedot
};
var anim = bodymovin.loadAnimation (animdata);
& lt; / script & gt; 

Päivitä sivu ja animaatio pitäisi pelata säiliön sisällä. Valitse Dev-työkaluilla ja näet, että jokainen animaation elementti on nyt & lt; g & gt; Tunnisteet ja ne muuttuu reaaliaikaisesti.

Näyttää hämmästyttävältä, eikö? Sinulla pitäisi nyt olla kaunis, terävä animaatio, joka näkyy selaimessa (ilman kurjaa videotunnistetta ...). Animaatio aina laajasti astiaan, joten mene eteenpäin ja räjäytä se!

BodyMovinilla on valikoima tehokkaita menetelmiä animaation ohjaamiseksi sen jälkeen, kun se on ladattu. Kutsua menetelmää anim.pause () tai Anim.SetDirection () voit manipuloida toiston eri tavoin. Katsotaanpa joitakin esimerkkejä:

• Anim.SetDirection (-1) Toistaa animaation päinvastaisessa
• anim.pause () ja anim.play () alkaa ja lopettaa animaatio
• anim.setspeed (0,5) Toistaa animaation puoli nopeudella

Lisää vuorovaikutus

Tässä seuraavassa vaiheessa tutustut muutamia eri tavoin lisätä vuorovaikutusta animaatioihisi JavaScriptin kautta. Tässä esimerkissä viemme jälkeen Efects Animaatio kahdella osalla: A jakso A ja osa B. Osa Kehykset Yhdestä 20: sta (kolmio pitävät POGO Stick) Osa B käyttää kehyksiä 20-40 (kolmio hyppää ylös ja alas Pogo-kiinni).

Nyt haluat toistaa osan A silmukan päälle (vain käyttäjän napsautuksen jälkeen) Toisto ja silmukka Osa B. Voit käyttää PlaySegments-ominaisuutta jakota animaatioita tällä tavalla. Tämä menetelmä kestää kaksi argumenttia - ryhmä, jossa on käynnistys- ja loppuarvot ja toinen boolean - Isframe. Tämän todellisen asettaminen kertoo animaatiolle lukemaan käynnistys- ja lopetusarvot kehyksinä, kun taas FALSE kertoo sen lukemaan nämä arvot ajan myötä.

 anim.pause ();
Anim.PlaySegments ([0,20], totta); 

Tämän lisääminen kertoo BodyMovin keskeyttää ensimmäisellä kehyksellä ja pelata vain animaatiosta 0 - 20 kehystä. Kun asetat animaatiosi a Silmukka: totta OMAISUUS Tämä jatkaa kohtaa A uudestaan ​​ja uudestaan.

Määritä koko esimerkki. Käytät kahta segmenttiä animaatiosta tässä esimerkissä, joten luot kaksi toimintoa:

 var Container = document.gettelementbyid ('anim_container');
// perustaa animaatiomme
var animdata = {
Säiliö: Säiliö,
Renderer: "SVG",
Autoplay: FALSE,
Silmukka: Totta,
Polku: "Data.json"
};
var anim = bodymovin.loadAnimation (animdata);
// Kun animaatio on ladattu, suorita FirstLoop-toiminto
anim.addeventlistener ("domloaded", firstloop);
// Luo toistotoimintojen
Toiminto FirstLoop () {
anim.playsgments ([0,20], totta);
};
Toimintalaite () {
Anim.PlaySegments ([20,40], totta);
};
// Kuuntele napsautustapahtumaa
kontti.AddeventListener ('Click', Toiminto (tapahtuma) {
anim.addeventlistener ("LOOPCOMPLETE", MEDIOCLOOP);
}); 

Tapa mennä! Nyt animaatiosi pitää silmukoita, kunnes käyttäjä napsauttaa sitä, niin se käynnistää toisen silmukan. Ainoa ongelma on nyt, että hyppy kuin tämä on erittäin äkillinen ja se voi pilata animaation sileyden.

Ihanteellinen tilanne on sisällytettävä kolmas osa animaatioon, joka siirtyy pitämästä Pogo-kiinni hyppäämään siihen. Nyt rakenne näyttää näin:

• firstloop - Kehys 0 - 20
• siirtyminen - Kehys 20 - 30
• sekoitus - Kehys 30 - 50

Haluamme animaatiosi pysyä ensimmäisessä silmukassa, kunnes se napsahtaa. Tällöin haluat odottaa silmukan loppua, jota olet tällä hetkellä ja siirry siirtymään. Siirtymisen jälkeen siirtyminen siirtyy toiseen silmukkaan. Tämä kuulostaa monimutkaiselta, mutta pysy kanssani! Tässä on koodi kokonaisuudessaan:

 var Container = document.gettelementbyid ('anim_container');
// perustaa animaatiomme
var animdata = {
Säiliö: Säiliö,
Renderer: "SVG",
Autoplay: FALSE,
Silmukka: Totta,
Polku: "Data.json"
};
var anim = bodymovin.loadAnimation (animdata);
// Kun animaatio on ladattu, suorita FirstLoop-toiminto
anim.addeventlistener ("domloaded", firstloop);
// Luo toistotoiminnot
Toiminto FirstLoop () {
Anim.PlaySegments ([0,20], totta);
};
Toiminnan siirtyminen () {
anim.playsgments ([20,30], totta);
anim.removeeventlistener ('loopcomplete');
anim.addeventlistener ("LOOPCOMPLETE", MEDIOCLOOP);
};
Toimintalaite () {
Anim.PlaySegments ([30,100], totta);
anim.removeeventlistener ('loopcomplete');
};
// Kuuntele napsautustapahtumaa
kontti.AddeventListener ('Click', Toiminto (tapahtuma) {
anim.addeventlistener ("Loopcomplete", siirtyminen);
}); 

Klikkaamalla, käytät a silmukka kuuntelija odottaa, kunnes pääset silmukan viimeiseen kehykseen, suorita sitten siirtyminen() Toiminto. Täältä poistat viimeisen kuuntelen, toista seuraavat kehykset ja tee sitten sama uudelleen. Kun siirtyminen on valmis, se soittaa Toinen () .

Se siitä!

Olet työskennellyt muutamien BodyMinin ominaisuuksista tänään, mutta jos olet kiinnostunut oppimaan lisää plugin, löydät kuorman tietoa BodyMovin GitHub sivu. Lisää esimerkkejä, tarkista yhä vaikuttava BodyMovin Codepen Collection.

Toivottavasti tämä opetusohjelma on antanut sinulle ajatuksen erilaisista tavoista, joilla voit yhdistää jälkivaikutukset ja kehonmovin käyttöön tuottamaan joitakin superkoulun animaatiota verkkoon!

Nyt voit luoda animaation viedä verkkoon, tuoda vietyjä tiedostoja selaimeen ja tehdä animaatiosi reagoi napsauttamalla. Ajattele yli MP4-tiedostoja, joita olit aiemmin hyödyntänyt ja etsit kehonmovin luomaan paljon rikkaampia verkkokokemuksia tulevaisuudessa.

Voidakseen osallistua animaattoreihin tiiviisti kehitysprosessiin on yhä tärkeämpi, ja web-animaation ala liikkuu uskomattoman nopeasti. Uusien laajennuksen, laajennukset ja kehykset, animaattorit ja kehittäjät voivat odottaa, että tämä prosessi voi helpommin ja parempaa ajan mittaan. En voi odottaa, mitä tulevaisuus pitää.

Onko sinulla paljon tiedostoja varmuuskopioimaan? Tutustu meidän pilvivarasto Picks.

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti Vuonna 2017. Tilaa täältä .

Lue lisää:

• Luo ja animoida SVG-polygonit
• 14 Amazing Adobe Efects-laajennukset
• Luo tarinat web-animaatioille