Kā izveidot skaistas kodētas tīmekļa animācijas ar Mo.JS

Kā izveidot skaistas kodētas tīmekļa animācijas ar Mo.JS

Ja jūs meklējat sākt savu vietni , skaistas izskata animācijas var likt tai spīdēt. Ir vairāki veidi, kā to sasniegt, sākot no vienkāršas veidojot animētu GIF no esošās filmas gabala līdz iemācīties izveidot savu no nulles, izmantojot programmatūru, piemēram Blenderis vai Maija .





Ir pieejamas arī bibliotēkas, lai programmatiski izveidotu animācijas. Vēsturiski tīmekļa kodētāji izmantoja jQuery, lai izveidotu vienkāršas animācijas, bet, attīstoties tīmeklim un HTML5 kļuva par jauno standartu, parādījās jaunas iespējas. Jaunās sistēmas ietvaros animācijas CSS bibliotēkas kļuva neticami spēcīgas, kā arī JavaScript bibliotēkas, kas īpaši paredzētas vektoru animācijai pārlūkprogrammā.





Šodien mēs aplūkosim mo.js, vienu no jaunākajiem bērniem, lai izveidotu skaistus attēlus no koda. Pirms lietotāju reaģējošas animācijas sērijas, kas rada skaistus modeļus, mēs apskatīsim dažas pamatfunkcijas.





Ievadiet Mo.js

Mo.js ir bibliotēka, kas ļauj viegli izveidot kustīgu grafiku tīmeklim. Tā ir izstrādāta, lai padarītu skaistu lietu radīšanu vienkāršu tiem, kas nav pārāk prasmīgi par kodiem, vienlaikus ļaujot programmētājiem veterāniem atklāt māksliniecisko pusi, par kuru viņi nekad nezināja. Kā norāda nosaukums, tā pamatā ir populārā JavaScript programmēšanas valoda, lai gan tā ir ieviesta tā, lai ikviens varētu viegli iegūt pamatus.

Pirms dodamies tālāk, apskatīsim, ko mēs šodien radīsim:



Mēs izmantosim CodePen šodienas projektam, jo ​​tas ļauj mums strādāt pie visa tajā pašā pārlūkprogrammas logā. Ja vēlaties, varat strādāt redaktors pēc jūsu izvēles tā vietā. Ja vēlaties izlaist soli pa solim apmācību, pilns kods ir pieejams šeit.

Iestatiet jaunu pildspalvu, un jūs redzēsit šo ekrānu:





Pirms sākam darbu, jums ir jāveic dažas izmaiņas. Noklikšķiniet uz Iestatījumi augšējā labajā stūrī un dodieties uz JavaScript cilni.

Mēs gatavojamies izmantot Bābele kā mūsu koda priekšapstrādātājs, tāpēc izvēlieties to nolaižamajā izvēlnē. Babel padara JavaScript nedaudz vieglāk saprotamu, kā arī nodrošina ECMAScript 6 atbalsts vecākām pārlūkprogrammām. Ja jūs nezināt, ko tas nozīmē, neuztraucies , tas tikai nedaudz atvieglos mūsu dzīvi šeit.





Mums projektā jāimportē arī bibliotēka mo.js. Dariet to, meklējot mo.js iekš Pievienojiet ārējos skriptus/pildspalvas teksta uzvedni un atlasiet to.

Kad šīs divas lietas ir vietā, noklikšķiniet uz Saglabāt un aizvērt . Mēs esam gatavi sākt!

Pamata formas ar Mo.js

Pirms sākam darbu ar grafiku, darīsim kaut ko ar šo aklo balto fonu skata rūtī. Mainiet fona krāsas rekvizītu, ierakstot šo kodu CSS maize.

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

Formas izveide ir vienkāršs process, un tās pamatā esošā koncepcija virza visu bibliotēku. Izveidosim noklusējuma apļa formu. Ievadiet šo kodu JS maize:

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

Šeit mēs esam izveidojuši a konst vērtību ar nosaukumu redCirc un piešķīra to a jauni mojs.Forma . Ja esat pilnīgi jauns kodētājs, pievērsiet uzmanību kronšteinu secībai šeit un neaizmirstiet semikolu beigās!

Līdz šim mēs neesam nokārtojuši nevienu parametru, izņemot isShowStart: taisnība , tas nozīmē, ka tas parādīsies ekrānā pat pirms tam būsim piešķīruši kādu kustību. Jūs redzēsit, ka ekrāna centrā ir ievietots rozā aplis:

Šis aplis ir noklusējuma iestatījums Forma par mo.js. Mēs varam viegli mainīt šo formu, pievienojot mūsu kodam rindiņu:

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

Lai objektam pievienotu vairāk rekvizītu, mēs to atdalām ar komatu. Šeit mēs esam pievienojuši a forma īpašumu un definēja to kā 'taisns' . Saglabājiet pildspalvu, un jūs redzēsit, ka noklusējuma forma tiek pārveidota par kvadrātu.

Šis vērtību nodošanas process Forma objekts ir tas, kā mēs tos pielāgojam. Pašlaik mums ir laukums, kas patiesībā nedara daudz. Mēģināsim kaut ko animēt.

Kustības pamati

Lai iegūtu kaut ko iespaidīgāku, izveidosim apli ar sarkanu triepienu ap to un bez aizpildījuma.

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

Kā redzat, mēs esam piešķīruši arī a platums insulta vērtību, un a rādiuss par apli. Lietas jau sāk izskatīties nedaudz savādāk. Ja jūsu forma netiek atjaunināta, pārliecinieties, ka neesat palaidis garām nevienu komatu vai pēdiņu 'tīkls' vai 'neviens' un pārliecinieties, ka esat noklikšķinājis saglabāt lapas augšdaļā.

Pievienosim tam animāciju. Iepriekš minētajā piemērā šis sarkanais aplis parādās vietā, kur lietotājs noklikšķina, pirms izbalē uz āru. Viens veids, kā to panākt, ir laika gaitā mainīt rādiusu un necaurredzamību. Pārveidosim kodu:

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

Mainot rādiuss īpašumu un pievienojot necaurredzamība un ilgums īpašības, mēs esam devuši formas norādījumus, kas jāveic laika gaitā. Šie ir Delta objektus, turot šo īpašumu sākuma un beigu informāciju.

Jūs pamanīsit, ka nekas vēl nenotiek. Tas ir tāpēc, ka mēs neesam pievienojuši .play () funkcija, lai tā izpildītu mūsu norādījumus. Pievienojiet to starp beigu kronšteiniem un semikolu, un jums vajadzētu redzēt, kā jūsu aplis atdzīvojas.

Tagad mēs kaut kur virzāmies, bet, lai padarītu to patiešām īpašu, apskatīsim vēl dažas padziļinātas iespējas.

Pasūtīšana un atvieglošana ar Mo.js

Šobrīd, tiklīdz aplis parādās, tas sāk izbalēt. Tas darbosies pilnīgi labi, taču būtu jauki, ja būtu nedaudz lielāka kontrole.

Mēs to varam izdarīt ar .tad () funkciju. Tā vietā, lai mainītu rādiusu vai necaurredzamību, ļaujiet savai formai palikt vietā, kur tā sākas, pirms maināmies pēc noteikta laika.

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

Tagad mūsu forma parādīsies ar tām piešķirtajām vērtībām, pagaidiet 1000 ms, pirms veicat kaut ko, ko ievietojām .tad () funkciju. Starp iekavām pievienosim dažus norādījumus:

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

Šis kods iepazīstina ar vēl vienu svarīgu animācijas daļu. Kur mēs esam norādījuši ,. mērogā lai mainītu no 1 uz 2, mēs esam arī piešķīruši sinusoidālo atvieglošanu ar grēks.in . Mo.js ir iebūvētas dažādas atvieglošanas līknes, un pieredzējušiem lietotājiem ir iespēja pievienot savas. Šajā gadījumā skala laika gaitā notiek atbilstoši sinusoidālajam vilnim, kas izliekas uz augšu.

Lai vizuāli nolaistu dažādas līknes, pārbaudiet easings.net . Apvienojiet to ar strokeWidth mainot uz 0 mūsu noteiktajā ilgumā, un jums ir daudz dinamiskāks izzušanas efekts.

Formas ir pamats visam Mo.js, taču tās ir tikai stāsta sākums. Apskatīsim Pārrāvumi .

Pārpilns ar potenciālu vietnē Mo.js

TO Sprādziens Mo.js ir formu kolekcija, kas nāk no centrālā punkta. Mēs tos padarīsim par mūsu gatavās animācijas pamatu. Noklusējuma sēriju var izsaukt tāpat kā formu. Izraisīsim dažas dzirksteles:

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

Jūs varat redzēt, vienkārši pievienojot tukšu Sprādziens objektam un liekot tam spēlēt, mēs iegūstam noklusējuma sērijveida efektu. Mēs varam ietekmēt sērijas lielumu un rotāciju, to animējot rādiuss un leņķis īpašības:

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

Mēs jau esam pievienojuši pielāgotu rādiusu un griešanos mūsu sērijai:

Lai tās vairāk atgādinātu dzirksteles, mainīsim sērijas izmantotās formas un to, cik daudz sērijas ģenerē. Jūs to darāt, pievēršoties sprādziena bērnu īpašībām.

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

Jūs pamanīsit, ka pakārtotās īpašības ir tādas pašas kā formas īpašības, ar kurām mēs jau esam strādājuši. Šoreiz par formu esam izvēlējušies krustu. Visām 50 šīm formām tagad ir tādas pašas īpašības. Tas sāk izskatīties diezgan labi! Šī ir pirmā lieta, ko lietotājs redzēs, noklikšķinot uz peles.

Jau tagad mēs redzam, ka mūsu iniciāļa sarkanais triepiens redCirc forma paliek pārāk ilgi. Mēģiniet mainīt tā ilgumu, lai abas animācijas saderētu kopā. Tam vajadzētu izskatīties apmēram šādi:

Mēs vēl neesam pabeiguši savu animāciju, taču veltīsim laiku, lai tā reaģētu uz lietotājiem.

Galvenais notikums

Mēs izmantosim notikumu apstrādātāju, lai aktivizētu mūsu animācijas vietā, uz kuras lietotājs noklikšķina. Koda bloka beigās pievienojiet šo:

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

Šis koda fragments klausās peles klikšķus un izpilda visus norādījumus, kas mums ir iekavās. Mēs varam pievienot savu redCirc un dzirksteles iebilst šim klausītājam.

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

Divas funkcijas, kuras mēs šeit saucam, ir .tune () un .replay () . Atkārtošanas funkcija ir līdzīga atskaņošanas funkcijai, lai gan tā nosaka, ka animācijai jāsākas no jauna katru reizi, kad tiek noklikšķināts.

The melodija funkcija nodod vērtības mūsu objektam, lai jūs varētu mainīt lietas, kad tā tiek aktivizēta. Šajā gadījumā mēs ievadām lapas koordinātas, kurās tika noklikšķināts uz peles, un attiecīgi piešķiram animācijas pozīciju x un y. Saglabājiet kodu un mēģiniet noklikšķināt uz ekrāna. Jūs pamanīsit pāris problēmas.

Pirmkārt, mūsu sākotnējā animācija joprojām tiek rādīta ekrāna vidū, pat ja lietotājs neko neklikšķina. Otrkārt, animācija netiek aktivizēta peles punktā, bet tiek nobīdīta uz leju un pa labi. Mēs varam viegli labot abas šīs lietas.

Mūsu formai un sprādzienam ir .play () atbilstošo kodu bloku beigās. Mums tas vairs nav vajadzīgs .replay () tiek izsaukts notikumu apstrādātājā. Jūs varat noņemt .play () no abiem koda blokiem. Tā paša iemesla dēļ jūs varat noņemt isShowStart: taisnība arī, jo mums tas vairs nav vajadzīgs, lai to parādītu sākumā.

Lai atrisinātu pozicionēšanas problēmu, mums būs jāiestata mūsu objektu pozīcijas vērtības. Kā jūs atceraties no mūsu pirmās formas, pēc noklusējuma mo.js ievieto tos lapas centrā. Ja šīs vērtības tiek apvienotas ar peles pozīciju, tas rada nobīdi. Lai atbrīvotos no šīs nobīdes, vienkārši pievienojiet šīs rindiņas abām redCirc un dzirksteles objekti:

left: 0,
top: 0,

Tagad vienīgās pozīcijas vērtības, kuras mūsu objekti uzņemas, ir notikumu klausītāja ievadītās peles pozīcijas vērtības. Tagad lietām vajadzētu darboties daudz labāk.

Šis objektu pievienošanas process notikumu apstrādātājam ir veids, kā mēs aktivizēsim visas mūsu animācijas atcerieties no šī brīža pievienot tam katru jaunu objektu! Tagad, kad pamati darbojas tā, kā mēs to vēlamies, pievienosim dažus lielākus un spilgtākus pārrāvumus.

Psihodēlisks

Sāksim ar dažiem vērpjamiem trīsstūriem. Ideja šeit bija izveidot hipnotisku stroboskopisku efektu, un to iestatīt patiesībā ir diezgan vienkārši. Pievienojiet vēl vienu sēriju ar šiem parametriem:

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

Šobrīd visam vajadzētu būt diezgan pazīstamam, lai gan ir daži jauni punkti. Jūs ievērosiet, ka tā vietā, lai definētu formu kā trīsstūri, mēs to esam nosaukuši par a daudzstūris pirms numura piešķiršanas punktu tam ir kā 3.

Mēs arī esam devuši aizpildīt lai darbotos ar krāsu masīvu, katrs piektais trīsstūris atgriezīsies sarkanā krāsā un modelis turpināsies. Augstā vērtība leņķis iestatījums ļauj sērijveidā griezties pietiekami ātri, lai radītu tā stroboskopisko efektu.

Ja kods jums nedarbojas, pārliecinieties, vai esat pievienojis trīsstūra objektu notikumu klausītāju klasei, kā mēs to darījām ar iepriekšējiem objektiem.

Diezgan psihedēlisks! Pievienosim vēl vienu sprādzienu, lai tam sekotu.

Dejojošie piecstūri

Mēs varam izmantot kaut ko gandrīz identisku mūsu trīsstūri objektu, lai izveidotu pārrāvumu, kas seko tam. Šis nedaudz modificētais kods rada spilgtas krāsas pārklājošus sešstūrus:

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

Galvenās izmaiņas šeit ir tādas, ka esam pievienojuši a kavēšanās 500 ms, lai pārrāvums sāktos tikai pēc trijstūriem. Mainot dažas vērtības, ideja bija panākt, lai sērijveida sprādziens grieztos trijstūriem pretējā virzienā. Laimīgas nejaušības dēļ līdz brīdim, kad parādās piecstūri, trijstūru stroboskopiskais efekts liek izskatīties, ka tie griežas kopā.

Neliela nejaušība

Pievienosim efektu, kas izmanto nejaušas vērtības. Izveidojiet sēriju ar šīm īpašībām:

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

Šis pārrāvums radīs līnijas, kas sākas sarkanā krāsā un izgaist līdz caurspīdīgumam, laika gaitā sarūkot. Šo komponentu padara interesantu tas, ka dažu tā īpašību noteikšanai tiek izmantotas nejaušas vērtības.

The grādu nobīde dod bērnam objektam sākuma leņķi. Randomizējot to, tas nodrošina pilnīgi atšķirīgu uzliesmojumu katrā klikšķī. Nejaušās vērtības tiek izmantotas arī rādiuss un kavēšanās funkcijas, lai pievienotu haotisko efektu.

Lūk, efekts pats par sevi:

Tā kā mēs šeit izmantojam nejaušas vērtības, mūsu notikumu apstrādātājam objektam jāpievieno papildu metode:

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

The ģenerēt () funkcija aprēķina jaunas nejaušas vērtības katru reizi, kad tiek izsaukts notikums. Bez tā forma pirmo reizi izsaucot izvēlētos nejaušas vērtības un turpinātu izmantot šīs vērtības katram nākamajam zvanam. Tas pilnībā sabojātu efektu, tāpēc noteikti pievienojiet to!

Jūs varat izmantot izlases vērtības gandrīz katram mo.js objektu elementam, un tās ir vienkāršs veids, kā izveidot unikālas animācijas.

kā pievienot nodarbības Google kalendāram

Tomēr nejaušība nav vienīgais veids, kā animācijām pievienot dinamiskas kustības. Apskatīsim satricināt funkciju.

Satriecošas līnijas

Lai parādītu, kā satricināt funkcija darbojas, mēs gatavosim kaut ko nedaudz līdzīgu Katrīnas ritenim. Izveidojiet jaunu sēriju, izmantojot šos parametrus:

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

Viss šeit jau ir pazīstams, pārsprāgšana rada 50 bērnus, kas ir sarkanas vai oranžas līnijas. Atšķirība šeit ir tā, ka mēs ejam garām kavēšanās īpašums a satricināt (10) funkciju. Tas palielina 10 ms aizkavi starp katra bērna emisiju, radot tam vēlamo vērpšanas efektu.

Pakāpeniskā funkcija neizmanto nejaušas vērtības, tāpēc jums nebūs nepieciešama a ģenerēt funkcija šoreiz notikumu apstrādātājā. Apskatīsim visu, kas mums līdz šim ir bijis darbībā:

Mēs varētu viegli apstāties šeit, bet pievienosim vēl vienu sarunu, lai pabeigtu šo projektu.

Viedie laukumi

Šim pēdējam sprādzienam izveidosim kaut ko, izmantojot taisnstūrus. Pievienojiet šo objektu savam kodam un notikumu klausītājam:

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

Šis objekts nepievieno neko jaunu tam, pie kā mēs šodien esam strādājuši, tas ir iekļauts tikai, lai parādītu, cik sarežģītus ģeometriskus modeļus var viegli izveidot, izmantojot kodu.

Šis nebija paredzētais šī objekta iznākums, kad tas tika izveidots šīs apmācības rakstīšanas testēšanas stadijās. Kad kods tika izpildīts, kļuva skaidrs, ka esmu paklupis uz kaut ko daudz skaistāku, nekā es būtu varējis izdarīt ar nodomu!

Pievienojot šo pēdējo objektu, mēs esam pabeiguši. Apskatīsim visu darbībā.

Mo.js: spēcīgs rīks tīmekļa animācijām

Šis vienkāršais ievads vietnē mo.js aptver pamata rīkus, kas nepieciešami, lai izveidotu skaistas animācijas. Šo rīku izmantošanas veids var radīt gandrīz jebko, un daudziem uzdevumiem tīmekļa bibliotēkas ir vienkārša izmantošanas alternatīva Photoshop , After Effects vai cita dārga programmatūra.

Šī bibliotēka ir noderīga tiem, kas strādā gan programmēšanā, gan tīmekļa izstrādē, projektā izmantoto notikumu apstrādi var viegli izmantot, lai izveidotu reaģējošas pogas un tekstu vietnēs vai lietotnēs. Izklaidējieties ar to: nav kļūdu, ir tikai laimīgi negadījumi!

Kopīgot Kopīgot Čivināt E -pasts Vai ir vērts jaunināt uz Windows 11?

Windows ir pārveidots. Bet vai ar to pietiek, lai pārliecinātu jūs pāriet no Windows 10 uz Windows 11?

Lasīt Tālāk
Saistītās tēmas
  • Programmēšana
  • JavaScript
Par autoru Īans Baklijs(Publicēti 216 raksti)

Īans Baklijs ir ārštata žurnālists, mūziķis, izpildītājs un video producents, kas dzīvo Berlīnē, Vācijā. Kad viņš neraksta vai nav uz skatuves, viņš ķeras pie DIY elektronikas vai koda, cerot kļūt par traku zinātnieku.

Vairāk no Īana Baklija

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu