Home-theater-designers
Jei ieškote pradėti savo svetainę , gražiai atrodanti animacija gali padaryti ją blizgesį. Yra keli būdai tai pasiekti, tiesiog sukurti animacinį GIF nuo esamo filmo gabalo iki mokymosi kurti savo nuo nulio naudojant tokią programinę įrangą Maišytuvas arba Maya .
Taip pat yra bibliotekų, kuriose galima programiškai kurti animaciją. Istoriškai žiniatinklio koduotojai naudojo „jQuery“ kurdami paprastas animacijas, tačiau tobulėjant žiniatinkliui ir HTML5 tapo nauju standartu, atsirado naujų variantų. Animacijai skirtos CSS bibliotekos tapo neįtikėtinai galingos pagal naują sistemą, kartu su „JavaScript“ bibliotekomis, sukurtomis specialiai vektorinei animacijai naršyklėje.
Šiandien mes žiūrėsime į „mo.js“, vieną iš naujesnių vaikų grupėje, kad sukurtų gražius vaizdus iš kodo. Prieš kurdami naudotojo reaktyvios animacijos seriją, kuriančią gražius modelius, aptarsime keletą pagrindinių funkcijų.
Įveskite Mo.js
„Mo.js“ yra biblioteka, skirta lengvai kurti judesio grafiką žiniatinkliui. Jis sukurtas taip, kad būtų lengva kurti gražius dalykus tiems, kurie nėra per daug išmanantys kodą, o programuotojams veteranams atrasti meninę pusę, kurios jie niekada nežinojo. Kaip rodo jo pavadinimas, jis pagrįstas populiaria „JavaScript“ programavimo kalba, nors ji įdiegta taip, kad kiekvienas galėtų lengvai įsisavinti pagrindus.
Prieš eidami toliau, pažvelkime, ką šiandien sukursime:
Mes naudosime „CodePen“ šiandieniniam projektui, nes tai leidžia mums dirbti su viskuo tame pačiame naršyklės lange. Jei pageidaujate, galite dirbti jūsų pasirinktas redaktorius vietoj to. Jei norite praleisti žingsnis po žingsnio pamoką, visą kodą rasite čia.
Nustatykite naują rašiklį ir būsite pasveikinti naudodami šį ekraną:
Prieš pradėdami, turėsite atlikti keletą pakeitimų. Spustelėkite Nustatymai piktogramą viršutiniame dešiniajame kampe ir eikite į „JavaScript“ skirtuką.
Mes ketiname naudoti Babelis kaip mūsų kodo išankstinis procesorius, todėl pasirinkite jį išskleidžiamajame meniu. „Babel“ šiek tiek lengviau supranta „JavaScript“ ir teikia ECMAScript 6 senesnių naršyklių palaikymas. Jei nežinote, ką tai reiškia, nesijaudink , tai tik palengvins mūsų gyvenimą čia.
Taip pat į projektą turime importuoti „mo.js“ biblioteką. Padarykite tai ieškodami mo.js viduje konors Pridėti išorinius scenarijus/rašiklius teksto raginimą ir pasirinkite jį.
Turėdami šiuos du dalykus, spustelėkite Išsaugoti ir uždaryti . Mes pasiruošę pradėti!
Pagrindinės formos su „Mo.js“
Prieš pradėdami dirbti su grafika, padarykime ką nors dėl to akinančio balto fono rodinio srityje. Pakeiskite fono spalvos ypatybę rašydami šį kodą CSS duona.
body{
background: rgba(11,11,11,1);
}Formos kūrimas yra paprastas procesas, o už jos esanti koncepcija valdo visą biblioteką. Nustatykime numatytąją apskritimo formą. Įveskite šį kodą į JS duona:
const redCirc = new mojs.Shape({
isShowStart:true
});Čia mes sukūrėme a konst vertė su pavadinimu redCirc ir paskyrė jį a nauji mojs.Forma . Jei esate visiškai naujas kodavimas, atkreipkite dėmesį į skliaustų tvarką čia ir nepamirškite kabliataškio pabaigoje!
Iki šiol mes neįveikėme jokių parametrų, išskyrus isShowStart: tiesa , tai reiškia, kad jis bus rodomas ekrane dar prieš mums priskiriant tam tikrą judesį. Pamatysite, kad ekrano centre buvo rausvas apskritimas:
Šis ratas yra numatytasis Figūra skirtas mo.js. Šią formą galime lengvai pakeisti pridėdami eilutę prie savo kodo:
const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});Norėdami objektui pridėti daugiau savybių, mes jį atskiriame kableliu. Čia mes pridėjome a figūra turtą ir apibrėžė jį kaip a 'teisingas' . Išsaugokite rašiklį ir pamatysite, kad numatytoji forma pasikeis į kvadratą.
Šis vertybių perdavimo procesas Figūra objektas yra tai, kaip mes juos pritaikome. Šiuo metu turime aikštę, kuri iš tikrųjų nedaro daug. Pabandykime ką nors pagyvinti.
Judesio pagrindai
Kad gautumėme kažką įspūdingesnio, sukurkime apskritimą su raudonu brūkšniu aplink jį ir be užpildymo viduje.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});Kaip matote, mes taip pat paskyrėme a pločio smūgio vertę ir a spinduliu už ratą. Viskas jau pradeda atrodyti kiek kitaip. Jei jūsų forma neatnaujinama, įsitikinkite, kad nepraleidote kablelių ar kabučių 'tinklas' arba 'nė vienas' ir įsitikinkite, kad spustelėjote sutaupyti puslapio viršuje.
Prie to pridėkime animaciją. Anksčiau pateiktame pavyzdyje šis raudonas apskritimas rodomas ten, kur naudotojas spustelėja, prieš išblukdamas į išorę. Vienas iš būdų, kaip tai padaryti, yra pakeisti spindulį ir neskaidrumą laikui bėgant. Pakeiskite kodą:
radius: {15:30},
opacity: {1:0},
duration:1000Pakeitus spinduliu turtą ir pridėjus neskaidrumas ir trukmės savybes, mes pateikėme formos nurodymus, kuriuos reikia atlikti laikui bėgant. Šitie yra Delta objektai, turintys šių savybių pradžios ir pabaigos informaciją.
Jūs pastebėsite, kad dar nieko nevyksta. Taip yra todėl, kad nepridėjome .žaisti() funkcija, kad ji nurodytų vykdyti mūsų nurodymus. Pridėkite jį tarp galinių skliaustų ir kabliataškio ir pamatysite, kaip jūsų ratas atgyja.
Dabar mes kažkur siekiame, tačiau, kad tai būtų tikrai ypatinga, pažvelkime į dar kelias nuodugnesnes galimybes.
Užsakymas ir palengvinimas naudojant „Mo.js“
Šiuo metu, kai tik apskritimas pasirodo, jis pradeda nykti. Tai veiks puikiai, tačiau būtų malonu šiek tiek daugiau kontroliuoti.
Mes galime tai padaryti su . tada () funkcija. Užuot keitę spindulį ar neskaidrumą, leiskite savo formai likti ten, kur ji prasideda, prieš keisdamiesi po nustatyto laiko.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();Dabar mūsų forma pasirodys su jai priskirtomis vertėmis, palaukite 1000 ms, prieš atlikdami ką nors, ką įdėjome . tada () funkcija. Tarp skliaustų pridėkime keletą instrukcijų:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Šis kodas pristato dar vieną svarbią animacijos dalį. Ten, kur mes nurodėme skalė norėdami pakeisti nuo 1 iki 2, mes taip pat priskyrėme sinusinių bangų palengvinimą su nuodėmės . „Mo.js“ turi įmontuotas įvairias palengvinimo kreives, o pažengusiems vartotojams yra galimybė pridėti savo. Šiuo atveju skalė laikui bėgant vyksta pagal sinusinę bangą, kreivę aukštyn.
Norėdami vizualiai paleisti įvairias kreives, patikrinkite easings.net . Sujunkite tai su strokeWidth per nustatytą trukmę pakeisdami į 0 ir turėsite daug dinamiškesnį išnykimo efektą.
Formos yra viso „Mo.js“ pagrindas, tačiau jos yra tik istorijos pradžia. Pažiūrėkime Pliūpsniai .
Potencialų sprogimas Mo.js
Į Sprogimas „Mo.js“ yra formų rinkinys, sklindantis iš centrinio taško. Mes padarysime juos mūsų baigtos animacijos pagrindu. Galite pavadinti numatytąją seriją taip pat, kaip ir figūrą. Padarykime keletą kibirkščių:
const sparks = new mojs.Burst({
}).play();Galite pamatyti, tiesiog pridėdami tuščią Sprogimas objektą ir liepiant jam žaisti, gauname numatytąjį serijos efektą. Mes galime paveikti serijos dydį ir sukimąsi animuodami spinduliu ir kampas savybės:
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();Jau pridėjome pasirinktą spindulį ir sukimąsi prie savo serijos:
Kad jie atrodytų labiau kaip kibirkštys, pakeiskime serijos naudojamas formas ir kiek formų generuoja serija. Tai darote atsižvelgdami į sprogimo vaikų savybes.
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();Pastebėsite, kad antrinės savybės yra tokios pačios kaip ir formos ypatybės, su kuriomis jau dirbome. Šį kartą kaip formą pasirinkome kryžių. Visos 50 šių formų dabar turi tas pačias savybes. Pradeda atrodyti visai neblogai! Tai pirmas dalykas, kurį vartotojas pamatys spustelėjęs pelę.
Jau matome, kad mūsų inicialo raudonas potėpis redCirc forma išlieka per ilgai. Pabandykite pakeisti jo trukmę, kad abi animacijos derėtų. Tai turėtų atrodyti maždaug taip:
Mes dar toli gražu nebaigėme savo animacijos, tačiau skirkime šiek tiek laiko, kad ji reaguotų į vartotoją.
Pagrindinis renginys
Mes naudosime įvykių tvarkyklę, kad suaktyvintume animaciją toje vietoje, kurią naudotojas spustelėja. Kodo bloko pabaigoje pridėkite:
document.addEventListener( 'click', function(e) {
});Šis kodo fragmentas klauso pelės paspaudimų ir vykdo visas instrukcijas, esančias skliausteliuose. Galime pridėti savo redCirc ir Žiežirbos prieštarauja šiam klausytojui.
document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});Dvi funkcijos, kurias mes čia vadiname, yra .tune () ir .replay () . Pakartojimo funkcija yra panaši į atkūrimo funkciją, nors ji nurodo, kad animacija turėtų prasidėti iš naujo kiekvieną kartą spustelėjus.
The melodija funkcija perduoda reikšmes mūsų objektui, kad galėtumėte pakeisti dalykus, kai jis suaktyvinamas. Šiuo atveju mes nurodome puslapio koordinates, kuriose buvo spustelėta pelė, ir atitinkamai priskiriame animacijos x ir y pozicijas. Išsaugokite kodą ir pabandykite spustelėti ekraną. Pastebėsite porą problemų.
Pirma, mūsų pradinė animacija vis tiek rodoma ekrano viduryje, net jei vartotojas nieko nespaudžia. Antra, animacija nėra suaktyvinama pelės taške, bet nukreipta žemyn ir į dešinę. Abu šiuos dalykus galime lengvai išspręsti.
Mūsų forma ir sprogimas turi .žaisti() atitinkamų kodų blokų pabaigoje. Mums to daugiau nereikia .replay () yra kviečiamas įvykių tvarkytoju. Galite pašalinti .play () iš abiejų kodo blokų. Dėl tos pačios priežasties galite pašalinti isShowStart: tiesa taip pat, nes mums to nebereikia rodyti pradžioje.
Norėdami išspręsti padėties nustatymo problemą, turėsime nustatyti savo objektų padėties vertes. Kaip prisiminsite iš mūsų pirmosios formos, pagal numatytuosius nustatymus „mo.js“ juos pateikia puslapio centre. Sujungus šias vertes su pelės padėtimi, sukuriamas poslinkis. Norėdami atsikratyti šio poslinkio, tiesiog pridėkite šias eilutes prie abiejų redCirc ir Žiežirbos objektai:
left: 0,
top: 0,Vienintelės padėties vertės, kurias įgyja mūsų objektai, yra įvykio klausytojo perduotos pelės padėties vertės. Dabar viskas turėtų veikti daug geriau.
Šis objektų įtraukimo į įvykių tvarkyklę procesas suaktyvins visas mūsų animacijas nepamirškite nuo šiol prie jo pridėti kiekvieno naujo objekto! Dabar, kai pagrindai veikia taip, kaip mes norime, pridėkime keletą didesnių ir ryškesnių pliūpsnių.
Įgyti psichodeliką
Pradėkime nuo kelių besisukančių trikampių. Idėja buvo sukurti hipnotizuojantį stroboskopinį efektą, ir tai iš tikrųjų yra gana paprasta. Pridėkite dar vieną seriją naudodami šiuos parametrus:
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
}
});Viskas čia jau turėtų būti gana pažįstama, nors yra keletas naujų dalykų. Jūs pastebėsite, kad užuot apibrėžę formą kaip trikampį, mes ją pavadinome a poligonas prieš priskirdami numerį taškų ji turi kaip 3.
Mes taip pat davėme užpildyti Jei norite dirbti su daugybe spalvų, kas penktas trikampis vėl bus raudonas ir modelis tęsis. Aukšta vertė kampas nustatymas leidžia sprogimui suktis pakankamai greitai, kad būtų sukurtas stroboskopinis efektas.
Jei kodas jums netinka, įsitikinkite, kad pridėjote trikampių objektą prie įvykių klausytojų klasės, kaip tai darėme su ankstesniais objektais.
Gana psichodelinė! Pridėkime dar vieną sprogimą, kad galėtume jį sekti.
Šokantys penkiakampiai
Mes galime naudoti kažką beveik identiško mūsų trikampiai objektas, kad padarytų sprogimą po jo. Šis šiek tiek pakeistas kodas sukuria ryškių spalvų persidengiančius besisukančius šešiakampius:
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
}
});Pagrindinis pakeitimas yra tas, kad mes pridėjome a delsimas 500 ms, kad sprogimas prasidėtų tik po trikampių. Pakeitus kelias vertes, čia buvo idėja priversti sprogimą suktis priešinga trikampių kryptimi. Laimingos atsitiktinumo dėka, atsiradus penkiakampiams, dėl trikampių stroboskopinio poveikio atrodo, kad jie sukasi kartu.
Mažas atsitiktinumas
Pridėkime efektą, kuris naudoja atsitiktines vertes. Sukurkite seriją naudodami šias savybes:
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 sprogimas sukurs raudonas linijas ir išnyks iki skaidrumo, laikui bėgant mažės. Šis komponentas įdomus tuo, kad kai kurioms jo savybėms nustatyti naudojamos atsitiktinės vertės.
The laipsnio poslinkis suteikia vaikui objektui pradinį kampą. Atsitiktinai atsitiktinai pasirinkus, kiekvienas paspaudimas suteikia visiškai kitokį sprogimą. Atsitiktinės vertės taip pat naudojamos spinduliu ir delsimas chaotiško efekto.
Čia yra pats efektas:
Kadangi čia naudojame atsitiktines vertes, prie objekto įvykių tvarkytojo turime pridėti papildomą metodą:
redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();The generuoti () funkcija apskaičiuoja naujas atsitiktines vertes kiekvieną kartą, kai iškviečiamas įvykis. Jei to nebūtų, figūra pirmą kartą skambindama pasirinktų atsitiktines vertes ir toliau naudotų tas vertes kiekvienam vėlesniam skambučiui. Tai visiškai sugadins efektą, todėl būtinai pridėkite tai!
Beveik kiekvienam mo.js objektų elementui galite naudoti atsitiktines vertes, ir tai yra paprastas būdas sukurti unikalias animacijas.
šaunių svetainių, kurias reikia aplankyti, kai nuobodu
Tačiau atsitiktinumas nėra vienintelis būdas pridėti dinaminių judesių prie animacijų. Pažvelkime į sustingti funkcija.
Stulbinančios linijos
Norėdami parodyti, kaip sustingti funkcija veikia, mes padarysime kažką panašaus į Kotrynos ratą. Sukurkite naują seriją naudodami šiuos 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
}
});Viskas čia jau žinoma, sprogimas sukuria 50 vaikų, kurie yra raudonos arba oranžinės linijos. Skirtumas yra tas, kad mes praeiname delsimas turtas a sustingti (10) funkcija. Tai padidina 10 ms vėlavimą tarp kiekvieno vaiko išmetimo ir suteikia mums norimą sukimosi efektą.
Skirstymo funkcija nenaudoja jokių atsitiktinių verčių, todėl jums nereikės generuoti šį kartą įvykių tvarkytuvo funkcija. Pažiūrėkime, ką iki šiol veikiame:
Čia galėtume lengvai sustoti, bet pridėkime dar vieną sprogimą, kad užbaigtume šį projektą.
Išmanieji kvadratai
Norėdami tai padaryti, padarykime ką nors naudodami stačiakampius. Pridėkite šį objektą prie savo kodo ir įvykių klausytojo:
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 objektas nieko naujo neprideda prie to, ką mes jau dirbome šiandien, jis įtrauktas tik siekiant parodyti, kaip sudėtingus geometrinius modelius galima lengvai sukurti naudojant kodą.
Tai nebuvo numatytas šio objekto rezultatas, kai jis buvo sukurtas bandymo etapuose rašant šią pamoką. Kai kodas buvo paleistas, paaiškėjo, kad atsitiktinai suklydau į ką nors gražesnio, nei galėjau padaryti tyčia!
Pridėjus šį paskutinį objektą, mes baigėme. Pažiūrėkime visą veiksmą.
„Mo.js“: galingas įrankis žiniatinklio animacijoms
Šis paprastas įvadas į „mo.js“ apima pagrindinius įrankius, reikalingus gražioms animacijoms kurti. Šių įrankių naudojimas gali sukurti beveik viską, o daugeliui užduočių žiniatinklio bibliotekos yra paprasta naudojimo alternatyva „Photoshop“ , „After Effects“ ar kita brangi programinė įranga.
Ši biblioteka yra naudinga tiems, kurie dirba ir programuodami, ir kurdami žiniatinklį, projekte naudojamas įvykių apdorojimas gali būti lengvai naudojamas reaktyviems mygtukams ir tekstui kurti svetainėse ar programose. Linksminkitės: nėra klaidų, tik laimingos nelaimės!
Dalintis Dalintis „Tweet“ Paštu Ar verta atnaujinti į „Windows 11“?„Windows“ buvo pertvarkytas. Bet ar to pakanka norint įtikinti jus pereiti nuo „Windows 10“ prie „Windows 11“?
Skaityti toliau Susijusios temos- Programavimas
- „JavaScript“
Ianas Buckley yra laisvai samdomas žurnalistas, muzikantas, atlikėjas ir vaizdo įrašų prodiuseris, gyvenantis Berlyne, Vokietijoje. Kai jis nerašo ar ne scenoje, jis užsiima „pasidaryk pats“ elektronika ar kodu, tikėdamasis tapti pamišusiu mokslininku.
Daugiau iš Ian BuckleyPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia