Kako napraviti lijepe kodirane web animacije s Mo.JS -om

Ako tražite pokrenuti vlastitu web stranicu , animacije lijepog izgleda mogu joj zasjati. To možete postići na više načina, od jednostavnog izrada animiranog GIF -a od komada postojećeg filma, do učenja stvaranja vlastitog softvera od nule Miješalica ili Maja .

Na raspolaganju su i knjižnice za programsko stvaranje animacija. Povijesno gledano, web koderi su koristili jQuery za stvaranje jednostavnih animacija, ali kako se web razvijao i HTML5 postao novi standard, pojavile su se svježe opcije. CSS knjižnice za animaciju postale su nevjerojatno moćne u novom okviru, zajedno s JavaScript knjižnicama posebno dizajniranim za vektorsku animaciju u pregledniku.

---

---

Danas ćemo gledati mo.js, jedno od novije djece u bloku za stvaranje lijepih slika iz koda. Pokrivat ćemo nekoliko osnovnih funkcija, prije nego stvorimo korisničku reaktivnu seriju animacija koja stvara prekrasne uzorke.

Unesite Mo.js

Mo.js je knjižnica za jednostavno stvaranje grafike pokreta za web. Osmišljeno je kako bi olakšalo stvaranje lijepih stvari onima koji nisu previše upućeni u programski kôd, a programerima veteranima omogućilo da otkriju umjetničku stranu za koju nisu ni znali da je imaju. Kao što mu ime govori, temelji se na popularnom programskom jeziku JavaScript, iako je implementiran na takav način da svatko može lako razumjeti osnove.

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

Koristit ćemo CodePen za današnji projekt, budući da nam omogućuje rad na svemu u istom prozoru preglednika. Ako želite, možete raditi u urednik po vašem izboru umjesto toga. Ako želite preskočiti vodič korak po korak, cijeli kôd dostupan je ovdje.

Postavite novu olovku i dočekat će vas ovaj zaslon:

---

---

Prije nego što počnemo, morate unijeti nekoliko promjena. Klikni na Postavke u gornjem desnom kutu i pomaknite se do JavaScript tab.

Koristit ćemo Babel kao naš predprocesor koda, pa odaberite ovo s padajućeg izbornika. Babel čini JavaScript malo lakšim za razumijevanje, uz pružanje ECMAScript 6 podrška za starije preglednike. Ako ne znate što to znači, ne brini , samo će nam ovdje malo olakšati život.

---

---

Također moramo uvesti knjižnicu mo.js u projekt. Učinite to pretraživanjem mo.js u Dodajte vanjske skripte/olovke tekstualni upit i odabir.

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

Osnovni oblici s Mo.js -om

Prije nego počnemo s grafikom, učinimo nešto u vezi s tom zasljepljujućom bijelom pozadinom u oknu prikaza. Promijenite svojstvo boje pozadine upisivanjem ovog koda u CSS kruh.

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

Stvaranje oblika jednostavan je proces, a koncept iza njega pokreće cijelu knjižnicu. Postavimo zadani oblik kruga. Unesite ovaj kod u JS kruh:

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

Ovdje smo stvorili konst vrijednost s imenom redCirc i dodijelio ga a novi mojs.Oblik . Ako ste tek počeli s kodiranjem, obratite pozornost na redoslijed zagrada ovdje i ne zaboravite točku -zarez na kraju!

Do sada nismo prenijeli nijedan parametar osim isShowStart: true , što znači da će se pojaviti na ekranu čak i prije nego što mu dodijelimo bilo kakvo kretanje. Vidjet ćete da je postavio ružičasti krug u središte ekrana:

Ovaj je krug zadani Oblik za mo.js. Ovaj oblik možemo lako promijeniti dodavanjem retka u naš kôd:

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

Da bismo objektu dodali više svojstava, koristimo ga zarezom za odvajanje. Ovdje smo dodali a oblik vlasništvo, te ga definirali kao a 'pravo' . Spremite olovku i vidjet ćete da se zadani oblik umjesto toga mijenja u kvadrat.

Ovaj proces prenošenja vrijednosti u Oblik objekt je način na koji ih prilagođavamo. Trenutno imamo kvadrat koji ne čini puno. Pokušajmo nešto animirati.

Osnove kretanja

Da bismo dobili nešto što izgleda malo impresivnije, postavimo krug s crvenim potezom oko njega i bez ispune iznutra.

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

Kao što vidite, dodijelili smo i a širina vrijednost poteza i a radius za krug. Stvari već počinju izgledati malo drugačije. Ako se vaš oblik ne ažurira, provjerite niste li propustili zareze ili jednostruke navodnike 'neto' ili 'nema' , i provjerite jeste li kliknuli uštedjeti pri vrhu stranice.

Dodajmo ovome animaciju. U gornjem primjeru, ovaj crveni krug pojavljuje se na mjestu gdje korisnik klikne, prije nego što izbledi prema van. Jedan od načina na koji bismo to mogli učiniti je mijenjanjem radijusa i neprozirnosti tijekom vremena. Izmijenimo kod:

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

Promjenom radius vlasništvo, te dodavanje neprozirnost i trajanje svojstva, dali smo upute o obliku koje treba provoditi tijekom vremena. Ovi su Delta objekata, koji drže početne i završne informacije za ta svojstva.

Primijetit ćete da se još ništa ne događa. To je zato što nismo dodali .igra() funkciju koja mu govori da izvršava naše upute. Dodajte ga između zagrada i točke sa zarezom i vidjet ćete kako vaš krug oživljava.

Sada smo negdje stigli, no kako bismo učinili zaista posebnim, pogledajmo još nekoliko dubljih mogućnosti.

Naručivanje i olakšavanje s Mo.js -om

Trenutno, čim se krug pojavi, on počinje nestajati. Ovo će savršeno funkcionirati, ali bilo bi lijepo imati malo više kontrole.

To možemo učiniti pomoću .zatim() funkcija. Umjesto da promijenimo radijus ili neprozirnost, učinimo da naš oblik ostane tamo gdje počinje, prije nego što se promijeni nakon zadanog vremena.

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

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

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

Ovaj kôd uvodi još jedan važan dio animacije. Tamo gdje smo uputili razmjera za promjenu s 1 na 2, također smo dodijelili ublažavanje temeljeno na sinusnom valu s grijeh.in . Mo.js ima razne ugrađene krivulje za ublažavanje, s mogućnošću da napredni korisnici dodaju svoje. U tom se slučaju skala tijekom vremena događa prema sinusnom valu koji se zakrivljuje prema gore.

Za vizualni pregled različitih krivulja, provjerite easings.net . Kombinirajte ovo sa strokeWidth mijenjajući na 0 tijekom našeg zadanog trajanja, a vi ćete imati mnogo dinamičniji učinak nestajanja.

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

Pucanje potencijala u Mo.js -u

DO Rafal in Mo.js je zbirka oblika koji potječu iz središnje točke. Ovo ćemo učiniti temeljem naše gotove animacije. Zadani niz možete pozvati na isti način na koji radite oblik. Napravimo neke iskre:

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

Možete vidjeti, samo dodavanjem praznog Rafal objekt i govoreći mu da se reproducira, dobivamo zadani efekt bursta. Na veličinu i rotaciju rafala možemo utjecati tako da ga animiramo radius i kut Svojstva:

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

Već smo u naš niz dodali prilagođeni radijus i spin:

Da bismo više nalikovali iskrama, promijenimo oblike koje rafal koristi i koliko oblika rafal generira. To činite osvrćući se na svojstva djece rafala.

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();

Primijetit ćete da su podređena svojstva ista kao svojstva oblika s kojima smo već radili. Ovaj smo put za oblik odabrali križ. Svih 50 ovih oblika sada imaju ista svojstva. Počinje izgledati sasvim dobro! Ovo je prvo što će korisnik vidjeti kada klikne mišem.

Već možemo vidjeti da je crveni potez našeg početnog redCirc oblik predugo ostaje. Pokušajte promijeniti njegovo trajanje tako da se obje animacije uklope. Trebalo bi na kraju izgledati ovako:

Još uvijek nismo završili s animacijom, ali odvojimo trenutak kako bismo je učinili korisnički reaktivnom.

Glavni događaj

Koristit ćemo upravljač događajima za pokretanje naših animacija na mjestu na koje korisnik klikne. Na kraju bloka koda dodajte ovo:

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

Ovaj dio koda osluškuje klikove mišem i izvršava sve upute koje su nam navedene u zagradama. Možemo dodati i naše redCirc i iskre prigovara ovom slušatelju.

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

Dvije funkcije koje ovdje nazivamo su .tune () i .replay () . Funkcija ponavljanja slična je funkciji reprodukcije, iako navodi da bi animacija trebala početi iznova svaki put kad se klikne.

The napjev funkcija prosljeđuje vrijednosti našem objektu tako da možete promijeniti stvari kada se aktivira. U ovom slučaju prosljeđujemo koordinate stranice na koje je pritisnut miš i prema tome dodjeljujemo položaj x i y našoj animaciji. Spremite kôd i pokušajte kliknuti na zaslon. Primijetit ćete nekoliko problema.

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

Naš oblik i prasak imaju .igra() na kraju odgovarajućih blokova koda. Ovo nam više ne treba jer .replay () se poziva u rukovatelju događaja. Možete ukloniti .play () iz oba bloka koda. Iz istog razloga možete ukloniti isShowStart: true također, jer nam to više nije potrebno za prikazivanje na početku.

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

left: 0,
top: 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 raditi puno bolje.

Ovaj proces dodavanja objekata u rukovatelj događaja je način na koji ćemo pokrenuti sve naše animacije, dakle ne zaboravite od sada dodati svaki novi objekt! Sada kada osnove rade kako želimo, dodajmo neke veće i svjetlije rafale.

Dobivanje psihodelike

Počnimo s nekim vrtljivim trokutima. Ovdje je ideja bila stvoriti hipnotički stroboskopski učinak, a postavljanje je zapravo prilično jednostavno. Dodajte još jedan niz s ovim parametrima:

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
}
});

Ovdje bi već sve trebalo biti prilično poznato, iako postoji nekoliko novih stvari. Primijetit ćete da smo umjesto da oblik definiramo kao trokut, nazvali a poligon prije dodjeljivanja broja bodova ima 3.

Također smo dali ispuniti Ako koristite niz boja za rad, svaki peti trokut će se vratiti u crvenu boju, a uzorak će se nastaviti. Visoka vrijednost kut postavka čini da se rafal okreće dovoljno brzo da proizvede stroboskopski učinak.

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

Prilično psihodelično! Dodajmo još jedan rafal da ga slijedimo.

Plešući pentagoni

Možemo koristiti nešto gotovo identično našem trokuti prigovoriti da se napravi rafal koji slijedi. Ovaj malo izmijenjeni kôd proizvodi šesterokute koji se preklapaju u jarkim bojama:

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
}
});

Glavna promjena ovdje je što smo dodali a odgoditi od 500 ms, tako da rafal počinje tek nakon trokuta. Promjenom nekoliko vrijednosti ovdje je ideja bila da se rafal okrene u suprotnom smjeru od trokuta. Srećom, do trenutka kada se pojave peterokuti, stroboskopski učinak trokuta čini da izgledaju kao da se zajedno vrte.

Mala slučajnost

Dodajmo učinak koji koristi slučajne vrijednosti. Napravite niz s ovim svojstvima:

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)',
}
});

Ovaj niz će stvoriti linije koje počinju crveno i blijede do prozirnosti, smanjujući se s vremenom. Ono što ovu komponentu čini zanimljivom je to što se slučajne vrijednosti koriste za određivanje nekih njezinih svojstava.

The stupanj pomaka daje djetetu objekt početni kut. Nasumičnim odabirom daje potpuno drugačiji niz pri svakom kliku. Slučajne se vrijednosti također koriste za radius i odgoditi funkcije za dodavanje kaotičnog učinka.

Evo samog učinka:

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

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

The generirati() funkcija izračunava svježe slučajne vrijednosti svaki put kada se događaj pozove. Bez toga, oblik bi odabrao slučajne vrijednosti pri prvom pozivanju i nastavio bi koristiti te vrijednosti za svaki sljedeći poziv. Ovo bi potpuno pokvarilo učinak, pa svakako dodajte ovo!

Možete koristiti slučajne vrijednosti za gotovo svaki element mo.js objekata, a oni su jednostavan način za stvaranje jedinstvenih animacija.

datoteka je otvorena u drugom programu

Slučajnost nije jedini način dodavanja dinamičkih pokreta animacijama. Pogledajmo teturati funkcija.

Zapanjujuće linije

Kako bi pokazali kako se teturati funkcija radi, napravit ćemo nešto poput Catherine Wheel. Izradite novi niz s ovim parametrima:

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
}
});

Ovdje je već sve poznato, rafal stvara 50 djece s crvenim ili narančastim linijama. Razlika je u tome što prolazimo odgoditi nekretnina a teturanje (10) funkcija. To dodaje 10 ms kašnjenja između emisije svakog djeteta, dajući mu efekt predenja koji tražimo.

Funkcija posrtanja ne koristi nikakve slučajne vrijednosti, pa vam neće trebati generirati ovaj put funkcionira u rukovatelju događaja. Pogledajmo sve što imamo do sada na djelu:

Ovdje bismo mogli lako stati, ali dodajmo samo još jedan rafal da zaokružimo ovaj projekt.

Pametni kvadrati

Za ovaj posljednji niz napravimo nešto koristeći pravokutnike. Dodajte ovaj objekt svom kodu i slušatelju događaja:

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
}
});

Ovaj objekt ne dodaje ništa novo onome na čemu smo već danas radili, uključen je samo da bi pokazao kako se složeni geometrijski uzorci mogu lako stvoriti pomoću koda.

Ovo nije bio namjeravani ishod ovog objekta kada je nastao u fazama testiranja pisanja ovog vodiča. Nakon što je kôd pokrenut, postalo je jasno da sam naletio na nešto daleko ljepše nego što sam namjerno mogao napraviti!

S dodavanjem ovog završnog objekta, gotovi smo. Pogledajmo cijelu stvar na djelu.

Mo.js: Moćan alat za web animacije

Ovaj jednostavan uvod u mo.js obuhvaća osnovne alate potrebne za stvaranje prekrasnih animacija. Način na koji se ti alati koriste može stvoriti gotovo sve, a za mnoge zadatke web knjižnice su jednostavna alternativa korištenju Photoshop , After Effects ili drugi skupi softver.

Ova je knjižnica korisna za one koji rade i na programiranju i na web razvoju, rukovanje događajima korišteno u projektu moglo bi se lako koristiti za stvaranje reaktivnih gumba i teksta na web stranicama ili u aplikacijama. Zabavite se s tim: nema grešaka, samo sretne nesreće!

Udio Udio Cvrkut E -pošta Isplati li se nadogradnja na Windows 11?

Windows je redizajniran. No, je li to dovoljno da vas uvjeri da prijeđete s Windows 10 na Windows 11?

Pročitajte Dalje Povezane teme

• Programiranje
• JavaScript

O autoru Ian Buckley(216 objavljenih članaka)

Ian Buckley je slobodni novinar, glazbenik, izvođač i video producent koji živi u Berlinu, Njemačka. Kad ne piše ili je na pozornici, petlja s DIY elektronikom ili kodom u nadi da će postati ludi znanstvenik.

Više od Iana Buckleyja

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu