Kuidas teha Mo.JS abil kauneid kodeeritud veebianimatsioone

Kui otsite alustage oma veebisaiti , kauni välimusega animatsioonid võivad selle särama panna. Selle saavutamiseks on mitu võimalust, alates lihtsast animeeritud GIF -i tegemine alates tükist olemasolevast filmist kuni õppimiseni nullist ise tarkvara luua Blender või Maya .

Animatsioonide programmiliseks loomiseks on saadaval ka raamatukogud. Ajalooliselt kasutasid veebikoodrid lihtsate animatsioonide loomiseks jQuery, kuid veebi arenedes ja HTML5 sai uueks standardiks, ilmusid uued võimalused. Animatsiooni jaoks mõeldud CSS -raamatukogud muutusid uues raamistikus uskumatult võimsaks ning JavaScripti teegid, mis on spetsiaalselt loodud brauseri vektoranimatsiooniks.

---

---

Täna vaatame mo.js -i, kes on üks uuemaid lapsi plokis, et luua koodist ilusaid pilte. Enne kasutaja reaktiivse animatsiooniseeria loomist, mis loob ilusaid mustreid, käsitleme mõningaid põhifunktsioone.

Sisestage Mo.js

Mo.js on raamatukogu, mis võimaldab hõlpsalt veebis liikuvat graafikat luua. Selle eesmärk on muuta ilusate asjade loomine lihtsaks neile, kes pole liiga kooditarkad, võimaldades samal ajal veteranprogrammeerijatel avastada kunstilise poole, mida nad kunagi ei teadnud. Nagu nimigi ütleb, põhineb see populaarsel JavaScripti programmeerimiskeelel, kuigi see on rakendatud nii, et igaüks saab põhitõed hõlpsasti kätte.

Enne kui läheme kaugemale, vaatame, mida me täna loome:

Me hakkame kasutama CodePen tänase projekti jaoks, kuna see võimaldab meil töötada ühes brauseriaknas kõigega. Kui soovite, võite töötada ettevõttes teie valitud toimetaja selle asemel. Kui soovite samm -sammult õpetuse vahele jätta, on täielik kood saadaval siin.

Seadistage uus pliiats ja teid tervitatakse selle ekraaniga:

---

---

Enne alustamist peate tegema paar muudatust. Klõpsake Seaded paremas ülanurgas ja navigeerige JavaScript vahekaart.

Me hakkame kasutama Paabel meie koodi eeltöötlejana, valige see rippmenüüst. Babel muudab JavaScripti ja selle pakkumise pisut lihtsamaks ECMAScript 6 vanemate brauserite tugi. Kui te ei tea, mida see tähendab, ära muretse , see teeb meie elu siin natuke lihtsamaks.

---

---

Samuti peame projekti importima raamatukogu mo.js. Tehke seda otsides mo.js aastal Lisage väliseid skripte/pliiatseid tekstiviip ja valige see.

Kui need kaks asja on paigas, klõpsake nuppu Salvesta ja sulge . Oleme valmis alustama!

Põhivormid Mo.js -iga

Enne graafikaga alustamist teeme midagi selle vaatevälja pimestava valge taustaga. Muutke taustavärvi omadust, kirjutades selle koodi kausta CSS leib.

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

Kujundi loomine on lihtne protsess ja selle taga olev kontseptsioon juhib kogu raamatukogu. Seadistame vaikimisi ringikuju. Sisestage see kood kausta JS leib:

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

Siin oleme loonud a const väärtus koos nimega redCirc ja määras selle a uued mojid. Kuju . Kui olete kodeerimises täiesti uus, pöörake tähelepanu siinsele sulgude järjekorrale ja ärge unustage semikoolonit lõpus!

Siiani pole me ühtegi parameetrit läbinud, välja arvatud isShowStart: tõsi , mis tähendab, et see ilmub ekraanile isegi enne, kui oleme sellele liikumise määranud. Näete, et see on asetanud ekraani keskele roosa ringi:

See suhtlusring on vaikimisi Kuju mo.js jaoks. Saame seda kuju hõlpsalt muuta, lisades oma koodile rea:

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

Objektile rohkemate omaduste lisamiseks kasutame selle eraldamiseks koma. Siia oleme lisanud a kuju vara ja määratles selle a 'õige' . Salvestage oma pliiats ja näete, et vaikekuju muutub ruuduks.

See protsess väärtuste edastamiseks Kuju objekt on see, kuidas me neid kohandame. Praegu on meil ruut, mis ei tee tegelikult palju. Proovime midagi animeerida.

Liikumise põhitõed

Et saada midagi, mis tundub veidi muljetavaldavam, paneme paika ringi, mille ümber on punane kriips ja mille sees pole täidist.

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

Nagu näete, oleme määranud ka a laius löögi väärtus ja a raadius ringi jaoks. Asjad hakkavad juba natuke teistmoodi välja nägema. Kui teie kuju ei uuene, veenduge, et te pole mööda pannud koma ega jutumärke 'võrk' või 'pole' ja veenduge, et olete klõpsanud päästa lehe ülaosas.

Lisame sellele animatsiooni. Ülaltoodud näites kuvatakse see punane ring, kus kasutaja klõpsab, enne kui see väljapoole tuhmub. Üks võimalus selle saavutamiseks on muuta raadiust ja läbipaistmatust aja jooksul. Muudame koodi:

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

Muutes raadius vara ja lisades läbipaistmatus ja kestus omadused, oleme andnud kuju juhised, mida aja jooksul täita. Need on Delta objekte, hoides nende omaduste alguse ja lõpu teavet.

Te märkate, et midagi ei juhtu veel. Seda seetõttu, et me pole seda lisanud .play () funktsioon, mis käsib tal täita meie juhiseid. Lisage see lõppklambrite ja semikooloni vahele ning näete, kuidas teie ring elavneb.

Nüüd jõuame kuhugi, kuid et see oleks tõesti eriline, vaatame veel mõnda põhjalikumat võimalust.

Tellimine ja lihtsustamine Mo.js abil

Praegu, kui ring ilmub, hakkab see kustuma. See töötab täiesti hästi, kuid oleks tore, kui oleks veidi rohkem kontrolli.

Me saame seda teha . siis () funktsiooni. Selle asemel, et muuta oma raadiust või läbipaistmatust, hoiame oma kuju enne alguse muutmist, kus see algab.

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

Nüüd kuvatakse meie kuju väärtustega, mille oleme sellele määranud, oodake 1000 ms, enne kui teete midagi, mida me sellesse paneme . siis () funktsiooni. Lisame sulgude vahele mõned juhised:

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

See kood tutvustab animatsiooni teist olulist osa. Kus oleme juhendanud kaal muutmiseks 1 -lt 2 -le oleme määranud ka siinuslainepõhise leevendamise patt.in . Mo.js -l on sisseehitatud mitmesuguseid leevenduskõveraid, mida on edasijõudnud kasutajatel võimalik lisada. Sel juhul toimub aja jooksul skaala vastavalt ülespoole kaarduvale siinuslainele.

Vaadake erinevate kõverate visuaalset allakäiku easings.net . Kombineerige see löögi laius muutes meie määratud aja jooksul 0 -ks ja teil on palju dünaamilisem kadumisefekt.

Vormid on Mo.js -i kõige aluseks, kuid need on alles loo algus. Vaatame Puruneb .

Potentsiaalidest pakatav Mo.js -is

TO Plahvatus Mo.js -s on kujundite kogum, mis pärineb keskpunktist. Teeme need valmis animatsiooni aluseks. Vaikepurset saate nimetada samamoodi nagu kujundit. Teeme mõned sädemed:

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

Näete, lisades tühja Plahvatus objekti ja paludes seda mängida, saame vaikimisi sarivõtte efekti. Me saame mõjutada sarivõtte suurust ja pöörlemist, seda animeerides raadius ja nurk omadused:

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

Oleme juba oma sarjale lisanud kohandatud raadiuse ja keerutuse:

Selleks, et need näeksid rohkem sädemetena, muudame sarjas kasutatavaid kujundeid ja seda, kui palju kujusid purske genereerib. Teete seda, pöörates tähelepanu purske laste omadustele.

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

Märkate, et alamomadused on samad, mis kuju omadustega, millega oleme juba töötanud. Seekord oleme kujundiks valinud risti. Kõigil neil 50 kujundil on nüüd samad omadused. See hakkab päris hea välja nägema! See on esimene asi, mida kasutaja hiireklõpsamisel näeb.

Juba kuigi näeme, et meie algustähe punane löök redCirc kuju jääb liiga kauaks. Proovige muuta selle kestust nii, et mõlemad animatsioonid sobiksid kokku. See peaks lõpuks välja nägema umbes selline:

Me pole oma animatsiooniga kaugeltki valmis, kuid võtame hetke, et see kasutajale reageerida.

Põhiturniir

Kasutame sündmuste käitlejat, et käivitada animatsioonid kohas, kus kasutaja klõpsab. Koodiploki lõppu lisage see:

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

See kooditükk kuulab hiireklõpsu ja täidab kõik sulgudes olevad juhised. Võime lisada oma redCirc ja sädemed esitab sellele kuulajale objekte.

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

Kaks funktsiooni, mida me siin nimetame, on .tune () ja .replay () . Kordusfunktsioon sarnaneb esitusfunktsiooniga, kuigi see määrab, et animatsioon peaks iga kord klõpsamisel alustama algusest.

The häälestada funktsioon edastab meie objektile väärtused, nii et saate selle käivitamisel asju muuta. Sel juhul sisestame lehe koordinaadid, kus hiirel klõpsati, ja määrame vastavalt oma animatsiooni positsiooni x ja y. Salvestage kood ja proovige ekraanil klõpsata. Märkad paari probleemi.

Esiteks kuvatakse meie esialgne animatsioon endiselt ekraani keskel, isegi kui kasutaja midagi ei klõpsa. Teiseks ei käivitata animatsiooni hiirepunktis, vaid nihutatakse alla ja paremale. Mõlemat asja saame hõlpsasti parandada.

Meie kuju ja plahvatus on .play () nende vastavate koodiplokkide lõpus. Me ei vaja seda enam .replay () helistatakse sündmuste käitlejas. Saate eemaldada .play () mõlemast koodiplokist. Samal põhjusel saate eemaldada isShowStart: tõsi samuti, kuna meil pole seda enam vaja alguses näidata.

Positsioneerimisprobleemi lahendamiseks peame oma objektidele määrama positsiooniväärtused. Nagu mäletate meie esimesest kujust, asetab mo.js need vaikimisi lehe keskele. Kui need väärtused on kombineeritud hiire asukohaga, loob see nihke. Sellest nihkest vabanemiseks lisage need read lihtsalt mõlemale redCirc ja sädemed objektid:

left: 0,
top: 0,

Ainsad positsiooniväärtused, mida meie objektid võtavad, on sündmuste kuulaja poolt edastatud hiire positsiooni väärtused. Nüüd peaksid asjad palju paremini toimima.

See objektide sündmuste käitlejasse lisamise protsess käivitab kõik meie animatsioonid pidage meeles, et lisate sellele nüüdsest iga uue objekti! Nüüd, kui põhitõed töötavad nii, nagu me tahame, lisame mõned suuremad ja heledamad pursked.

Psühhedeelseks saamine

Alustame mõne keerleva kolmnurgaga. Idee oli luua hüpnootiline stroboskoopiline efekt ja selle seadistamine on tegelikult üsna lihtne. Lisage veel üks sarivõtte nende parameetritega:

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

Kõik peaks siin olema juba üsna tuttav, kuigi on paar uut punkti. Märkate, et selle asemel, et määratleda kuju kolmnurgana, oleme seda nimetanud a hulknurk enne numbri määramist punkti sellel on nagu 3.

Oleme ka andnud täitma kui töötate värvide massiiviga, muutub iga viies kolmnurk punaseks ja muster jätkub. Kõrge väärtus nurk see säte paneb sarivõtke pöörlema ​​piisavalt kiiresti, et tekitada selle stroboskoopiline efekt.

Kui kood teie jaoks ei tööta, veenduge, et olete lisanud kolmnurgaobjekti sündmuste kuulaja klassi, nagu tegime eelmiste objektidega.

Päris psühhedeelne! Lisame sellele järgmiseks veel ühe paugu.

Tantsivad viisnurgad

Saame kasutada midagi peaaegu identset kolmnurgad objekti, et teha sellele järgnev purske. See veidi muudetud kood tekitab erksavärvilisi kattuvaid ketrusnurki:

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

Peamine muudatus on see, et oleme lisanud a viivitus 500 ms, nii et plahvatus algab alles pärast kolmnurki. Mõne väärtuse muutmisega oli siin mõte panna sarivöö pöörlema ​​kolmnurkadele vastupidises suunas. Õnneliku juhuse tõttu viisnurkade ilmumise ajaks muudab kolmnurkade stroboskoopiline efekt mulje, nagu need keerleksid koos.

Väike juhuslikkus

Lisame efekti, mis kasutab juhuslikke väärtusi. Looge nende omadustega sarivõtte:

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

See plahvatus tekitab jooni, mis hakkavad punaseks muutuma ja muutuvad läbipaistvaks, aja jooksul kahanevad. Selle komponendi teeb huvitavaks see, et selle omaduste määramiseks kasutatakse juhuslikke väärtusi.

The kraadinihe annab lapsele objekti algnurga. Selle juhusliku valiku korral annab see iga klõpsu korral täiesti erineva plahvatuse. Juhuslikke väärtusi kasutatakse ka raadius ja viivitus funktsioone kaootilise efekti lisamiseks.

Siin on mõju iseenesest:

Kuna kasutame siin juhuslikke väärtusi, peame objekti sündmuste käitlejale lisama täiendava meetodi:

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

The genereerima () funktsioon arvutab uued juhuslikud väärtused iga kord, kui sündmusele helistatakse. Ilma selleta valiks kuju esmakordsel kutsumisel juhuslikud väärtused ja jätkaks nende väärtuste kasutamist iga järgmise kõne korral. See rikuks efekti täielikult, nii et lisage see kindlasti!

Peaaegu iga mo.js objektide elemendi jaoks saate kasutada juhuslikke väärtusi ja need on lihtne viis ainulaadsete animatsioonide tegemiseks.

lõbusaid asju, mida igav tööl teha

Juhuslikkus pole aga ainus viis animatsioonidele dünaamiliste liikumiste lisamiseks. Vaatame vankuma funktsiooni.

Uimastavad jooned

Et näidata, kuidas vankuma Funktsioon töötab, me teeme midagi natuke nagu Katariina ratas. Looge uus seeria järgmiste parameetritega:

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

Siin on kõik juba tuttav, plahvatus tekitab 50 last, mis on punased või oranžid jooned. Erinevus on selles, et me läbime viivitus vara a vankuma (10) funktsiooni. See lisab iga lapse emissiooni vahele 10 ms viivitust, andes sellele otsitava ketramisefekti.

Jaotamisfunktsioon ei kasuta juhuslikke väärtusi, seega pole teil vaja genereerida funktsiooni seekord sündmuste käitlejas. Vaatame kõike, mis meil siiani on:

Võiksime siin hõlpsalt peatuda, kuid lisame selle projekti lõpetamiseks veel ühe plahvatuse.

Nutikad ruudud

Selle viimase plahvatuse jaoks teeme midagi ristkülikute abil. Lisage see objekt oma koodile ja sündmuste kuulajale:

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

See objekt ei lisa midagi uut sellele, mille kallal oleme juba täna töötanud, vaid lisatakse lihtsalt selleks, et näidata, kui keerulisi geomeetrilisi mustreid saab koodi abil hõlpsasti luua.

See ei olnud selle objekti kavandatud tulemus, kui see loodi selle õpetuse kirjutamise testimise etappides. Kui kood jooksis, selgus, et olin komistanud millegi palju ilusama peale, kui oleksin tahtlikult valmis saanud!

Selle viimase objekti lisamisega oleme valmis. Vaatame kogu asja tegevuses.

Mo.js: võimas tööriist veebianimatsioonide jaoks

See lihtne sissejuhatus mo.js -i hõlmab põhilisi tööriistu, mida on vaja ilusate animatsioonide loomiseks. Nende tööriistade kasutamise viis võib luua peaaegu kõike ja paljude ülesannete jaoks on veebiteegid kasutamisele lihtne alternatiiv Photoshop , After Effects või muu kulukas tarkvara.

See raamatukogu on kasulik neile, kes töötavad nii programmeerimise kui ka veebiarenduse alal, projektis kasutatud sündmuste käsitlemist saab hõlpsasti kasutada reaktiivsete nuppude ja teksti loomiseks veebisaitidel või rakendustes. Nautige seda: vigu pole, on ainult õnnelikud õnnetused!

Jaga Jaga Piiksuma E -post Kas tasub Windows 11 -le üle minna?

Windows on ümber kujundatud. Kuid kas sellest piisab, et veenda teid Windows 10 -lt Windows 11 -le üle minema?

Loe edasi Seotud teemad

• Programmeerimine
• JavaScript

Autori kohta Ian Buckley(Avaldatud 216 artiklit)

Ian Buckley on vabakutseline ajakirjanik, muusik, esineja ja videoprodutsent, kes elab Saksamaal Berliinis. Kui ta parasjagu ei kirjuta ega laval, nokitseb ta isetehtud elektroonika või koodi kallal, lootuses saada hulluks teadlaseks.

Rohkem Ian Buckleylt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin