Kako narediti čudovite kodirane spletne animacije z Mo.JS

Če iščete zaženite svojo spletno stran , čudovite animacije lahko zasijejo. Obstaja več načinov, kako to doseči, preprosto ustvarjanje animiranega GIF -a od kosa obstoječega filma do učenja, da bi iz nič naredili svojega s programsko opremo, kot je Mešalnik ali Maja .

Na voljo so tudi knjižnice za programsko ustvarjanje animacij. Zgodovinsko gledano so spletni kodirniki uporabljali jQuery za ustvarjanje preprostih animacij, vendar se je splet razvijal in HTML5 postal nov standard, pojavile so se nove možnosti. Knjižnice CSS za animacijo so postale neverjetno zmogljive v novem okviru, skupaj s knjižnicami JavaScript, ki so bile zasnovane posebej za vektorsko animacijo v brskalniku.

---

---

Danes si bomo ogledali mo.js, enega najnovejših otrok v bloku za ustvarjanje čudovitih posnetkov iz kode. Preden bomo ustvarili uporabniško reaktivno serijo animacij, ki ustvarja čudovite vzorce, bomo obravnavali nekaj osnovnih funkcij.

Vnesite Mo.js

Mo.js je knjižnica za enostavno ustvarjanje grafike gibanja za splet. Zasnovan je tako, da olajša ustvarjanje lepih stvari za tiste, ki se ne razumejo preveč v kodeks, hkrati pa omogoča programerjem veteranom, da odkrijejo umetniško plat, za katero sploh niso vedeli, da jo imajo. Kot že ime pove, temelji na priljubljenem programskem jeziku JavaScript, čeprav je izveden tako, da lahko vsakdo zlahka razume osnove.

Preden nadaljujemo, si poglejmo, kaj bomo ustvarili danes:

Mi bomo uporabljali CodePen za današnji projekt, saj nam omogoča delo na vsem v istem oknu brskalnika. Če želite, lahko delate v urednik po vaši izbiri namesto tega. Če želite preskočiti vadbo po korakih, je celotna koda na voljo tukaj.

Nastavite novo pisalo in pozdravil vas bo ta zaslon:

---

---

Preden začnemo, morate narediti nekaj sprememb. Kliknite na Nastavitve v zgornjem desnem kotu in se pomaknite do JavaScript zavihek.

Uporabljali bomo Babel kot naš predprocesor kode, zato izberite to v spustnem meniju. Babel olajša razumevanje JavaScripta skupaj z zagotavljanjem ECMAScript 6 podpora za starejše brskalnike. Če ne veste, kaj to pomeni, ne skrbi , tukaj nam bo samo olajšalo življenje.

---

---

V projekt moramo uvoziti tudi knjižnico mo.js. To naredite tako, da iščete mo.js v Dodajte zunanje skripte/pisala besedilni poziv in ga izberite.

Ko sta ti dve stvari na mestu, kliknite Shrani in zapri . Pripravljeni smo začeti!

Osnovne oblike z Mo.js

Preden začnemo z grafiko, naredimo nekaj glede tega slepega belega ozadja v podoknu za pogled. Spremenite lastnost barve ozadja tako, da to kodo vpišete v CSS kruh.

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

Ustvarjanje oblike je preprost postopek in koncept za njo poganja celotno knjižnico. Nastavimo privzeto obliko kroga. To kodo vnesite v JS kruh:

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

Tukaj smo ustvarili const vrednost z imenom redCirc in jo dodelila a nov mojs. Oblika . Če ste kodiranje popolnoma novi, bodite pozorni na vrstni red oklepajev in ne pozabite na podpičje na koncu!

Doslej nismo podali nobenega parametra, razen isShowStart: res , kar pomeni, da se bo pojavil na zaslonu, še preden smo mu dodelili gibanje. Videli boste, da je na sredino zaslona postavil roza krog:

Ta krog je privzeto Oblika za mo.js. To obliko lahko preprosto spremenimo tako, da svoji kodi dodamo vrstico:

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

Če želimo predmetu dodati več lastnosti, ga ločimo z vejico. Tukaj smo dodali a obliko lastnino in jo opredelila kot a 'rect' . Shranite pisalo in videli boste, da se privzeta oblika spremeni v kvadrat.

Ta proces prenosa vrednosti v Oblika Predmet je, kako jih prilagodimo. Trenutno imamo kvadrat, ki v resnici ne naredi veliko. Poskusimo nekaj animirati.

Osnove gibanja

Da bi dobili nekaj, kar izgleda nekoliko bolj impresivno, postavimo krog z rdečo črto okoli njega in brez polnjenja v notranjosti.

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

Kot lahko vidite, smo dodelili tudi premer vrednost kapi in a polmer za krog. Stvari so že začele izgledati nekoliko drugače. Če se vaša oblika ne posodablja, se prepričajte, da niste zamudili nobenih vej ali enojnih narekovajev 'mreža' ali 'nič' in se prepričajte, da ste kliknili shranite na vrhu strani.

K temu dodajmo še animacijo. V zgornjem primeru se ta rdeči krog pojavi tam, kjer uporabnik klikne, preden zbledi navzven. Eden od načinov, kako bi to lahko dosegli, je s spreminjanjem polmera in motnosti skozi čas. Spremenimo kodo:

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

S spremembo polmer lastnino in dodajanje motnost in trajanje lastnosti, smo dali navodila za obliko, ki jih je treba izvajati skozi čas. To so Delta objekti, ki za te lastnosti vsebujejo podatke o začetku in koncu.

Opazili boste, da se še nič ne dogaja. To je zato, ker nismo dodali .play () funkcijo, ki mu pove, naj izvaja naša navodila. Dodajte ga med končne oklepaje in podpičje in videli boste, da vaš krog oživi.

Zdaj smo nekam prišli, a da bi bilo res posebno, poglejmo še nekaj poglobljenih možnosti.

Naročanje in poenostavitev z Mo.js

Takoj, ko se pojavi krog, začne izginjati. To bo delovalo popolnoma v redu, vendar bi bilo lepo imeti malo več nadzora.

To lahko storimo z .Potem () funkcijo. Namesto da bi spremenili svoj polmer ali motnost, naj naša oblika ostane tam, kjer se začne, preden se po določenem času spremeni.

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

Zdaj se bo prikazala naša oblika z vrednostmi, ki smo ji jo dodelili, počakajte 1000 ms, preden izvedete vse, kar vnesete v .Potem () funkcijo. Dodajmo med oklepaje nekaj navodil:

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

Ta koda uvaja še en pomemben del animacije. Kjer smo poučili lestvici za spremembo z 1 na 2 smo dodelili tudi umirjanje na osnovi sinusnega vala s greh.in . Mo.js ima vgrajene različne lahke krivulje, ki jih lahko napredni uporabniki dodajo. V tem primeru se lestvica skozi čas zgodi glede na sinusni val, ki se ukrivi navzgor.

Za vizualni pregled različnih krivulj si oglejte easings.net . Združite to z strokeWidth spreminjanje na 0 v času našega nastavljenega trajanja in imate veliko bolj dinamičen učinek izginjanja.

Oblike so osnova za vse v Mo.js -u, vendar so le začetek zgodbe. Poglejmo Rafali .

Pokanje z potencialom v Mo.js

TO Izbruh v Mo.js je zbirka oblik, ki izvirajo iz osrednje točke. Te bomo naredili za osnovo naše dokončane animacije. Privzeti niz lahko pokličete na enak način kot obliko. Naredimo nekaj isker:

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

To lahko vidite, če dodate prazno Izbruh objekt in mu povemo, naj se predvaja, dobimo privzeti učinek bursta. Na velikost in vrtenje izbruha lahko vplivamo tako, da ga animiramo polmer in kot lastnosti:

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

Že smo dodali polmer po meri in vrtenje v naš rafal:

Da bodo videti bolj kot iskrice, spremenimo oblike, ki jih rafal uporablja, in število oblik, ki jih rafal ustvari. To naredite tako, da obravnavate lastnosti otrok počila.

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

Opazili boste, da so podrejene lastnosti enake kot lastnosti oblike, s katerimi smo že delali. Tokrat smo za obliko izbrali križ. Vseh 50 oblik ima zdaj iste lastnosti. Začelo je videti zelo dobro! To je prva stvar, ki jo bo uporabnik videl, ko klikne miško.

Že lahko vidimo, da je rdeča poteza naše začetnice redCirc oblika se predolgo zadržuje. Poskusite spremeniti njeno trajanje, tako da se obe animaciji ujemata. Na koncu bi moral izgledati nekako takole:

Z animacijo še zdaleč nismo končali, vendar si vzemimo trenutek, da bo uporabniško odzivna.

Glavni dogodek

Za obdelavo dogodkov bomo uporabili upravljalnik dogodkov na mestu, ki ga uporabnik klikne. Na koncu bloka kode dodajte to:

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

Ta del kode posluša klike miške in izvede vsa navodila, ki so nam v oklepaju. Lahko dodamo svoje redCirc in iskrice ugovarja temu poslušalcu.

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

Dve funkciji, ki ju tukaj kličemo, sta .tune () in .ponovitev() . Funkcija predvajanja je podobna funkciji predvajanja, čeprav določa, da se mora animacija znova začeti od začetka vsakič, ko jo kliknete.

The melodija funkcija posreduje vrednosti našemu objektu, tako da lahko spremenite stvari, ko se sproži. V tem primeru podajamo koordinate strani, kjer je bila kliknjena miška, in temu dodelimo položaj x in y naše animacije. Shranite kodo in poskusite klikniti na zaslon. Opazili boste nekaj težav.

Prvič, naša začetna animacija se še vedno prikaže na sredini zaslona, ​​tudi če uporabnik nič ne klikne. Drugič, animacija se ne sproži na točki miške, ampak zamakne navzdol in desno. Obe stvari lahko enostavno popravimo.

Naša oblika in razpoka imata .play () na koncu svojih kodnih blokov. Tega ne potrebujemo več kot .ponovitev() se pokliče v upravljalcu dogodkov. Iz obeh blokov kode lahko odstranite .play (). Iz istega razloga lahko odstranite isShowStart: res tudi, ker ga ne potrebujemo več za prikaz na začetku.

Za odpravo težave s pozicioniranjem bomo morali za naše objekte nastaviti vrednosti položaja. Kot se spomnite že iz prve oblike, jih mo.js privzeto postavi na sredino strani. Ko te vrednosti združimo s položajem miške, ustvari odmik. Če se želite znebiti tega odmika, preprosto dodajte te vrstice v oba redCirc in iskrice predmeti:

left: 0,
top: 0,

Zdaj so edine vrednosti položaja, ki jih prevzamejo naši objekti, vrednosti položaja miške, ki jih posreduje poslušalec dogodkov. Zdaj bi morale stvari delovati veliko bolje.

Ta postopek dodajanja predmetov v upravljalnik dogodkov bo sprožil vse naše animacije ne pozabite mu od zdaj dodati vsak nov predmet! Zdaj, ko imamo osnove, ki delujejo tako, kot si želimo, dodajmo nekaj večjih in svetlejših izbruhov.

Pridobitev psihodelije

Začnimo z nekaj vrtečimi se trikotniki. Zamisel je bila ustvariti hipnotični stroboskopski učinek, nastavitev pa je pravzaprav precej enostavna. Dodajte še en niz s temi parametri:

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

Tu bi moralo biti že dokaj znano, čeprav obstaja nekaj novih točk. Opazili boste, da smo obliko namesto opredelitve kot trikotnika poimenovali a poligon pred dodelitvijo števila točk ima kot 3.

Tudi mi smo dali napolni funkcijo niza barv za delo, se bo vsak peti trikotnik vrnil v rdečo barvo in vzorec se bo nadaljeval. Visoka vrednost kot nastavitev naredi rafal dovolj hiter, da ustvari stroboskopski učinek.

Če vam koda ne deluje, se prepričajte, da ste objekt trikotnikov dodali v razred poslušalcev dogodkov, kot smo to storili s prejšnjimi objekti.

Precej psihodelično! Dodajmo še en rafal, da mu sledimo.

Plesni pentagoni

Lahko uporabimo nekaj skoraj enakega kot naše trikotniki ugovarjati, da mu sledi rafal. Ta nekoliko spremenjena koda proizvaja svetleče prekrivajoče se šesterokotnike, ki se prekrivajo:

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 sprememba tukaj je, da smo dodali a zamuda 500 ms, tako da se bo rafal začel šele po trikotnikih. S spremembo nekaj vrednosti je bila zamisel tukaj, da se izbruh vrti v nasprotni smeri trikotnikov. Po srečni nesreči, ko se pojavijo pentagoni, je zaradi stroboskopskega učinka trikotnikov videti, kot da se vrtijo skupaj.

Malo naključja

Dodajmo učinek, ki uporablja naključne vrednosti. Ustvarite niz s temi lastnostmi:

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

Ta niz bo ustvaril črte, ki se začnejo rdeče in zbledijo do prosojnosti, sčasoma se skrčijo. Zanimivost te komponente je, da se za določitev nekaterih njenih lastnosti uporabljajo naključne vrednosti.

The stopnjaShift daje otrokovemu predmetu začetni kot. Z naključnim razporejanjem pri vsakem kliku dobi popolnoma drugačen utrip. Naključne vrednosti se uporabljajo tudi za polmer in zamuda funkcije za dodajanje kaotičnega učinka.

Tu je učinek sam po sebi:

Ker tukaj uporabljamo naključne vrednosti, moramo v obravnavalec dogodkov za objekt dodati dodatno metodo:

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

The ustvariti () funkcija izračuna sveže naključne vrednosti ob vsakem klicu dogodka. Brez tega bi oblika ob prvem klicu izbrala naključne vrednosti in te vrednosti še naprej uporabljala za vsak naslednji klic. To bi popolnoma uničilo učinek, zato dodajte to!

Za skoraj vse elemente predmetov mo.js lahko uporabite naključne vrednosti, ki so preprost način za ustvarjanje edinstvenih animacij.

brezplačne glasbene aplikacije brez povezave za android

Naključje pa ni edini način za dodajanje dinamičnih gibov animacijam. Poglejmo si omagati funkcijo.

Osupljive črte

Da bi pokazali, kako omagati funkcija deluje, naredili bomo nekaj podobnega Catherine Wheel. Ustvarite nov niz s temi parametri:

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

Tukaj je že vse znano, rafal ustvari 50 otrok z rdečimi ali oranžnimi črtami. Razlika je v tem, da gremo mimo zamuda lastnina a tečaj (10) funkcijo. To doda 10 ms zamika med emisijo vsakega otroka, kar daje učinek vrtenja, ki ga iščemo.

Funkcija zamikanja ne uporablja nobenih naključnih vrednosti, zato ne potrebujete ustvariti tokrat v upravljalniku dogodkov. Poglejmo vse, kar imamo do zdaj v akciji:

Tu bi se lahko zlahka ustavili, a naj zaokrožimo ta projekt.

Pametni kvadrati

Za ta zadnji niz naredimo nekaj s pravokotniki. Dodajte svoj predmet svoji kodi in poslušalcu dogodkov:

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

Ta objekt ne dodaja nič novega k temu, kar smo danes že delali, vključen je zgolj zato, da pokaže, kako je mogoče s kodo enostavno ustvariti kompleksne geometrijske vzorce.

To ni bil pričakovani rezultat tega predmeta, ko je bil ustvarjen v preskusnih fazah pisanja te vadnice. Ko je koda zagnana, je postalo jasno, da sem naletel na nekaj veliko lepšega, kot bi lahko naredil namenoma!

S tem zadnjim objektom smo končali. Poglejmo vse v akciji.

Mo.js: Zmogljivo orodje za spletne animacije

Ta preprost uvod v mo.js zajema osnovna orodja, potrebna za ustvarjanje čudovitih animacij. Način uporabe teh orodij lahko ustvari skoraj vse, za številne naloge pa so spletne knjižnice preprosta alternativa uporabi Photoshop , After Effects ali drugo drago programsko opremo.

Ta knjižnica je uporabna za tiste, ki se ukvarjajo s programiranjem in spletnim razvojem. Upravljanje dogodkov, uporabljeno v projektu, bi lahko preprosto uporabili za ustvarjanje reaktivnih gumbov in besedila na spletnih mestih ali v aplikacijah. Zabavajte se: pri tem ni napak, le srečne nesreče!

Deliti Deliti Cvrkutati E-naslov Ali je vredno nadgraditi na Windows 11?

Windows je bil preoblikovan. Toda ali je to dovolj, da vas prepriča, da preidete z operacijskega sistema Windows 10 na Windows 11?

Preberite Naprej Sorodne teme

• Programiranje
• JavaScript

O avtorju Ian Buckley(216 objavljenih člankov)

Ian Buckley je samostojni novinar, glasbenik, izvajalec in video producent, ki živi v Berlinu v Nemčiji. Ko ne piše ali je na odru, se ukvarja z elektroniko ali kodo DIY v upanju, da bo postal nori znanstvenik.

Več od Iana Buckleyja

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti