Kako napraviti prekrasne kodirane web animacije s Mo.JS

Ako želite pokrenuti vlastitu web stranicu, prekrasne animacije mogu učiniti sjaj. Mnogo je načina da se to postigne, od jednostavnog stvaranja animiranog GIF-a od dijela postojećeg filma, do učenja izrade vlastitog softvera poput Blendera ili Maye.

Na raspolaganju su i knjižnice za programsko kreiranje animacija. Povijesno gledano, web koderi koristili su jQuery za izradu jednostavnih animacija, ali kako se web razvijao i HTML5 postao novi standard, pojavile su se nove mogućnosti. CSS knjižnice za animaciju postale su nevjerojatno moćne prema novom okviru, zajedno sa JavaScript knjižnicama dizajniranim posebno za vektorsku animaciju u pregledniku.

Danas ćemo gledati mo.js, jedno od novijih klinaca na bloku za stvaranje prekrasnih slika iz koda. Pokrivat ćemo nekoliko osnovnih funkcija prije stvaranja korisničke reaktivne animacijske serije koja stvara prekrasne uzorke.

Unesite Mo.js

Mo.js je knjižnica za lako stvaranje grafike pokreta za web. Osmišljeno je da olakša stvaranje lijepih stvari onima koji nisu previše pametni, a veteranima omogućuje otkrivanje umjetničke strane za koju nikada nisu znali da je imaju. Kao što mu ime kaže, zasnovan je na popularnom programskom jeziku JavaScript, iako je implementiran na način da svatko može savladati osnove.

Prije nego što nastavimo dalje, pogledajmo što ćemo danas stvoriti:

Za današnji projekt koristit ćemo CodePen jer nam omogućuje rad na svemu u istom prozoru preglednika. Ako želite, možete umjesto toga raditi u uređivaču po vašem izboru. Ako želite preskočiti udžbenik korak po korak, puni kod dostupan je ovdje.

Postavljanje nove olovke i dočekat će vas ovaj ekran:

Prije nego što započnemo, morat ćete izvršiti nekoliko promjena. Klikni na postavke ikonu u gornjem desnom kutu i pomaknite se do JavaScript kartica.

Koristit ćemo se Babel kao naš predprocesor koda, pa odaberite to s padajućeg izbornika. Babel čini JavaScript malo lakšim za razumijevanje, zajedno s pružanjem ECMAScripta 6 Što je ES6 i što Javascript programeri trebaju znati što je ES6 i što JavaScript programeri trebaju znati ES6 se odnosi na verziju 6 programskog jezika ECMA Script (Javascript). Pogledajmo sada neke velike promjene koje ES6 donosi u JavaScript. podrška za starije preglednike. Ako ne znate što to znači, ne brini, samo će nam život malo olakšati ovdje.

Moramo uvesti i mo.js knjižnicu u projekt. Učinite to pretraživanjem mo.js u Dodajte vanjske skripte / olovke tekstualni redak i odabir.

Kad su ove dvije stvari na mjestu, kliknite Spremi i zatvori. Spremni smo za početak!

Osnovni oblici s Mo.js

Prije nego što započnemo s grafikom, učinimo nešto o toj zasljepljujućoj bijeloj pozadini u oknu pogleda. Promijenite svojstvo boje pozadine tako da napišete ovaj kôd u polje CSS okno.

tijelo pozadina: rgba (11,11,11,1); 

Stvaranje oblika jednostavan je postupak, a koncept koji stoji iza njega pokreće čitavu knjižnicu. Postavimo zadani oblik kruga. Unesite ovaj kôd u polje JS okno:

const redCirc = novi mojs.Shape (isShowStart: true);

Evo, stvorili smo const vrijednost s imenom redCirc i dodijelio je a novi mojs.Slika. Ako vam je kodiranje posve novo, obratite pozornost na redoslijed zagrada i ne zaboravite točku sa zarezom!

Do sada smo prošli bez parametara osim isShowStart: istina, što znači da će se pojaviti na zaslonu i prije nego što smo mu dodijelili bilo koji pokret. Vidjet ćete da je stavio ružičasti krug u sredinu ekrana:

Ovaj je krug zadani Oblik za mo.js. Ovaj oblik možemo lako promijeniti dodavanjem linije u naš kod:

const redCirc = novi mojs.Shape (isShowStart: true, oblik: 'rect');

Za dodavanje više svojstava objektu, zarez ga razdvajamo. Evo, dodali smo a oblik svojstvo i definirao je kao a „Direktivom”. Spremite svoju olovku i vidjet ćete da se zadani oblik mijenja u kvadrat.

Taj proces slanja vrijednosti na Oblik objekt je kako ih prilagodimo. Trenutno imamo trg koji zapravo ne čini mnogo. Pokušajmo animirati nešto.

Osnove pokreta

Da biste dobili nešto što izgleda dojmljivije, postavimo krug, s crvenim potezom oko njega i bez ispunjenja.

const redCirc = novi mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, fill: 'none', radijus: 15);

Kao što vidite, dodijelili smo i širina vrijednost udara, i a radius za krug. Stvari već počinju izgledati malo drugačije. Ako se vaš oblik ne ažurira, budite sigurni da niste propustili niti zarez ni pojedinačne navodnike 'Crvena' ili „Nitko”, i provjerite jeste li kliknuli uštedjeti pri vrhu stranice.

Dodajmo animaciju ovome. U gornjem primjeru, ovaj crveni krug pojavljuje se tamo gdje korisnik klikne, prije nego što blijedi prema van. Jedan od načina da se to dogodi je mijenjanje radijusa i neprozirnosti tijekom vremena. Promijenimo kod:

 polumjer: 15:30, neprozirnost: 1: 0, trajanje: 1000

Promjenom radius svojstvo i dodavanje neprozirnost i trajanje svojstva, dali smo upute o obliku koje ćemo provoditi s vremenom. Ovi su Delta objekata koji sadrže podatke o startu i kraju za ta svojstva.

Primijetit ćete da se još ništa ne događa. To je zato što nismo dodali .igra() funkcija da mu kažem da izvršava naše upute. Dodajte ga između zagrada i zarezom i trebali biste vidjeti kako vaš krug zaživi.

Sada se nalazimo negdje, ali da bismo zaista postali posebni, pogledajmo još nekoliko detaljnih mogućnosti.

Naručivanje i olakšavanje pomoću Mo.js

Trenutno, čim se krug pokaže, počinje izblijediti. To će raditi savršeno u redu, ali bilo bi lijepo imati malo više kontrole.

To možemo učiniti s .zatim() funkcija. Umjesto promjene radijusa ili neprozirnosti, ostavimo oblik da ostane tamo gdje počinje, prije nego što se promijenimo nakon određenog vremena.

const redCirc = novi mojs.Shape (isShowStart: true, stroke: 'red', strokeWidth: 5, fill: 'none', radijus: 15, trajanje: 1000). Zatim (// napravite više stvari ovdje) .igra();

Sada će se pojaviti naš oblik s vrijednostima koje smo mu dodijelili, pričekajte 1000 ms, prije nego što izvršimo sve što stavimo u .zatim() funkcija. Dodajmo neke upute u zagrade:

 // napravite više stvari ovdje strokeWidth: 0, mjerilo: 1: 2, olakšavanje: 'sin.in', trajanje: 500

Ovaj kôd uvodi još jedan važan dio animacije. Tamo gdje smo dali upute ljestvica za promjenu od 1 do 2, dodijelili smo i sinusno olakšanje na temelju sin.in. Mo.js ima ugrađene različite krivulje ublažavanja, a napredni korisnici mogu dodavati svoje vlastite. U ovom se slučaju razmjera tijekom vremena događa u skladu sa sinusnim valom koji se zakrivio prema gore.

Za vizualni niz različitih krivulja provjerite easings.net. Kombinirajte ovo s strokeWidth mijenjajući se na 0 tijekom našeg postavljenog trajanja, a vi imate puno dinamičniji nestajući efekt.

Oblici su osnova za sve u Mo.js-u, ali oni su samo početak priče. Pogledajmo rafala.

Probijanje s potencijalom u Mo.js

praska u Mo.js je zbirka oblika koja potiče iz središnje točke. To ćemo učiniti temeljem naše gotove animacije. Možete nazvati zadanu rafalu na isti način kao i oblik. Napravimo neke iskre:

const sparks = novi mojs.Burst (). play ();

Možete vidjeti samo dodavanjem praznog praska objekta i govoreći mu da se igra, dobivamo zadani rafalni efekt. Možemo utjecati na veličinu i rotaciju rafala animirajući ga radius i kut svojstva:

const iskre = novi mojs.Burst (radijus: 0:30, olakšavanje: 'cubic.out', kut: 0: 90, olakšavanje: 'quad.out',). play ();

Već smo dodali prilagođeni radijus i predenje:

Da bi izgledali više kao iskre, promijenimo oblike koje rafal koristi i koliko oblika rafal generira. To radite obraćajući se svojstvima djece koja pucaju.

const iskre = novi mojs.Burst (radijus: 0:30, olakšavanje: 'cubic.out'), kut: 0: 90, olakšavanje: 'quad.out', broj: 50, djeca: oblik: 'križ', hod: 'bijelo', točke: 12, polumjer: 10, ispuniti: 'nijedan', kut: 0: 360, trajanje: 300). play ();

Primijetit ćete da su dječja svojstva ista kao i svojstva oblika s kojima smo već radili. Ovaj smo put odabrali križ. Svih 50 oblika sada imaju ista svojstva. Počinje izgledati prilično dobro! To je prvo što će korisnik vidjeti kad klikne mišem.

Iako možemo vidjeti da je crveni hod našeg početnog redCirc oblik ostaje predugo. Pokušajte promijeniti njegovo trajanje tako da obje animacije stanu zajedno. Trebalo bi izgledati ovako:

Svoju smo animaciju još daleko od kraja, ali uzmimo trenutak kako bismo je učinili korisnom.

Glavni događaj

Koristit ćemo alat za obradu događaja da bismo pokrenuli naše animacije na mjestu koje korisnik klikne. Na kraju bloka koda dodajte ovo:

document.addEventListener ('klik', funkcija (e) );

Ovaj dio koda sluša klikove mišem i provodi sve upute u zagradama za nas. Možemo dodati naše redCirc i iskre predmete ovom slušaocu.

document.addEventListener ('klik', funkcija (e) redCirc .tune (x: e.pageX, y: e.pageY,) .replay (); iskre iskre .tune (x: e.pageX, y: npr. Y). reprodukcija (););

Dvije funkcije koje ovdje zovemo jesu .podešavanje () i .ponavljanje (). Funkcija ponovne reprodukcije slična je funkciji reprodukcije, iako određuje da bi animacija trebala početi iz početka svaki put kad se na nju klikne..

napjev funkcija u vrijednosti prelazi na naš objekt tako da možete promijeniti stvari kada se aktivira. U ovom slučaju prenosimo koordinate stranica na kojima je miš kliknut i dodijeljujemo sukladno x i y položaju naše animacije. Spremite kôd i pokušajte klikom na zaslon. Primijetit ćete nekoliko problema.

Prvo, naša se početna animacija i dalje prikazuje na sredini ekrana, čak i ako korisnik ništa ne klikne. Drugo, animacija se ne pokreće u točki miša, već se pomiče prema dolje i udesno. Obje ove stvari možemo lako popraviti.

Naš oblik i prasak imaju svoj .igra() na kraju njihovih blokova kodova. To nam više ne treba .ponavljanje () poziva se u poslužitelju događaja. .Play () možete ukloniti iz oba bloka koda. Iz istog razloga možete je ukloniti isShowStart: istina previše, jer nam više ne treba da se prikazuje u startu.

Da bi riješili problem s pozicioniranjem, morat ćemo postaviti vrijednosti položaja za naše objekte. Kao što ćete pamtiti iz našeg prvog oblika, mo.js ih postavlja u središte stranice prema zadanim postavkama. Kad se te vrijednosti kombiniraju s položajem miša, to stvara pomak. Da biste se riješili ovog pomaka, jednostavno dodajte ove retke u oba redCirc i iskre predmeti:

lijevo: 0, gore: 0,

Sada jedine vrijednosti položaja koje naši objekti preuzimaju su vrijednosti položaja miša koje je prenio slušatelj događaja. Sada bi stvari trebale funkcionirati mnogo bolje.

Ovaj postupak dodavanja predmeta u obrađivač događaja je način na koji ćemo pokrenuti sve naše animacije, dakle ne zaboravite od sada nadalje dodati nove objekte! Sad kad smo osnove radili kako ih želimo, dodajmo neke veće i svjetlije pojave.

Dobivanje psihodelije

Krenimo s nekim trokutima koji se okreću. Ideja ovdje bila je stvaranje hipnotičkog stroboskopskog efekta, a postavljanje toga zapravo je prilično jednostavno. Dodajte još jedan niz s ovim parametrima:

const trokut = novi mojs.Burst (radijus: 0: 1000, olakšavanje: 'cubic.out'), kut: 1080: 0, olakšavanje: 'quad.out', lijevo: 0, vrh: 0, broj : 20, djeca: oblik: 'poligon', točke: 3, polumjer: 10: 100, ispuniti: ['crvena', 'žuta', 'plava', 'zelena'], trajanje: 3000) ;

Sve bi ovdje već trebalo biti prilično poznato, iako postoji par novih točaka. Primijetit ćete da smo oblik, umjesto da definiramo kao trokut, nazvali a poligon prije dodjeljivanja broja bodova ima kao 3.

Mi smo također dali ispuniti funkcioniraju niz boja s kojima će raditi, svaki peti trokut će se vratiti na crveno, a uzorak će se nastaviti. Visoka vrijednost kut podešavanje čini da se rafalni spin dovoljno brzo stvori stroboskopski učinak.

Ako kôd ne radi za vas, provjerite jeste li dodali objekt trokuta u klasu slušatelja događaja kao što smo to učinili s prethodnim objektima.

Prilično psihodeličan! Dodajmo još jedan prasak da bismo ga slijedili.

Pentagoni koji plešu

Možemo koristiti nešto gotovo identično našem trokuti objekta napraviti prasak koji ga slijedi. Ovaj malo izmijenjeni kôd stvara jarko obojene preklapajuće vrtoglave šesterokute:

const pentagons = novi mojs.Burst (radijus: 0: 1000, olakšavanje: 'cubic.out', kut: 0: 720, olakšavanje: 'quad.out', lijevo: 0, vrh: 0, broj : 20, djeca: oblik: 'poligon', radijus: 1: 300, točke: 5, ispuniti: ['ljubičasta', 'ružičasta', 'žuta', 'zelena'], kašnjenje: 500, trajanje: 3000);

Glavna promjena ovdje je da smo dodali a odgoditi od 500 ms, tako da praska neće početi tek nakon trokuta. Promjenom nekoliko vrijednosti, ideja je ovdje bila da se rafali okreću u suprotnom smjeru od trokuta. Srećom nesreće, do trenutka pojavljivanja pentagona, stroboskopski učinak trokuta čini da izgledaju kao da se vrte zajedno.

Mala slučajnost

Dodajmo efekt koji koristi slučajne vrijednosti. Napravite rafal s ovim svojstvima:

const redSparks = novi mojs.Burst (lijevo: 0, vrh: 0, broji: 8, polumjer: 150: 350, kut: 0:90, olakšavanje: 'cubic.out'), djeca: oblik: 'linija', hod: 'red': 'transparent', hod širine: 5, ljestvicaX: 0.5: 0, stupanj promjene: 'rand (-90, 90)', polumjer: 'rand (20, 300)' , trajanje: 500, kašnjenje: 'rand (0, 150)',);

Ovaj prasak stvorit će crte koje počinju crveno i blede do prozirnosti, smanjujući se s vremenom. Ono što ovu komponentu čini zanimljivom jest to što se za određivanje nekih njenih svojstava koriste nasumične vrijednosti.

degreeShift daje djetetu predmet početni kut. Slučajnim odabirom ovoga daje se potpuno drugačiji rafal na svakom kliku. Slučajne vrijednosti se također koriste za radius i odgoditi funkcije za dodavanje kaotičnog učinka.

Evo efekta po sebi:

Budući da ovdje koristimo slučajne vrijednosti, trebamo dodati dodatnu metodu u naš obrađivač događaja za objekt:

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

generirati() funkcija izračunava svježe slučajne vrijednosti svaki put kada se događaj poziva. Bez toga, oblik bi odabrao slučajne vrijednosti pri prvom pozivanju i nastavio koristiti te vrijednosti za svaki sljedeći poziv. To bi u potpunosti uništilo učinak, pa obavezno dodajte ovo!

Možete koristiti nasumične vrijednosti za gotovo svaki element mo.js objekata, a oni su jednostavan način izrade jedinstvenih animacija.

Međutim, slučajnost nije jedini način na koji se dinamičkim pokretima mogu dodati animacije. Pogledajmo teturati funkcija.

Stupne linije

Kako bi pokazali kako teturati funkcija djeluje, napravit ćemo nešto poput Catherine Wheel. Stvorite novi rafal s ovim parametrima:

const linije = novi mojs.Burst (radijus: 0: 1000, olakšavanje: 'cubic.out'), kut: 0: 1440, olakšavanje: 'cubic.out', lijevo: 0, vrh: 0, broji : 50, djeca: oblik: 'linija', radijus: 1: 100, olakšavanje: 'elastično.out', ispuniti: 'nema', hod: ['crvena', 'narančasta'], kašnjenje: 'posrtanje (10) ', trajanje: 1000);

Sve što je ovdje već poznato većinom, prasak stvara 50 djece koja su crvene ili narančaste linije. Razlika je u tome što smo prošli odgoditi posjed a ševrdati (10) funkcija. To dodaje 10 ms zakašnjenja između emisije svakog djeteta i daje učinak predenja koji tražimo.

Funkcija slaganja ne koristi nijedne slučajne vrijednosti, tako da vam neće trebati a generirati ovaj put funkcionira u alatu za obradu događaja. Pogledajmo sve što smo dosad imali na djelu:

Ovdje bismo se lako mogli zaustaviti, ali dodajmo samo još jedan prasak za zaokruživanje ovog projekta.

Pametni kvadrati

Za ovaj zadnji prasak, napravimo nešto koristeći pravokutnike. Dodajte ovaj objekt svom slušatelju koda i događaja:

const redSquares = novi mojs.Burst (radijus: 0: 1000, olakšavanje: 'cubic.out'), kut: 360: 0, olakšavanje: 'quad.out', lijevo: 0, vrh: 0, broj : 20, djeca: oblik: 'rect', radijusX: 1: 1000, radijusY: 50, bodovi: 5, ispuni: 'nijedan', hod: 'crvena': 'narančasta', širina hoda: 5 : 15, kašnjenje: 1000, trajanje: 3000);

Ovaj objekt ne dodaje ništa novo na onome na čemu smo već danas radili, on uključuje samo pokazati kako se složeni geometrijski obrasci lako mogu stvoriti pomoću koda.

To nije bio planirani ishod ovog predmeta kada je stvoren u fazama testiranja pisanja ovog vodiča. Jednom kad se kôd pokrenuo, postalo je jasno da sam naišao na nešto daleko ljepše nego što sam mogao namjerno napraviti!

S tim završnim objektom dodano, gotovi smo. Pogledajmo cijelu stvar na djelu.

Mo.js: Snažan alat za web animacije

Ovaj jednostavan uvod u mo.js obuhvaća osnovne alate potrebne za stvaranje prekrasnih animacija. Način korištenja ovih alata može stvoriti gotovo sve, a za mnoge zadatke web knjižnice su jednostavna alternativa korištenju Photoshopa, After Effects ili drugog skupog softvera.

Ova je knjižnica korisna onima koji rade i u programiranju i u web razvoju. Programiranje u odnosu na web razvoj: U čemu je razlika? Programiranje u odnosu na web razvoj: u čemu je razlika? Možda mislite da programeri aplikacija i web programeri rade isti posao, ali to je daleko od istine. Ovdje su ključne razlike između programera i web programera. , obrada događaja korištena u projektu lako se može upotrijebiti za stvaranje reaktivnih gumba i teksta na web stranicama ili u aplikacijama. Zabavite se s njim: nema pogrešaka, samo sretne nesreće!