Acțiune:
Cum sa faci animatii codate frumos Web cu Mo.JS
Dacă sunteți în căutarea de a începe propriul dvs. site web, frumoase animații caută poate face să strălucească. Există mai multe moduri de a realiza acest lucru, de la a face un GIF animat dintr-o piesă de film existentă, la învățarea de a crea propriul dvs. de la zero cu software cum ar fi Blender sau Maya.
Există, de asemenea, biblioteci disponibile pentru a crea animații programat. Din punct de vedere istoric, coderii web au folosit jQuery pentru a crea animații simple, dar, întrucât web-ul a fost dezvoltat și HTML5 a devenit noul standard, au apărut opțiuni proaspete. Bibliotecile CSS pentru animație au devenit incredibil de puternice în noul cadru, împreună cu bibliotecile JavaScript proiectate special pentru animația vectorului în browser.
Astăzi vom analiza mo.js, unul dintre copiii mai noi 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 de utilizator care creează modele frumoase.
Introduceți Mo.js
Mo.js este o bibliotecă pentru crearea cu ușurință a graficii de mișcare pentru web. Este conceput pentru a crea lucruri frumoase simplu pentru cei care nu sunt prea savvy de cod, permițând în același timp programatorilor veterani să descopere o parte artistică pe care nu o știau niciodată. După cum sugerează și numele, se bazează pe limbajul popular 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 tot în aceeași fereastră de browser. Dacă preferați, puteți lucra într-un editor la alegere. Dacă doriți să săriți tutorialul pas cu pas, codul complet este disponibil aici.
Creați un stilou nou și veți fi întâmpinat cu acest ecran:
Înainte de a începe, va trebui să faceți câteva schimbări. Faceți clic pe Setări pictograma din partea dreaptă sus și navigați la JavaScript fila.
Vom folosi hărmălaie ca pre-procesor de cod, deci selectați-l din meniul derulant. Babel face JavaScript mai ușor de înțeles, împreună cu furnizarea ECMAScript 6 Ce este ES6 și ce programatori Javascript trebuie să știe Ce este ES6 și ce programatori Javascript trebuie să știi ES6 se referă la versiunea 6 a limbajului de programare ECMA Script (Javascript). Să ne uităm acum la unele modificări majore pe care ES6 le aduce la JavaScript. Citește mai mult suport pentru browserele mai vechi. Dacă nu știi ce înseamnă asta, nu-ți face griji, doar o să ne facă viața mai ușoară aici.
De asemenea, trebuie să importem biblioteca mo.js în proiect. Faceți acest lucru căutând mo.js în Adăugați scripturi externe / pixuri și selectați-l.
Cu aceste două lucruri în loc, 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 despre fundalul alb orb în panoul de vizualizare. Schimbați proprietatea culorii de fundal scriind acest cod în CSS panou.
corp fond: rgba (11,11,11,1); Crearea unei forme este un proces simplu, iar conceptul din spatele ei conduce întreaga bibliotecă. Să formăm o formă de cerc implicită. Introduceți acest cod în JS panoul:
const redCirc = noua mojs.Shape (isShowStart: true);Aici, am creat o const valoare cu numele redCirc și l-au atribuit unui a noi mojs.Shape. Dacă sunteți complet nou la codificare, acordați atenție ordinului de tip bracket aici și nu uitați varianta punctului verbal la sfârșit!
Până acum nu am trecut în parametri excepționali isShowStart: true, ceea ce înseamnă că va apărea pe ecran chiar înainte de a le fi atribuit o mișcare. Veți vedea că a pus un cerc roz în centrul ecranului:
Acest cerc este implicit Formă pentru mo.js. Putem schimba această formă ușor prin adăugarea unei linii la codul nostru:
const redCirc = mojs.Shape nou (isShowStart: true, shape: 'rect');Pentru a adăuga mai multe proprietăți unui obiect, folosim o virgulă pentru ao separa. Aici am adăugat o formă proprietate, și a definit-o ca fiind 'RECT'. Salvați pixul și veți vedea în schimb schimbările implicite ale formei într-un pătrat.
Acest proces de transmitere a valorilor către Formă obiect este modul în care le personalizăm. Chiar acum avem un pătrat care nu face prea mult. Să încercăm să animăm ceva.
Bazele mișcării
Pentru a obține ceva care pare mai impresionant, să înființăm un cerc, cu un accident roșu în jurul lui și fără umplere în interior.
const redCirc = mojs.Shape nou (isShowStart: true, accident vascular cerebral: 'roșu', strokeWidth: 5, umpleți: 'none', radius: 15);După cum puteți vedea, am atribuit și o lăţime valoare pentru accident vascular cerebral, și a rază pentru cerc. Lucrurile încep deja să pară puțin diferite. Dacă forma dvs. nu se actualizează, asigurați-vă că nu ați ratat virgule sau ghilimele 'roșu' 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 asta. În exemplul de mai sus, acest cerc roșu apare acolo unde utilizatorul face clic, înainte de a ieși spre exterior. O modalitate prin care putem face acest lucru este schimbarea razei și a opacității în timp. Să modificăm codul:
rază: 15:30, opacitate: 1: 0, durata: 1000Prin schimbarea rază proprietate, și adăugarea opacitate și durată proprietăți, am dat instrucțiunile de formă care trebuie efectuate în timp. Acestea sunt deltă obiecte, care dețin informații de început și de sfârșit pentru aceste proprietăți.
Veți observa că nu se întâmplă nimic încă. Acest lucru se datorează faptului că nu l-am adăugat .Joaca() pentru a-i spune să îndeplinească instrucțiunile noastre. Adăugați-l între parantezele de capăt și punct și virgulă și ar trebui să vedeți cercul în care vă aflați.
Acum ajungem undeva, dar pentru ao face cu adevărat specială, să analizăm câteva posibilități mai detaliate.
Comandarea și relaxarea 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ă aveți un control mai mic.
Putem face acest lucru cu .atunci() funcţie. Mai degrabă decât să ne schimbăm raza sau opacitatea, să ne facem forma să rămână acolo unde începe, înainte de a se schimba după o anumită perioadă de timp.
const redCirc = noi mojs.Shape (isShowStart: true, accident vascular cerebral: "roșu", strokeWidth: 5, umpleți: 'none', radius: 15, duration: 1000). .Joaca();Acum, forma noastră va apărea cu valorile pe care le-am atribuit, așteptați 1000 ms, înainte de a efectua tot ce am pus în .atunci() funcţie. Să adăugăm câteva instrucțiuni între paranteze:
// face mai multe lucruri aici strokeWidth: 0, scară: 1: 2, relaxare: 'sin.in', durata: 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, relaxarea pe bază de sine cu sin.in. Mo.js are o varietate de curbe de relaxare încorporate, cu abilitatea utilizatorilor avansați de a adăuga propriile lor. În acest caz, scala în timp se întâmplă în funcție de o undă sinusoidală curbată în sus.
Pentru o scurgere vizuală de diferite curbe, verificați easings.net. Combinați acest lucru cu strokeWidth schimbând la 0 peste durata stabilită și aveți un efect de disparitie mult mai dinamic.
Formele reprezintă baza pentru tot ce este în Mo.js, dar ele sunt doar începutul povestirii. Să ne uităm la exploziile.
Explozie cu potențial în Mo.js
A Izbucni în Mo.js este o colecție de forme care provin dintr-un punct central. Vom face ca acestea să fie baza animației noastre finale. Puteți apela o eroare implicită în același mod în care faceți o formă. Să facem niște scântei:
const sparks = noi mojs.Burst (). play ();Puteți vedea, doar prin adăugarea unui gol Izbucni obiect și spunându-i să se joace, obținem efectul de spargere implicit. Putem afecta mărimea și rotația burstului prin animarea lui rază și unghi proprietăţi:
const sparks = noi mojs.Burst (radius: 0:30, relaxare: 'cubic.out', unghi: 0: 90, relaxare: 'quad.out',).Deja am adăugat o rază personalizată și o mișcare de spargere:
Pentru a le face să arate mai mult ca scântei, haideți să schimbați formele pe care explozia le utilizează și câte forme formează izbucnirea. Faceți acest lucru adresându-vă proprietăților copiilor exploziei.
(0: 90, relaxare: 'quad.out', număr: 50, copii: shape: 0: 'cruce', cursă: 'alb', puncte: 12, rază: 10, umplere: 'none', unghi: 0: 360, duration: 300).Veți observa că proprietățile copilului sunt aceleași cu proprietățile formei cu care am lucrat deja. De această dată am ales o cruce ca formă. Toate cele 50 de forme au acum aceleași proprietăți. Începe să arate destul de bine! Acesta este primul lucru pe care utilizatorul îl va vedea atunci când face clic pe mouse.
Deja putem vedea că accidentul roșu al primului nostru redCirc forma rămâne prea mult timp. Încercați să schimbați durata, astfel încât ambele animații să se potrivească împreună. Ar trebui să se termine în felul următor:
Suntem departe de a ne termina cu animația noastră, dar hai să facem un moment pentru a deveni reactiv pentru utilizatori.
Evenimentul principal
Vom folosi un handler de evenimente pentru a declanșa animațiile noastre în poziția pe care utilizatorul o face clic. La sfârșitul blocului de cod, adăugați aceasta:
document.addEventListener ("clic", funcția (e) );Această bucată de cod ascultă clicurile de mouse și face orice instrucțiuni sunt în paranteze pentru noi. Putem adăuga noi redCirc și scântei obiecte față de acest ascultător.
document.addEventListener ('click', functie (e) redCirc .tune (x: e.pageX, y: e.pageY,) e.pageY) .replay (););Cele două funcții pe care le numim aici sunt .ton() și .reluare (). Funcția de reluare 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 este apăsată.
ton funcția trece în valori în obiectul nostru, astfel încât să puteți schimba lucrurile când este declanșată. În acest caz, trecem în coordonatele paginii în care a fost făcut clic pe mouse și atribuindu-se poziția x și y a animației noastre în mod corespunzător. 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 încă în mijlocul ecranului, chiar dacă utilizatorul nu face nimic. În al doilea rând, animația nu este declanșată la punctul mouse-ului, dar este compensată în jos și spre dreapta. Putem rezolva cu ușurință amândouă aceste lucruri.
Forma noastră și izbucnirea au .Joaca() la sfârșitul blocurilor lor de coduri respective. Nu mai avem nevoie de asta .reluare () este chemat în procesul de tratare a evenimentului. Puteți elimina .play () din ambele blocuri de cod. Din același motiv, puteți să eliminați isShowStart: true de asemenea, pentru că nu mai avem nevoie să prezentăm la început.
Pentru a rezolva problema de poziționare, va trebui să setăm valorile poziției pentru obiectele noastre. După cum vă veți aminti din prima noastră formă, mo.js le pune în centrul paginii în mod implicit. Când aceste valori sunt combinate cu poziția mouse-ului, acesta creează offset-ul. Pentru a scăpa de această compensare, pur și simplu adăugați aceste linii la ambele redCirc și scântei obiecte:
stânga: 0, sus: 0,Acum, singurele valori ale poziției pe care obiectele noastre le iau sunt valorile poziției mouse-ului transmise de către ascultătorul evenimentului. Acum lucrurile ar trebui să funcționeze mult mai bine.
Acest proces de adăugare de obiecte în dispozitivul de gestionare a evenimentului este modul în care vom declanșa toate animațiile noastre, deci nu uitați să adăugați fiecare obiect nou de acum încolo! Acum, că avem principiile de lucru cum ne-o dorim, să adăugăm câteva izbucniri mai mari și mai strălucitoare.
Noțiuni de bază psihedelice
Să începem cu niște triunghiuri care se rotesc. Ideea a fost aceea de a crea un efect stroboscopic hipnotic, iar stabilirea acestui lucru este de fapt destul de ușoară. Adăugați o altă explozie cu acești parametri:
constă triunghiuri = noi mojs.Burst (rază: 0: 1000, relaxare: 'cubic.out', unghi: 1080: 0, relaxare: 'quad.out', stânga: 0; : 20, copii: forma: 'poligon', puncte: 3, raza: 10: 100, umple: ["rosu", galben, albastru, ;Totul aici ar trebui să fie destul de familiar până acum, deși există câteva puncte noi. Veți observa că, în loc să definim forma ca un triunghi, am numit-o a poligon înainte de a atribui numărul puncte are ca 3.
De asemenea, am dat completati o serie de culori pentru a lucra cu, fiecare triunghi cincilea va reveni înapoi la roșu și modelul va continua. Valoarea mare a unghi setarea face ca burstul să se rotească suficient de repede pentru a produce efectul său stroboscopic.
Dacă codul nu funcționează pentru dvs., asigurați-vă că ați adăugat obiectul triunghiuri la clasa ascultătorilor evenimentului, așa cum am făcut-o cu obiectele anterioare.
Destul de psihedelic! Să adăugăm o altă izbucnire care să o urmeze.
Dancing Pentagons
Putem folosi ceva aproape identic cu cel al nostru triunghiuri obiect pentru a face izbucnirea care o urmează. Acest cod modificat ușor produce hexagonii care se suprapun în suprapunere:
const pentagoane = noi mojs.Burst (rază: 0: 1000, relaxare: 'cubic.out', unghi: 0: 720, relaxare: 'quad.out', stânga: 0, top: 0 : 20, copii: formă: "poligon", rază: 1: 300, puncte: 5, umplere: 3000);Schimbarea principală aici este că am adăugat o întârziere de 500ms, astfel încât explozia nu va începe decât după triunghiuri. Prin schimbarea câtorva valori, ideea a fost aceea de a face ca spargerea să se rotească în direcția opusă triunghiurilor. Prin accident fericit, până la apariția pentagonilor, efectul stroboscopic al triunghiurilor îl face să pară că se rotesc împreună.
O mică întâmplare
Să adăugăm un efect care folosește valori aleatorii. Creați o explozie cu următoarele proprietăți:
const redSparks = noi mojs.Burst (left: 0, top: 0, count: 8, raza: 150: 350, unghi: 0:90, relaxare: 'cubic.out' ("90"), raza: "rand (20, 300)", cursă: 'roșu': transparentă , durata: 500, întârziere: 'rand (0, 150)',);Această explozie va crea linii care încep roșu și se vor șterge la transparență, în timp ce se vor reduce. Ceea ce face ca această componentă să fie interesantă este că valorile aleatoare sunt folosite pentru a determina unele dintre proprietățile sale.
degreeShift dă obiectului copil un unghi de pornire. Prin randomizarea acestui lucru, acesta oferă o explozie total diferită la fiecare clic. Valorile aleatorii sunt, de asemenea, utilizate pentru rază și întârziere funcții pentru a adăuga efectul haotic.
Iată efectul de la sine:
Deoarece folosim valorile aleatoare aici, trebuie să adăugăm o metodă suplimentară pentru managerul evenimentului nostru pentru obiect:
redSparks .tune (x: e.pageX, y: e.pageY) .replay () .generați ();Genera() funcția calculează valori aleatorii proaspete de fiecare dată când se solicită evenimentul. Fără aceasta, forma ar alege valori aleatorii la prima denumire și va continua să utilizeze aceste valori pentru fiecare apel ulterior. Acest lucru ar distruge în totalitate efectul, deci asigurați-vă că adăugați acest lucru!
Puteți utiliza valori aleatorii pentru aproape fiecare element al obiectelor mo.js și ele sunt o modalitate simplă de a face animații unice.
Randomitatea nu este singura modalitate de a adăuga mișcări dinamice animațiilor. Să ne uităm la clătina funcţie.
Liniile învecinate
Pentru a arăta cum clătina funcționează, vom face ceva puțin ca o roată Catherine. Creați o nouă explozie cu următorii parametri:
const liniile = noi mojs.Burst (rază: 0: 1000, relaxare: 'cubic.out', unghi: 0: 1440, relaxare: 'cubic.out', stânga: 0, top: 0 : 50, copii: shape: 'line', rază: 1: 100, relaxare: 'elastic.out', umplere: 'none', accident vascular cerebral: ['red', 'orange'], delay: (10) ", durata: 1000);Totul este familiar până acum, o explozie creează 50 de copii care sunt linii roșii sau portocalii. Diferența aici este că trecem întârziere proprietate a clătinare (10) funcţie. Aceasta adaugă 10 ms de întârziere între emisiile fiecărui copil, oferindu-i efectul de spinning pe care îl căutăm.
Funcția de ștergere nu utilizează valori aleatorii, deci nu veți avea nevoie de a Genera funcția din acest moment. Să vedem tot ce am până acum în acțiune:
S-ar putea să ne oprim aici cu ușurință, dar să adăugăm încă o nouă explozie pentru a încheia acest proiect.
Smart Squares
Pentru ultima explozie, să facem ceva folosind dreptunghiuri. Adăugați acest obiect la ascultătorii de cod și evenimente:
const: roșuSquares = noi mojs.Burst (rază: 0: 1000, relaxare: 'cubic.out', unghi: 360: 0, relaxare: 'quad.out', left: 0; : 20, copii: shape: 'rect', radiusX: 1: 1000, radiusY: 50, puncte: 5, umplere: 'none', accident vascular cerebral: 'red': orange : 15, întârziere: 1000, durata: 3000);Acest obiect nu adaugă nimic nou la ceea ce am lucrat deja astăzi, este inclus doar pentru a arăta cât de complexe pot fi create modelele geometrice complexe prin cod.
Nu a fost rezultatul dorit al acestui obiect atunci când a fost creat în etapele de testare a acestui tutorial. Odată ce codul a fugit, a devenit clar că m-am dat peste ceva mult mai frumos decât mi-aș fi putut face!
Cu acest obiect final adăugat, am terminat. Să vedem totul în acțiune.
Mo.js: Un instrument puternic pentru animațiile web
Această introducere simplă la mo.js acoperă instrumentele de bază necesare pentru a crea animații frumoase. Modul în care sunt folosite aceste instrumente poate crea aproape orice și pentru multe sarcini, bibliotecile web reprezintă o alternativă simplă la utilizarea Photoshop, After Effects sau a altor programe costisitoare.
Această bibliotecă este utilă pentru cei care lucrează atât în programare, cât și în dezvoltarea web. Programare vs. Dezvoltare Web: Care este diferența? Programare vs. Dezvoltare Web: Care este diferența? S-ar putea să credeți că programatorii de aplicații și dezvoltatorii web fac același lucru, dar asta e departe de adevăr. Iată diferențele cheie dintre programatori și dezvoltatorii web. Citiți mai mult, gestionarea evenimentului utilizată în proiect ar putea fi utilizată cu ușurință pentru crearea de butoane și texte reactive pe site-uri web sau în aplicații. Distrează-te cu el: nu există greșeli, ci doar accidente fericite!
Explorați mai multe despre: JavaScript.