Hogyan készítsünk gyönyörű kódolt webes animációkat a Mo.JS segítségével

Ha keres indítsa el saját webhelyét , gyönyörű kinézetű animációk csilloghatnak. Ennek több módja is van, egyszerűen animált GIF készítése a meglévő film egy darabjától kezdve egészen addig, amíg meg nem tanulja saját kezűleg elkészíteni a szoftvert, például a semmiből Turmixgép vagy Maya .

Emellett könyvtárak is rendelkezésre állnak animációk programozható létrehozásához. A történelem során a webkódolók a jQuery -t használták egyszerű animációk készítésére, de ahogy a web fejlődött és HTML5 lett az új szabvány, új lehetőségek jelentek meg. Az animációs CSS -könyvtárak hihetetlenül erőteljesek lettek az új keretrendszerben, a JavaScript -könyvtárakkal együtt, amelyeket kifejezetten vektoros animációhoz terveztek a böngészőben.

Ma megnézzük a mo.js -t, a blokk egyik újabb gyerekét, aki gyönyörű képeket készít a kódból. Néhány alapvető funkciót lefedünk, mielőtt létrehoznánk egy felhasználói reaktív animációs sorozatot, amely gyönyörű mintákat hoz létre.

Lépjen be a Mo.js fájlba

A Mo.js egy könyvtár, amellyel könnyedén hozhat létre mozgóképeket az interneten. Úgy tervezték, hogy egyszerűvé tegye a szép dolgok készítését azok számára, akik nem túl jártasak a kódok megismerésében, miközben lehetővé teszi a veterán programozók számára, hogy felfedezzenek egy művészi oldalt, amelyről eddig nem is tudtak. Ahogy a neve is sugallja, a népszerű JavaScript programozási nyelven alapul, bár úgy van megvalósítva, hogy bárki könnyen fel tudja venni az alapokat.

Mielőtt továbbmennénk, nézzük meg, mit fogunk ma létrehozni:

Mi használni fogjuk CodePen a mai projekthez, mivel lehetővé teszi számunkra, hogy ugyanazon a böngészőablakban mindenen dolgozzunk. Ha szeretné, dolgozhat egy az Ön által választott szerkesztő helyette. Ha ki szeretné hagyni a lépésről lépésre szóló bemutatót, a teljes kód itt érhető el.

Állítson be egy új tollat, és a következő képernyőn üdvözli Önt:

Mielőtt elkezdenénk, néhány változtatást kell végrehajtania. Kattintson a Beállítások ikonra a jobb felső sarokban, és navigáljon a JavaScript fülre.

Használni fogjuk Bábel mint a kód előfeldolgozónk, ezért válassza ezt a legördülő menüből. A Babel némileg megkönnyíti a JavaScript megértését és a szolgáltatást ECMAScript 6 régebbi böngészők támogatása. Ha nem tudod, mit jelent ez, ne aggódj , ez csak egy kicsit megkönnyíti az életünket itt.

Be kell importálnunk a projektbe a mo.js könyvtárat is. Ezt a kereséssel tegye meg mo.js ban,-ben Külső szkriptek/toll hozzáadása szöveges üzenetet, és válassza ki azt.

Ha ez a két dolog a helyén van, kattintson Mentés és bezárás . Készen állunk az indulásra!

Alapvető formák a Mo.js használatával

Mielőtt belekezdenénk a grafikába, tegyünk valamit a vakító fehér háttérrel a nézetablakban. A háttérszín tulajdonság megváltoztatásához írja be ezt a kódot a CSS kenyér.

body{  
 background: rgba(11,11,11,1);  
}

Az alakzat létrehozása egyszerű folyamat, és a mögöttes koncepció az egész könyvtárat vezérli. Állítsunk be egy alapértelmezett kör alakot. Írja be ezt a kódot a JS kenyér:

const redCirc = new mojs.Shape({  
 isShowStart:true  
});

Itt létrehoztunk egy const érték a névvel redCirc és hozzárendelte a új mojs.Alak . Ha teljesen új a kódolásban, figyeljen a zárójelek sorrendjére itt, és ne felejtse el a pontosvesszőt a végén!

Eddig egyetlen paramétert sem adtunk meg, kivéve isShowStart: igaz , vagyis még azelőtt megjelenik a képernyőn, hogy bármilyen mozgást hozzárendeltünk volna hozzá. Látni fogja, hogy rózsaszín kört helyezett a képernyő közepére:

Ez a kör az alapértelmezett Alak a mo.js. Könnyen megváltoztathatjuk ezt az alakzatot, ha hozzáadunk egy sort a kódunkhoz:

const redCirc = new mojs.Shape({  
 isShowStart:true,  
 shape:'rect'  
});

Ha további tulajdonságokat szeretne hozzáadni egy objektumhoz, vesszővel választjuk el egymástól. Itt hozzáadtuk a alak tulajdonság, és a 'helyes' . Mentse el a tollat, és látni fogja, hogy az alapértelmezett alak négyzetre változik.

Ez a folyamat az értékek átadásával a Alak objektum az, hogyan testreszabjuk őket. Jelenleg van egy négyzetünk, amely nem sokat tesz. Próbáljunk animálni valamit.

A mozgás alapjai

Ahhoz, hogy valami lenyűgözőbbnek tűnjön, állítsunk fel egy kört, körülötte piros vonallal, és nincs kitöltés.

const redCirc = new mojs.Shape({  
 isShowStart:true,  
 stroke:'red',  
 strokeWidth:5,  
 fill:'none',  
 radius:15  
});

Mint látható, hozzárendeltük a szélesség a löket értékét, és a sugár a kör számára. A dolgok már kezdenek kicsit másképp kinézni. Ha az alakja nem frissül, győződjön meg róla, hogy nem hagyott ki egyetlen vesszőt vagy idézőjelet sem 'háló' vagy 'egyik sem' , és ellenőrizze, hogy rákattintott -e megment az oldal tetején.

Tegyünk ehhez animációt. A fenti példában ez a piros kör jelenik meg, ahol a felhasználó kattint, mielőtt kifelé halványul. Ennek egyik módja a sugár és az átlátszatlanság időbeli megváltoztatása. Módosítsuk a kódot:

 radius: {15:30},  
 opacity: {1:0},  
 duration:1000

A megváltoztatásával sugár tulajdonság, és hozzá átlátszatlanság és időtartama tulajdonságokat, megadtuk az idővel végrehajtandó alakítási utasításokat. Ezek Delta objektumok, ezeknek a tulajdonságoknak a kezdő és befejező információi.

Észre fogja venni, hogy még semmi sem történik. Ez azért van, mert nem adtuk hozzá a .játék() funkciót, hogy utasítsa az utasításaink végrehajtására. Adja hozzá a zárójelek és a pontosvessző közé, és láthatja, hogy a kör életre kel.

Most valahová tartunk, de hogy igazán különlegessé tegyük, nézzünk meg néhány mélyebb lehetőséget.

Rendelés és megkönnyítés a Mo.js segítségével

Most, amint megjelenik a kör, kezd elhalványulni. Ez tökéletesen fog működni, de jó lenne egy kicsit jobban irányítani.

Ezt megtehetjük a .azután() funkció. Ahelyett, hogy megváltoztatnánk a sugarat vagy az átlátszatlanságot, hagyjuk, hogy alakunk ott maradjon, ahol kezdődik, mielőtt meghatározott idő elteltével megváltozik.

const redCirc = new mojs.Shape({  
 isShowStart:true,  
 stroke:'red',  
 strokeWidth:5,  
 fill:'none',  
 radius: 15,  
 duration:1000  
}).then({  
 //do more stuff here  
}).play();

Most az alakunk megjelenik a hozzárendelt értékekkel, várjon 1000 ms -ot, mielőtt bármit végrehajtana, amit a .azután() funkció. Adjunk hozzá néhány utasítást a zárójelek közé:

 //do more stuff here  
 strokeWidth: 0,  
 scale: { 1: 2, easing: 'sin.in' },  
 duration: 500

Ez a kód az animáció egy másik fontos részét mutatja be. Ahol utasítottuk a skála ha 1 -ről 2 -re szeretnénk váltani, akkor a szinuszhullám alapú enyhítést is hozzárendeltük bűn. -ben . A Mo.js számos könnyítési görbét tartalmaz, amelyekkel a haladó felhasználók is hozzá tudják adni sajátjukat. Ebben az esetben a skála idővel felfelé ívelő szinuszhullám szerint történik.

A különböző görbék vizuális lefutásához nézze meg easings.net . Kombinálja ezt a strokeWidth ha a beállított időtartam alatt 0 -ra változik, és sokkal dinamikusabb eltűnési hatás érhető el.

A Mo.js -ban mindennek az alakzatok az alapjai, de ezek még csak a kezdete a történetnek. Nézzük Kitörések .

Lehetőséggel teli Mo.js -ban

NAK NEK Robbanás a Mo.js -ban egy központi pontból származó alakzatok gyűjteménye. Ezeket fogjuk kész animációnk alapjává tenni. Az alapértelmezett sorozatot ugyanúgy hívhatja, mint az alakzatot. Tegyünk néhány szikrát:

const sparks = new mojs.Burst({  
}).play();

Láthatja, csak üres hely hozzáadásával Robbanás objektumot, és azt mondja, hogy játsszon, az alapértelmezett sorozathatást kapjuk. A sorozat méretét és forgatását befolyásolhatjuk annak animálásával sugár és szög tulajdonságok:

const sparks = new mojs.Burst({  
 radius: {0:30, easing:'cubic.out'},  
 angle:{0: 90,easing:'quad.out'},  
}).play();

Már hozzáadtunk egy egyedi sugarat és centrifugálást sorozatunkhoz:

Annak érdekében, hogy inkább szikráknak tűnjenek, változtassuk meg a sorozat által használt alakzatokat és azt, hogy hány sorozatot generál a sorozat. Ezt úgy teheti meg, hogy foglalkozik a sorozat gyermekeinek tulajdonságaival.

const sparks = new mojs.Burst({  
 radius: {0:30, easing:'cubic.out'},  
 angle:{0: 90,easing:'quad.out'},  
 count:50,  
 children:{  
 shape: 'cross',  
 stroke: 'white',  
 points: 12,  
 radius:10,  
 fill:'none',  
 angle:{0:360},  
 duration:300  
 }  
}).play();

Észre fogja venni, hogy a gyermektulajdonságok megegyeznek az alaktulajdonságokkal, amelyekkel már dolgoztunk. Ezúttal keresztet választottunk formának. Mind az 50 alakzat ugyanazokkal a tulajdonságokkal rendelkezik. Kezd elég jól kinézni! Ez az első dolog, amit a felhasználó látni fog, amikor rákattint az egérre.

Már akkor is láthatjuk, hogy a kezdőbetűnk piros ütése redCirc alakja túl sokáig marad. Próbálja megváltoztatni annak időtartamát, hogy a két animáció illeszkedjen egymáshoz. Ennek valahogy így kellene kinéznie:

Még messze nem fejeztük be animációnkat, de szánjunk egy pillanatot arra, hogy felhasználó-reaktívvá tegyük.

A fő esemény

Eseménykezelő segítségével aktiváljuk animációinkat azon a helyen, ahol a felhasználó rákattint. A kódblokk végén adja hozzá ezt:

document.addEventListener( 'click', function(e) {  
});

Ez a kódrészlet hallgat az egérkattintásokra, és végrehajtja a zárójelben lévő utasításokat. Hozzátehetjük a magunkét redCirc és szikrák tárgyakat a hallgatónak.

document.addEventListener( 'click', function(e) {  
 redCirc  
 .tune({ x: e.pageX, y: e.pageY, })  
 .replay();  
 sparks  
 .tune({ x: e.pageX, y: e.pageY })  
 .replay();  
});

A két függvény, amit itt hívunk .dallam() és .visszajátszás() . A visszajátszás funkció hasonló a lejátszási funkcióhoz, bár meghatározza, hogy az animációt minden kattintás után újra kell kezdeni.

Az dallam függvény értékeket ad át objektumunknak, így megváltoztathatja a dolgokat, amikor aktiválódik. Ebben az esetben az oldal koordinátáit adjuk meg, ahol az egérre kattintottak, és ennek megfelelően rendeljük hozzá animációnk x és y pozícióját. Mentse el a kódot, és kattintson a képernyőre. Észre fog venni egy -két problémát.

Először is, a kezdeti animációnk még mindig megjelenik a képernyő közepén, még akkor is, ha a felhasználó nem kattint semmire. Másodszor, az animáció nem az egér pontján indul el, hanem lefelé és jobbra tolódik. Mindkettőt könnyen meg tudjuk javítani.

Alakunknak és robbanásunknak van .játék() a megfelelő kódblokkok végén. Erre már nincs szükségünk .visszajátszás() meghívásra kerül az eseménykezelőben. A .play () kódot mindkét kódblokkból eltávolíthatja. Ugyanezen okból eltávolíthatja isShowStart: igaz is, mivel már nincs szükség arra, hogy az elején megmutassuk.

A helymeghatározási probléma megoldásához be kell állítanunk az objektumok pozícióértékét. Amint az első alakunkból emlékezni fog, a mo.js alapértelmezés szerint az oldal közepére helyezi őket. Ha ezeket az értékeket az egér pozíciójával kombinálják, akkor létrejön az eltolás. Hogy megszabaduljon ettől az eltolódástól, egyszerűen adja hozzá ezeket a sorokat mindkét sorhoz redCirc és szikrák tárgyak:

left: 0,  
top: 0,

Most az egyetlen pozícióérték, amelyet objektumaink átvesznek, az eseményfigyelő által átadott egér pozícióértékek. Most sokkal jobban kellene működnie a dolgoknak.

Ez az objektumok eseménykezelőbe való felvételének folyamata az összes animációnk kiváltása ne feledje, hogy ezentúl minden új objektumot hozzá kell adnia! Most, hogy az alapok a kívánt módon működnek, adjunk hozzá néhány nagyobb és fényesebb sorozatot.

Pszichedelikus

Kezdjük néhány forgó háromszöggel. Az ötlet az volt, hogy hipnotikus stroboszkópos hatást hozzunk létre, és ennek beállítása valójában nagyon egyszerű. Adjon hozzá újabb sorozatot ezekkel a paraméterekkel:

const triangles = new mojs.Burst({  
 radius: { 0 : 1000,easing: 'cubic.out'},  
 angle: {1080 : 0,easing: 'quad.out'},  
 left: 0, top: 0,  
 count: 20,  
 children : {  
 shape: 'polygon',  
 points: 3,  
 radius: { 10 : 100 },  
 fill: ['red','yellow','blue','green'],  
 duration: 3000  
 }  
});

Itt már mindennek ismerősnek kell lennie, bár van néhány új pont. Észre fogja venni, hogy ahelyett, hogy az alakzatot háromszögként definiálnánk, a poligon számának hozzárendelése előtt pont van mint 3.

Mi is adtunk tölt Ha színeket szeretne használni, minden ötödik háromszög visszaáll vörösre, és a minta folytatódik. A magas érték a szög beállítása miatt a sorozat elég gyorsan centrifugál ahhoz, hogy stroboszkópos hatását kifejtse.

Ha a kód nem működik Önnek, győződjön meg arról, hogy hozzáadta a háromszög objektumot az eseményfigyelő osztályhoz, mint az előző objektumok esetében.

Elég pszichedelikus! Tegyünk hozzá egy újabb sorozatot, hogy kövessük.

Táncoló Pentagonok

Használhatunk valamit, ami majdnem azonos a miénkkel háromszögek tárgy, hogy létrehozza az azt követő sorozatot. Ez a kissé módosított kód élénk színű, egymást átfedő hatszögeket hoz létre:

const pentagons = new mojs.Burst({  
 radius: { 0 : 1000,easing: 'cubic.out'},  
 angle: {0 : 720,easing: 'quad.out'},  
 left: 0, top: 0,  
 count: 20,  
 children : {  
 shape: 'polygon',  
 radius: { 1 : 300 },  
 points: 5,  
 fill: ['purple','pink','yellow','green'],  
 delay:500,  
 duration: 3000  
 }  
});

A fő változás itt az, hogy a késleltetés 500 ms, így a sorozat csak a háromszögek után kezdődik. Néhány érték megváltoztatásával az volt az ötlet, hogy a sorozat a háromszögekkel ellentétes irányba forogjon. Boldog véletlenül, mire az ötszögek megjelennek, a háromszögek stroboszkópos hatása azt eredményezi, hogy együtt forognak.

Egy kis véletlenszerűség

Adjunk hozzá egy effektust, amely véletlen értékeket használ. Hozzon létre sorozatot ezekkel a tulajdonságokkal:

const redSparks = new mojs.Burst({  
 left: 0, top: 0,  
 count:8,  
 radius: { 150: 350 },  
 angle: {0:90 ,easing:'cubic.out'},  
 children: {  
 shape: 'line',  
 stroke: {'red':'transparent'},  
 strokeWidth: 5,  
 scaleX: {0.5:0},  
 degreeShift: 'rand(-90, 90)',  
 radius: 'rand(20, 300)',  
 duration: 500,  
 delay: 'rand(0, 150)',  
 }  
});

Ez a sorozat olyan vonalakat hoz létre, amelyek piros színnel kezdődnek és átlátszóvá válnak, és idővel csökkennek. Ezt az összetevőt az teszi érdekessé, hogy véletlen értékeket használnak bizonyos tulajdonságainak meghatározására.

Az fokVáltás kezdő szöget ad a gyermek objektumnak. Ennek randomizálásával minden kattintásra teljesen más sorozatot ad. Véletlen értékeket is használunk a sugár és késleltetés funkciók, amelyek növelik a kaotikus hatást.

Itt a hatása önmagában:

Mivel itt véletlenszerű értékeket használunk, további módszert kell hozzáadnunk az eseménykezelőnkhöz az objektumhoz:

redSparks  
 .tune({ x: e.pageX, y: e.pageY })  
 .replay()  
 .generate();

Az generál() függvény friss véletlen értékeket számít ki minden esemény meghívásakor. Enélkül az alakzat véletlenszerű értékeket választana az első híváskor, és továbbra is ezeket az értékeket használja minden további híváshoz. Ez teljesen tönkretenné a hatást, ezért feltétlenül adja hozzá ezt!

Véletlen értékeket használhat a mo.js objektumok szinte minden eleméhez, és ezek egyszerű módja az egyedi animációk készítésének.

miért használ a Google ennyi memóriát?

A véletlenszerűség azonban nem az egyetlen módja annak, hogy dinamikus mozgásokat adjunk az animációkhoz. Nézzük a tántorog funkció.

Megdöbbentő vonalak

Hogy megmutassam, hogyan tántorog funkció működik, valami olyasmit fogunk készíteni, mint egy Catherine Wheel. Hozzon létre új sorozatot a következő paraméterekkel:

const lines = new mojs.Burst({  
 radius: { 0 : 1000,easing: 'cubic.out'},  
 angle: {0 : 1440,easing: 'cubic.out'},  
 left: 0, top: 0,  
 count: 50,  
 children : {  
 shape: 'line',  
 radius: { 1 : 100,easing:'elastic.out' },  
 fill: 'none',  
 stroke: ['red','orange'],  
 delay:'stagger(10)',  
 duration: 1000  
 }  
});

Itt már minden ismerős, egy sorozat 50 gyermeket hoz létre, amelyek piros vagy narancssárga vonalak. A különbség itt az, hogy áthaladunk késleltetés ingatlan a támolyogó (10) funkció. Ez 10 ms késleltetést eredményez minden gyermek emissziója között, és ez biztosítja a kívánt centrifugáló hatást.

A lépcsőzetes függvény nem használ véletlenszerű értékeket, így nem kell a generál funkció ezúttal az eseménykezelőben. Lássuk mindazt, amit eddig tettünk:

Könnyen megállhatnánk itt, de tegyünk hozzá még egy kitörést a projekt befejezéséhez.

Intelligens négyzetek

Ehhez az utolsó sorozathoz készítsünk valamit téglalapok segítségével. Adja hozzá ezt az objektumot a kódjához és az eseményfigyelőhöz:

const redSquares = new mojs.Burst({  
 radius: { 0 : 1000,easing: 'cubic.out'},  
 angle: {360 : 0,easing: 'quad.out'},  
 left: 0, top: 0,  
 count: 20,  
 children : {  
 shape: 'rect',  
 radiusX: { 1 : 1000 },  
 radiusY:50,  
 points: 5,  
 fill: 'none',  
 stroke: {'red':'orange'},  
 strokeWidth:{5:15},  
 delay:1000,  
 duration: 3000  
 }  
});

Ez az objektum nem ad semmi újat ahhoz, amin ma már dolgoztunk, pusztán annak bemutatására szolgál, hogy mennyire bonyolult geometriai mintákat lehet könnyen létrehozni kóddal.

Ennek az objektumnak nem ez volt a tervezett eredménye, amikor az oktatóanyag megírásának tesztelési szakaszában jött létre. Miután a kód futott, világossá vált, hogy valami sokkal szebb dologba botlottam, mint amit szándékosan el tudtam volna készíteni!

Ezzel az utolsó objektummal elkészültünk. Lássuk az egészet működés közben.

Mo.js: Hatékony eszköz a webes animációkhoz

A mo.js egyszerű bevezetője a gyönyörű animációk létrehozásához szükséges alapvető eszközöket tartalmazza. Ezeknek az eszközöknek a használata szinte bármit létrehozhat, és sok feladathoz a webkönyvtárak egyszerű alternatívát jelentenek a használathoz Photoshop , After Effects vagy más költséges szoftver.

Ez a könyvtár hasznos mind a programozásban, mind a webfejlesztésben dolgozóknak, a projektben használt eseménykezelés könnyen használható reaktív gombok és szöveg létrehozására a webhelyeken vagy az alkalmazásokban. Jó szórakozást hozzá: nincsenek hibák, csak boldog balesetek!

Részvény Részvény Csipog Email Érdemes Windows 11 -re frissíteni?

A Windows újra lett tervezve. De ez elég ahhoz, hogy meggyőzze Önt, hogy váltson a Windows 10 -ről a Windows 11 -re?

Olvassa tovább Kapcsolódó témák

Programozás
JavaScript

A szerzőről Ian Buckley(216 megjelent cikk)

Ian Buckley szabadúszó újságíró, zenész, előadó és videó producer, Berlinben, Németországban él. Amikor éppen nem ír vagy a színpadon, barkácsol elektronikával vagy kóddal, abban a reményben, hogy őrült tudós lesz.

Bővebben: Ian Buckley

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide