Home-theater-designers
Dacă doriți începeți propriul site web , animațiile cu aspect frumos îl pot face să strălucească. Există mai multe modalități de a realiza acest lucru, de la simplu realizarea unui GIF animat de la o bucată de film existent, până la învățarea de a-ți crea propriul de la zero, cu software cum ar fi Blender sau Maya .
Există, de asemenea, biblioteci disponibile pentru a crea animații programatic. Din punct de vedere istoric, programatorii web foloseau jQuery pentru a crea animații simple, dar pe măsură ce web-ul s-a dezvoltat și HTML5 a devenit noul standard, au apărut opțiuni noi. Bibliotecile CSS pentru animație au devenit incredibil de puternice în cadrul noului cadru, împreună cu bibliotecile JavaScript concepute special pentru animația vectorială din browser.
Astăzi ne vom uita la mo.js, unul dintre cei mai noi copii din bloc pentru a crea imagini frumoase din cod. Vom acoperi câteva funcții de bază, înainte de a crea o serie de animații reactive pentru utilizatori care creează modele frumoase.
Introduceți Mo.js
Mo.js este o bibliotecă pentru a crea grafică cu mișcare pentru web cu ușurință. Este conceput pentru a facilita crearea de lucruri frumoase pentru cei care nu sunt prea pricepuți la cod, permițând în același timp programatorilor veterani să descopere o latură artistică pe care nu au știut-o niciodată. După cum sugerează și numele său, se bazează pe popularul limbaj de programare JavaScript, deși este implementat în așa fel încât oricine să poată prelua cu ușurință elementele de bază.
Înainte de a merge mai departe, să aruncăm o privire la ceea ce vom crea astăzi:
Vom folosi CodePen pentru proiectul de astăzi, deoarece ne permite să lucrăm la toate în aceeași fereastră a browserului. Dacă preferați, puteți lucra într-un editor la alegere in schimb. Dacă doriți să treceți peste tutorialul pas cu pas, codul complet este disponibil aici.
Configurați un stilou nou și veți fi întâmpinat cu acest ecran:
Înainte de a începe, va trebui să faceți câteva modificări. Faceți clic pe Setări din dreapta sus și navigați la JavaScript filă.
Vom folosi Babel ca pre-procesor al codului nostru, deci selectați acest lucru din meniul derulant. Babel face JavaScript ușor de înțeles, împreună cu furnizarea ECMAScript 6 suport pentru browsere mai vechi. Dacă nu știi ce înseamnă asta, nu-ți face griji , doar ne va ușura viața un pic aici.
De asemenea, trebuie să importăm biblioteca mo.js în proiect. Faceți acest lucru căutând mo.js în Adăugați scripturi / pixuri externe promptul textului și selectarea acestuia.
Cu aceste două lucruri la locul lor, faceți clic pe Salveaza si inchide . Suntem gata să începem!
Forme de bază cu Mo.js
Înainte de a începe cu grafica, să facem ceva în legătură cu acel fundal alb orbitor din panoul de vizualizare. Schimbați proprietatea culorii de fundal scriind acest cod în CSS pâine.
body{
background: rgba(11,11,11,1);
}Crearea unei forme este un proces simplu, iar conceptul din spatele acesteia conduce întreaga bibliotecă. Să configurăm o formă de cerc implicită. Introduceți acest cod în JS pâine:
const redCirc = new mojs.Shape({
isShowStart:true
});Aici, am creat un const valoare cu numele redCirc și l-a atribuit unui noi mojs.Shape . Dacă sunteți complet nou în codificare, acordați atenție ordinii parantezelor aici și nu uitați de punct și virgulă la sfârșit!
Până acum nu am trecut în niciun parametru în afară de isShowStart: adevărat , ceea ce înseamnă că va apărea pe ecran chiar înainte de a-i fi atribuit orice mișcare. Veți vedea că a plasat un cerc roz în centrul ecranului:
Acest cerc este implicit Formă pentru mo.js. Putem schimba această formă cu ușurință adăugând o linie în codul nostru:
const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});Pentru a adăuga mai multe proprietăți unui obiect, folosim o virgulă pentru al separa. Aici, am adăugat un formă și a definit-o ca o „rect” . Salvați stiloul și veți vedea schimbările de formă implicite într-un pătrat.
Acest proces de transmitere a valorilor către Formă obiectul este modul în care le personalizăm. Chiar acum avem un pătrat care nu prea face multe. Să încercăm să animăm ceva.
Bazele mișcării
Pentru a obține ceva care pare puțin mai impresionant, să înființăm un cerc, cu o lovitură roșie în jurul său și fără umplutură în interior.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});După cum puteți vedea, am atribuit și un lăţime valoare pentru cursă și a rază pentru cerc. Lucrurile încep deja să arate puțin diferit. Dacă forma dvs. nu se actualizează, asigurați-vă că nu ați ratat nici o virgulă sau ghilimelele din jur 'net' sau 'nici unul' și asigurați-vă că ați făcut clic Salvați În partea de sus a paginii.
Să adăugăm o animație la aceasta. În exemplul de mai sus, acest cerc roșu apare acolo unde utilizatorul face clic, înainte de a se estompa în exterior. O modalitate prin care am putea realiza acest lucru este schimbând raza și opacitatea în timp. Să modificăm codul:
radius: {15:30},
opacity: {1:0},
duration:1000Prin schimbarea rază proprietate și adăugarea opacitate și durată proprietăți, am dat instrucțiunile de formă pentru a le efectua în timp. Acestea sunt Delta obiecte, păstrând informații de început și de sfârșit pentru aceste proprietăți.
Veți observa că încă nu se întâmplă nimic. Acest lucru se datorează faptului că nu am adăugat .Joaca() funcția de a-i spune să îndeplinească instrucțiunile noastre. Adăugați-l între parantezele finale și punct și virgulă și ar trebui să vedeți că cercul dvs. prinde viață.
Acum ajungem undeva, dar pentru a-l face cu adevărat special, să ne uităm la câteva posibilități mai aprofundate.
Comandarea și ușurarea cu Mo.js
Chiar acum, de îndată ce apare cercul, începe să se estompeze. Acest lucru va funcționa perfect, dar ar fi bine să ai un pic mai mult control.
Putem face acest lucru cu .atunci() funcţie. Mai degrabă decât să ne schimbăm raza sau opacitatea, să facem ca forma noastră să rămână acolo unde începe, înainte de a ne schimba după un anumit timp.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();Acum, forma noastră va apărea cu valorile pe care i le-am atribuit, așteptați 1000 ms, înainte de a efectua orice am pus în .atunci() funcţie. Să adăugăm câteva instrucțiuni între paranteze:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Acest cod introduce o altă parte importantă a animației. Unde am instruit scară pentru a schimba de la 1 la 2, am atribuit, de asemenea, relaxare pe bază de undă sinusoidală cu sin.in . Mo.js are încorporate o varietate de curbe de relaxare, cu posibilitatea utilizatorilor avansați de a le adăuga. În acest caz, scala în timp are loc în funcție de o undă sinusoidală care se curbează în sus.
Pentru o descriere vizuală a diferitelor curbe, verificați easings.net . Combinați acest lucru cu accident vascular cerebral lățime schimbându-se la 0 peste durata stabilită și veți avea un efect de dispariție mult mai dinamic.
Formele sunt baza pentru orice în Mo.js, dar sunt doar începutul poveștii. Să ne uităm la Rafale .
Explozie cu potențial în Mo.js
LA Izbucni în Mo.js este o colecție de forme care emană dintr-un punct central. Vom face din acestea baza animației noastre terminate. Puteți apela o explozie implicită în același mod în care faceți o formă. Să facem niște scântei:
const sparks = new mojs.Burst({
}).play();Puteți vedea, doar adăugând un gol Izbucni obiect și spunându-i să se joace, obținem efectul de rafală implicit. Putem afecta dimensiunea și rotația rafalei prin animarea acesteia rază și unghi proprietăți:
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();Deja am adăugat o rază personalizată și o rotire la rafala noastră:
Pentru a le face să semene mai mult cu scântei, să schimbăm formele pe care le folosește rafala și câte forme generează rafala. Faceți acest lucru adresându-vă proprietăților copiilor exploziei.
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();Veți observa că proprietățile copilului sunt aceleași cu proprietățile de formă cu care am lucrat deja. De data aceasta am ales ca formă o cruce. Toate cele 50 de forme dețin acum aceleași proprietăți. Începe să arate destul de bine! Acesta este primul lucru pe care îl va vedea utilizatorul atunci când face clic pe mouse.
Deși deja putem vedea că cursa roșie a inițialei noastre redCirc forma rămâne prea mult timp. Încercați să-i schimbați durata, astfel încât ambele animații să se potrivească. Ar trebui să ajungă să arate așa:
Suntem departe de a fi terminat cu animația noastră, dar să luăm un moment pentru a o face reactivă la utilizator.
Evenimentul principal
Vom folosi un gestionar de evenimente pentru a declanșa animațiile noastre în poziția în care face clic utilizatorul. La sfârșitul blocului de cod, adăugați următoarele:
document.addEventListener( 'click', function(e) {
});Această bucată de cod ascultă clicurile mouse-ului și execută orice instrucțiuni sunt între paranteze pentru noi. Putem adăuga redCirc și scântei obiectează asupra acestui ascultător.
document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});Cele două funcții pe care le numim aici sunt .ton() și .replay () . Funcția de redare este similară cu funcția de redare, deși specifică faptul că animația ar trebui să înceapă din nou de la început de fiecare dată când se face clic pe ea.
The ton funcția transmite valori către obiectul nostru, astfel încât să puteți schimba lucrurile atunci când este declanșat. În acest caz, trecem coordonatele paginii unde a fost făcut clic pe mouse și atribuim poziția x și y a animației noastre în consecință. Salvați codul și încercați să faceți clic pe ecran. Veți observa câteva probleme.
În primul rând, animația noastră inițială apare în continuare în mijlocul ecranului, chiar dacă utilizatorul nu face clic pe nimic. În al doilea rând, animația nu este declanșată în punctul mouse-ului, ci este decalată în jos și în dreapta. Putem repara aceste două lucruri cu ușurință.
Forma și explozia noastră au .Joaca() la sfârșitul blocurilor de cod respective. Nu mai avem nevoie de asta .replay () este apelat în gestionarea evenimentelor. Puteți elimina .play () din ambele blocuri de cod. Din același motiv, puteți elimina isShowStart: adevărat de asemenea, deoarece nu mai avem nevoie de el pentru a arăta la început.
Pentru a remedia problema de poziționare va trebui să setăm valori de poziție pentru obiectele noastre. După cum vă veți aminti chiar de la prima noastră formă, mo.js le pune în mod implicit în centrul paginii. Când aceste valori sunt combinate cu poziția mouse-ului, acesta creează offset-ul. Pentru a scăpa de acest offset, pur și simplu adăugați aceste linii atât pentru redCirc și scântei obiecte:
left: 0,
top: 0,Acum singurele valori ale poziției pe care le iau obiectele noastre sunt valorile poziției mouse-ului transmise de ascultătorul de evenimente. Acum lucrurile ar trebui să funcționeze mult mai bine.
Acest proces de adăugare a obiectelor în gestionarul de evenimente este modul în care vom declanșa toate animațiile noastre, deci nu uitați să adăugați fiecare obiect nou la el de acum înainte! Acum, că avem elementele de bază care funcționează cum le dorim, să adăugăm câteva rafale mai mari și mai luminoase.
Devenind psihedelic
Să începem cu niște triunghiuri rotative. Ideea de aici a fost de a crea un efect stroboscopic hipnotic, iar configurarea acestui lucru este de fapt destul de ușoară. Adăugați o altă rafală cu acești 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
}
});Totul aici ar trebui să fie destul de familiar până acum, deși există câteva puncte noi. Veți observa că, mai degrabă decât să definim forma ca un triunghi, am numit-o a poligon înainte de a aloca numărul de puncte are 3.
Am dat și noi completati funcționează o serie de culori pentru a lucra, fiecare al cincilea triunghi va reveni la roșu și modelul va continua. Valoarea ridicată a unghi setarea face ca explozia să se rotească suficient de repede pentru a-și produce efectul stroboscopic.
Dacă codul nu funcționează pentru dvs., asigurați-vă că ați adăugat obiectul triunghiuri la clasa ascultătorului de evenimente, așa cum am făcut cu obiectele anterioare.
Destul de psihedelic! Să adăugăm o altă explozie pentru a o urma.
Pentagonuri dansante
Putem folosi ceva aproape identic cu al nostru triunghiuri obiectează să facă explozia care o urmează. Acest cod ușor modificat produce hexagone rotative suprapuse colorate viu:
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
}
});Principala schimbare aici este că am adăugat un întârziere de 500 ms, astfel încât explozia să nu înceapă decât după triunghiuri. Prin schimbarea câtorva valori, ideea aici a fost de a face explozia să se rotească în direcția opusă triunghiurilor. Din fericire, la apariția pentagonelor, efectul stroboscopic al triunghiurilor face să pară că se învârt împreună.
O mică întâmplare
Să adăugăm un efect care utilizează valori aleatorii. Creați o rafală cu aceste proprietăți:
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)',
}
});Această explozie va crea linii care încep roșii și se estompează până la transparență, micșorându-se în timp. Ceea ce face această componentă interesantă este că valorile aleatorii sunt utilizate pentru a determina unele dintre proprietățile sale.
The gradeShift oferă obiectului copil un unghi de pornire. Prin aleatorizarea acestui lucru, oferă o explozie total diferită la fiecare clic. Valorile aleatorii sunt, de asemenea, utilizate pentru rază și întârziere funcții de adăugat efectului haotic.
Iată efectul de la sine:
Deoarece folosim valori aleatorii aici, trebuie să adăugăm o metodă suplimentară la gestionatorul de evenimente pentru obiect:
redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();The Genera() funcția calculează noi valori aleatorii de fiecare dată când este chemat evenimentul. Fără aceasta, forma ar alege valori aleatorii prima dată când este apelată și ar continua să utilizeze aceste valori pentru fiecare apel ulterior. Acest lucru ar strica total efectul, așa că asigurați-vă că adăugați acest lucru!
Puteți utiliza valori aleatorii pentru aproape fiecare element al obiectelor mo.js și sunt o modalitate simplă de a crea animații unice.
modul kernel neașteptat captează Windows 10
Cu toate acestea, întâmplarea nu este singura modalitate de a adăuga mișcări dinamice animațiilor. Să ne uităm la clătina funcţie.
Liniile eșalonate
Pentru a arăta cum clătina funcția funcționează, vom face ceva un pic ca Catherine Wheel. Creați o nouă rafală cu acești 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
}
});Totul aici este familiar până acum, o explozie creează 50 de copii care au linii roșii sau portocalii. Diferența aici este că trecem de întârziere proprietate a eșalonat (10) funcţie. Acest lucru adaugă o întârziere de 10 ms între emisia fiecărui copil, oferindu-i efectul de filare pe care îl căutăm.
Funcția de eșalonare nu folosește nicio valoare aleatorie, deci nu veți avea nevoie de Genera funcția în gestionatorul de evenimente de această dată. Să vedem tot ce avem până acum în acțiune:
Ne-am putea opri cu ușurință aici, dar să adăugăm încă o rafală pentru a încheia acest proiect.
Piețe inteligente
Pentru această ultimă explozie, să facem ceva folosind dreptunghiuri. Adăugați acest obiect în ascultătorul de cod și de evenimente:
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
}
});Acest obiect nu adaugă nimic nou la ceea ce am lucrat deja astăzi, este inclus doar pentru a arăta cum modele geometrice complexe pot fi create cu ușurință prin cod.
Acesta nu a fost rezultatul preconizat al acestui obiect atunci când a fost creat în etapele de testare ale scrierii acestui tutorial. Odată ce codul a rulat, a devenit clar că am dat peste ceva mult mai frumos decât aș fi putut face intenționat!
Cu acest obiect final adăugat, am terminat. Să vedem totul în acțiune.
Mo.js: un instrument puternic pentru animații web
Această simplă introducere în mo.js acoperă instrumentele de bază necesare pentru a crea animații frumoase. Modul în care sunt utilizate aceste instrumente poate crea aproape orice, iar pentru multe sarcini bibliotecile web reprezintă o alternativă simplă la utilizare Photoshop , After Effects sau alt software costisitor.
Această bibliotecă este utilă pentru cei care lucrează atât în programare, cât și în dezvoltarea web, gestionarea evenimentelor utilizate în proiect ar putea fi ușor utilizată pentru crearea de butoane reactive și text pe site-uri web sau în aplicații. Distrează-te cu el: nu există greșeli, ci doar accidente fericite!
Acțiune Acțiune Tweet E-mail Merită să faceți upgrade la Windows 11?Windows a fost reproiectat. Dar este suficient pentru a vă convinge să treceți de la Windows 10 la Windows 11?
Citiți în continuare Subiecte asemănătoare- Programare
- JavaScript
Ian Buckley este un jurnalist independent, muzician, interpret și producător video care locuiește în Berlin, Germania. Când nu scrie sau pe scenă, se ocupă de electronice sau coduri DIY în speranța de a deveni un om de știință nebun.
Mai multe de la Ian BuckleyAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona