Export után Effect Animációk HTML5

Az animáció az interneten itt marad. Mindent a finom mozdulatokból áll, amelyek segítenek Ui design Az élethez, a teljesen animált vászon tapasztalatok és WebGL kísérletek, amelyek kihívást jelentenek, amit egyszer a böngészőben lehetett volna.

Míg a devs kreativitása és a böngészők képességei növekednek, az animáció az interneten már régóta rossz kapcsolatban áll a videóhoz - valami, amit a mozgás grafikus közösség évek óta óvatosan közeledett. Ne feledje, hogy ha van egy összetett webhely fenntartása, az Ön web hosting A szolgáltatásnak pontra van szüksége.

• Az UI-tervezés előirányzata

A fejlesztők olyan könyvtárakra támaszkodtak, mint a GreenSock és a Snap.SVG, hogy a nehéz emelést a JavaScript segítségével reprodukálják. Bár ezek az eszközök sok rugalmasságot adtak, nem lehet összehasonlítani az animáció pontosságával és finomságával, amelyek elérhetők A CC hatások után a saját idővonala és a grafikonok enyhítése. A webes perspektívából, miután a hatások nagyon jól illeszkednek a csípéshez és a mozgást, mielőtt kódolniuk kell.

Belép Bodyermovin Egy úttörő kiterjesztése az Adobe After Effects, hogy az export animáció közvetlenül After Effects JavaScript Meg kell mutatni és manipulálni a böngészőben. Készítette Hernan torrisi A bodyermovin eltávolítja az animátor és a fejlesztő közötti akadályokat. A bázis szintjén a plugin az Adobe elfelejtette az Adobe elfelejtette a mágikus "renderet". A legfejlettebb, hogy új lehetőségeket nyit meg az interaktív animáció számára.

A BodyMovin egy kapcsolat az eszközök, a pluginok és a rendszerek láncolatában, amely megfelel ezeknek az új lehetőségeknek. Airbnb Lottie és Facebook kulcskerékei Mindkettő ezeken az alapokra épül -, és végül hozzák a legerősebb animációs eszközt az interneten.

Miért használjuk testmovint?

Az SVG átvette az internetet, és elhozta vele a várakozás, hogy mindennek jó minőségű, könnyű és skálázható. A BodyMovin mindent elkészíti a kompozícióban, hogy gyönyörűen éles svg, amely a vektor minősége bármilyen méretben tartja. Nincs többé veszélyeztetve, hogy megkönnyítse azt a gif-t, vagy arra kényszeríti a felhasználók számára, hogy betöltsük a dagadt videofájlokat.

Az animációk exportálásának folyamatának egyszerűsítése, a BodyMovin több lehetőséget nyújt a fejlesztők számára, hogy kreatív legyen az új interaktív tapasztalatokkal. Nézze meg a Codepen-t a fantasztikus módszerek néhány fantasztikus módjaitól - az interaktív IK Rigs-től az animálja - as-you-típusú interaktív szöveget.

A web DEV folyamatának további egyszerűsítése érdekében próbálja meg a weboldal építője .

Az exportált animáció manipulálható a böngészőben, mint bármely más elem, amely lehetővé teszi számunkra, hogy animációt gondoljunk interaktív és kísérleti eszközként a webdesign belül. És most a bodyermovin miatt, az animációkat az interneten soha nem sikerült könnyebb. Ebben a bemutatóban megtanulja, hogyan exportálhat egy animációt a hatások után, és hozzon létre egy egyszerű hurok animációt, amely reagál a felhasználó kattintására.

Hogyan készítsük el az Ön hatásait

A TÁMOGATÁSI TÁMOGATÁS TÁMOGATÁSA JELLEMZŐK Javult, és elvárható, hogy elég jó eredményeket kapjon a dobozból. Az, hogy azt mondják, hogy a Fancy Flying 3D rétegei nem fognak szépen játszani, ezért tudatában kell lennie a korlátokról, mielőtt elkezdené. Mielőtt elkezdené a projektet, mindig töltse le a BodyMovin legújabb verzióját, és ellenőrizze a Github oldalt, hogy megnézze, mely funkciókat támogatják.

Ne légy túlságosan elhamarkodni, hogy a szórakoztató részre költözzön ... Tidy fájlok készítsenek egy rendben. Ebben az esetben segíteni fognak is, hogy az extra munkát távolítsák el a böngészőtől, és selymes sima lejátszást adnak neked. Először is meg akarja győződni arról, hogy a tartalom a hatások után alakul ki a teljes vektoros teljesítményre. Az Illustrator fájl alakításához a rétegek alakításához egyszerűen kattintson jobb egérgombbal, és válasszon formák létrehozása a vektorrétegből. Minden olyan réteg, amely ebben a szakaszban nem alakul ki, majd képekre alakul, és nem lesz vektorokként.

Ezután ellenőrizze a rétegeket és az allányiakat; Jó eséllyel egyszerűsítheti az alak tartalmát anélkül, hogy feláldoznánk semmit. Próbálja meg levágni a csoportok számát, az útvonalakat és kitölti a csupasz lényegeket.

Vigyázzon a maszkokkal

A maszkok könnyedén csúsznak fel ebben a szakaszban. Ne feledje, hogy az Alpha Maszkok az SVG-renderelővel fognak működni, de nem jelennek meg, ha a vászonra vált. A maszkok drágák lehetnek a teljesítményben, így hatékonyan használják őket.

Renderelés

Bodymovin működik két részből áll - egy After Effects kiterjesztés, amely átalakítja animációs adatokat egy JSON fájlt és egy Bodymovin.js játékos közé a weboldal, hogy értelmezni tudja ezt a fájlt, és teszi azt a böngészőben.

Szerintem a fájlok jó menni? Nyissa ki a bodyermovin kiterjesztést az ablak és gt; Kiterjesztések, majd bodyermovin.

Miután frissítette a frissítést, megjelenik az Effects Procction összes kompozíciójának listáját. Válassza ki a Chosen Comp, majd válassza ki a cél mappát a webes projekt. Amikor boldog vagy csak kattintson a renderre, és nézze meg a mágiát. Amikor megtörtént, kap egy "kész" üzenetet. Gratulálunk! Épp most exportált egy JSON fájlt az összes olyan információval, amelyet a játékosnak újra kell újítani az animációt.

Az újonnan exportált animáció teszteléséhez kattintson az Előnézet & gt; Jelenlegi rendezők és emlékezzen arra, hogy az idővonalon áthúzódnak, ahogyan valamit észrevesznek, ami kicsit másra néz, hogy mit várhat. Ha bármilyen probléma merül fel, ugorj vissza és ellenőrizze a rétegeket - lehet, hogy nem támogatott tulajdonság vagy kifejezés a hatások után.

Néhány utóhatás olyan pluginok, mint a buta, most támogatja a bodyermovint. Rugarátok vezetőképrétegeket és rejtett rétegeket használnak. Ha aktiválná ezeket, kattintson a Beállítások COG-ra a kiválasztott összetétel mellett, és jelölje be a szükséges funkciókat.

Ha minden jól néz ki, csak még egy dolog, amit meg kell tennie, mielőtt elhagynád a hatások mögött. Ebben a szakaszban friss data.json fájlt kell tartalmaznia az animációt, de nincs bodyermovin játékos értelmezni. A kiterjesztésben kattintson a jobb felső sarokban a "Get the Player" gombra, és mentse el a JSON fájljával.

Töltse be az animációt

Most már van mindent, amire szüksége van, ugorjunk egyenesen a kódba, és állítsuk le az alapokat, hogy az animáció megjelenik az oldalon.

Először készítsen új tartályt #anim_container az animáció megtartása. Önnek is be kell vonnia a bodyermovin.js a záró testcímke előtt. Következő Mondja el a BodyMovin mindent az animációjáról, és töltse be az új konténerbe.

Legyenek lépésről lépésre:

 VAR Container = Document.getElementbyid ('Anim_container');
// Állítsa be az animációnkat

VAR Animdata = {
Konténer: konténer,
Renderer: "svg",
Automatika: Igaz,
hurok: igaz,
PATH: 'DATA.JON'
};
var anim = bodyermovin.loadanimation (animdata); 

Meg kell határoznia az animáció összes paraméterét. Mondd Bodymovin a tartály szeretne az animáció betölteni, majd mondd meg, hogy elvegye a animációt SVG elemek. Majd árulja el az animációt játszani, amint van töltve, és hogy azt akarja, hogy hurok vissza a start ha ez elkészült.

Az útvonal tulajdonság megmondja a bodyermovin játékosnak, ahol megtalálhatja az animáció Json adatfájlját. Mivel a cross-origin erőforrás-megosztás politikája (CORS), a technika akkor használja eléréséhez a JSON fájlban csak akkor működik, ha a szerveren vagy a helyi szerver. Helyileg dolgozni, ezt az adatokat egy JavaScript fájlba hozhatja, amely az objektumot egy változóhoz hozzárendeli. Ebben az esetben a beállítás így néz ki:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
var Container = Document.getElementbyid ('Anim_container');
// Állítsa be az animációnkat
VAR Animdata = {
Konténer: konténer,
Renderer: "svg",
Automatika: Igaz,
hurok: igaz,
AnimationData: adatok
};
var anim = bodyermovin.loadanimation (animdata);
& lt; / script & gt; 

Frissítse az oldalt, és az animációnak le kell játszania a tartály belsejében. Válassza ki a DEV-eszközöket, és látni fogja, hogy az egyes elemek az animációban szerepelnek & lt; g & gt; Címkék, és valós időben átalakul.

Csodálatosnak tűnik, ugye? Most már van egy szép, ropogós animáció, amely bemutatja a böngészőben (anélkül, hogy egy nyomorult video címkét látnák ...). Az animáció mindig méretezhető, hogy illeszkedjen a tartályához, ezért menjen előre, és fújjon fel!

A BodyMovin számos erős módszerrel rendelkezik az animáció ellenőrzésére, miután betöltötte. Olyan módszert hív Anim.pause () vagy anim.setdirection () lehetővé teszi, hogy különböző módon manipulálja a lejátszást. Nézzünk néhány példát:

• anim.setdirection (-1) az animációt fordítva fogja játszani
• Anim.pause () és Anim.play () elindítja és megállítja az animációt
• Anim.setspeed (0,5) Fél sebességgel fogja lejátszani az animációt

Kölcsönhatás hozzáadása

Ebben a következő lépésben felfedezheti néhány különböző módon, hogy kölcsönhatásokat adjon az animációkhoz a JavaScript segítségével. Ebben a példában exportálunk egy utóhatás animációt két részből: A. szakasz és B. szakasz. Az A szakasz az egyik-a 20-as kereteket (háromszög tartja a pogo botot) A B. szakasz 20-ról 40-ig terjed (háromszög felfelé és lefelé halad) egy pogo boton).

Most, akkor szeretné lejátszani a szekciót egy hurokon (csak a felhasználói kattintások után) Play and Loop szakasz B. Szekció B. Használhatja a PlaySeGments tulajdonságot az animációk felosztására. Ez a módszer két argumentumot vesz igénybe - egy sor kezdő és végértékű és egy második boolean - isframe. Ennek igazolásának beállítása megmondja az animációnak, hogy elolvassa a kezdetektől és a végértékeket, mint keretek, míg a FALSE megmondja, hogy elolvassa ezeket az értékeket.

 anim.pauza ();
anim.playsegsegments ([0,20], igaz); 

Ez hozzáadása azt mondja, hogy a bodyermovin szünetelteti az első keretet, és játszani csak az animációt 0 és 20 képkocka között. Ahogy beállította az animációt a hurok: igaz Tulajdonság Ezzel továbbra is újra és újra játszani fog.

Állítsuk be az egész példát. Ez a példa két szegmensét használ, így két funkciót hoz létre:

 VAR Container = Document.getElementbyid ('Anim_container');
// Állítsa be az animációnkat
VAR Animdata = {
Konténer: konténer,
Renderer: "svg",
Automatika: FALSE,
hurok: igaz,
PATH: 'DATA.JON'
};
var anim = bodyermovin.loadanimation (animdata);
// Ha az animáció betöltődik, futtassa az elsőfelszerelési funkciót
Anim.addeventlistener ("domloaded", firstloop);
// Lejátszási funkciók létrehozása
Funkció FirstLoop () {
anim.playsegsegments ([0,20], igaz);
};
funkció secondloop () {
anim.playsegsegments ([20,40], igaz);
};
// Figyelj egy kattintási eseményre
konténer.addeventlistener ('Click', Funkció (esemény) {
Anim.addeventlistener ('loopcomplete', secondloop);
}); 

Út! Most az animáció megtartja a hurkot, amíg a felhasználó rákattint, majd elindítja a második hurkot. Az egyetlen probléma most az, hogy egy ilyen ugrás nagyon hirtelen, és tönkreteszi az animáció simaságát.

Ideális helyzet az animáció harmadik részének beillesztése, amely az egyik, hogy az átmenet a pogo ragaszkodni, hogy ugrik rajta. Most a struktúrád valami ilyesmit fog kinézni:

• elsőrendű - 0-20 keret
• átmenet - 20-30 keret
• másodlagos - 30-50 keret

Azt szeretnénk, hogy az animáció az első hurokban maradjon, amíg rákattint. Ezen a ponton várni fogja, hogy várjon a hurok végét, amelyet jelenleg az Ön és az átmenetre lép. Az átmenet befejezése után lépjen át a második hurokba. Ez bonyolult, de maradjon velem! Itt van a kódod teljes egészében:

 VAR Container = Document.getElementbyid ('Anim_container');
// Állítsa be az animációnkat
VAR Animdata = {
Konténer: konténer,
Renderer: "svg",
Automatika: FALSE,
hurok: igaz,
PATH: 'DATA.JON'
};
var anim = bodyermovin.loadanimation (animdata);
// Ha az animáció betöltődik, futtassa az elsőfelszerelési funkciót
Anim.addeventlistener ("domloaded", firstloop);
// Lejátszási funkciók létrehozása
Funkció FirstLoop () {
Anim.playSigments ([0,20], igaz);
};
Funkció átmenet () {
Anim.playSegments ([20,30], igaz);
Anim.Removeeventlistener ('loopcomplete');
Anim.addeventlistener ('loopcomplete', secondloop);
};
funkció secondloop () {
Anim.playSegments ([30,100], igaz);
Anim.Removeeventlistener ('loopcomplete');
};
// Figyelj egy kattintási eseményre
konténer.addeventlistener ('Click', Funkció (esemény) {
anim.addeventlistener ('loopcomplete', átmenet);
}); 

A kattintáson a loopcomplete hallgató, hogy várjon, amíg el nem éri a hurok utolsó keretét, akkor futtassa átmenet() funkció. Itt eltávolítja az utolsó hallgatót, játssza le a következő keretkészletet, majd újra ugyanazt. Az átmenet befejezése után felhívja secondloop () .

Ez az!

Ma már néhány funkcióval dolgozott a BodyMovin funkcióval, de ha érdekel, hogy többet tanul a pluginról, megtalálhatja az információterhelést a BodyMovin Github oldal. További példákért tekintse meg az egyre lenyűgöző bodyermovin codepen gyűjteményt.

Remélhetőleg ez a bemutató megkapja Önnek egy ötletet a különböző típusú módon, hogy kombinálhatja a hatások és a bodyermovin használatát, hogy néhány szupermool animációt készítsen az interneten!

Most beállíthatja az animációt exportálni az interneten, hozza az exportált fájlokat a böngészőbe, és az animáció érzékeny legyen a kattintásra. Gondolj túl az MP4 fájlokra, amelyeket korábban használta, és kinézett a bodyermovinra, hogy sok gazdagabb webes tapasztalatokat teremtsen a jövőben.

Az animátorok bevonása a fejlesztési folyamatban egyre fontosabbá válik, és a webes animáció területe hihetetlenül gyorsan mozog. Az új kiterjesztések, pluginok és keretek egyre növekvő gyűjteményével az animátorok és a fejlesztők várhatják ezt a folyamatot, hogy könnyebbé és jobbá váljanak. Én nem várhatom, hogy lássa, mi a jövő.

Van egy csomó fájl, hogy készítsen biztonsági másolatot? Nézd meg felhő tároló válogatás.

Ez a cikk eredetileg megjelent net magazin 2017-ben. Iratkozzon fel itt .

Olvass tovább:

• SVG sokszögek létrehozása és animálása
• 14 Amazing Adobe A hatások utáni bővítmények
• Megalapok létrehozása a webes animációkhoz