Share
Two.js un API care facilitează crearea de forme 2D cu cod. Urmați și veți învăța cum să creați și să animați forme din JavaScript.
Two.js este agnostic renderer, astfel încât să vă puteți baza pe același API pentru a desena cu Canvas, SVG sau WebGL. Biblioteca are o mulțime de metode care pot fi folosite pentru a controla modul în care apar diferite forme pe ecran sau modul în care acestea sunt animate.
Versiunea necomprimată a bibliotecii are o dimensiune de aproximativ 128 KB, iar versiunea comprimată este de 50 KB. Dacă utilizați cea mai recentă versiune, puteți reduce în continuare dimensiunea bibliotecii utilizând o construcție personalizată.
Puteți descărca versiunea minimizată a bibliotecii de la GitHub sau puteți să vă conectați direct la versiunea găzduită de CDN. Odată ce ați adăugat biblioteca în pagina web, puteți începe să desenați și să animați diferite forme sau obiecte.
În primul rând, trebuie să-i spui lui Two.js despre elementul pe care vrei să desenezi și să-ți animi formele. Puteți trece câțiva parametri la Două constructorul să facă lucrurile.
Setați tipul de redare utilizând funcția tip proprietate. Puteți specifica o valoare ca svg, WebGL, pânză, etc tip este setat sa svg în mod implicit. Lățimea și înălțimea spațiului de desenare pot fi specificate utilizând lăţime și înălţime parametrii. De asemenea, puteți seta spațiul de desen pe ecranul complet disponibil utilizând ecran complet parametru. Cand ecran complet este setat la true, valorile lăţime și înălţime vor fi ignorate.
În cele din urmă, puteți spune celor Two.js să porniți automat o animație cu ajutorul booleanului pornire automată parametru.
După trecerea tuturor parametrilor doriți către constructor, puteți începe să desenați linii, dreptunghiuri, cercuri și elipse.
Aveți posibilitatea să desenați o linie utilizând linia de două linii (x1, y1, x2, y2). Aici, (x1, y1) sunt coordonatele primului punct final și (x2, y2) sunt coordonatele celui de-al doilea punct final. Această funcție va reveni a Two.Line obiect, care poate fi stocat într-o variabilă pentru manipulare ulterioară într-un punct ulterior.
Într-o manieră similară, puteți trage dreptunghiuri normale și rotunjite folosind două.makeRectangle (x, y, lățime, înălțime) și Two.makeRoundedRectangle (x, y, lățime, înălțime, rază) respectiv. Sa nu uiti asta X și y determină centrul dreptunghiului, în loc de coordonatele din stânga sus ca multe alte biblioteci. lăţime și înălţime parametrii vor determina dimensiunea dreptunghiului. rază parametrul este utilizat pentru a specifica valoarea razei pentru colțul rotunjit.
De asemenea, puteți face cercuri și elipse pe o pagină Web folosind Ciclul doi x (x, y, raza) și two.makeEllipse (x, y, lățime, înălțime) respectiv. La fel ca și dreptunghiurile X și y parametrii specifică centrul cercului sau elipsei. Setarea lăţime și înălţime la aceeași valoare în cazul unei elipse, o va face ca un cerc.
O metodă utilă în Two.js pe care o veți folosi frecvent este two.makeGroup (obiecte). Puteți parcurge o listă de obiecte diferite sau puteți trece un șir de obiecte, căi sau grupuri ca parametru la această metodă. De asemenea, va reveni a Two.Group obiect.
După ce ați creat un grup, puteți manipula simultan toți copiii acestuia folosind proprietățile pe care grupul le pune la dispoziție.
accident vascular cerebral și completati proprietățile pot fi utilizate pentru a seta culoarea cursei și umplerii pentru toți copiii dintr-un grup. Ei vor accepta toate formele valide în care puteți reprezenta o culoare în CSS. Aceasta înseamnă că aveți libertatea de a utiliza notație RGB, HSL sau hexazecimal. De asemenea, puteți utiliza pur și simplu numele de culoare, cum ar fi portocale, roșu, sau albastru. În mod similar, puteți seta valori pentru toate celelalte proprietăți, cum ar fi lățimea liniei, opacitate, mitră, și capac. Este posibil să eliminați umplerea și lovitura de la toți copiii dintr - un grup folosind noFill () și noStroke () metode.
Puteți aplica și alte transformări fizice cum ar fi scară, rotație, și traducere. Aceste transformări vor fi aplicate pe obiecte individuale. Adăugarea de obiecte noi într-un grup și eliminarea lor este ușoară cu metode precum adăuga() și elimina().
Puteți defini gradienți liniari și radiali în Two.js. Definirea unui gradient nu înseamnă că acesta va fi redat automat pe ecran, dar va fi disponibil pentru tine când îl setați completati sau accident vascular cerebral valorile diferitelor obiecte.
Puteți defini un gradient liniar folosind (x1, y1, x2, y2, se oprește). Valorile x1 și y1 determină coordonatele începutului gradientului. În mod similar, valorile x2 și y2 determină coordonatele capătului gradientului. opriri parametru este o serie de Two.Stop instanțe. Acestea definesc culorile fiecărei părți a matricei și unde fiecare culoare trece în următoarea. Acestea pot fi definite folosind new Two.Stop (offset, culoare, opacitate), Unde ofset determină punctul de pe gradient în cazul în care acea culoare specială trebuie să fie complet redat. culoare parametru determină culoarea gradientului la un anumit punct. Puteți folosi orice reprezentări color CSS valide ca valoare. În cele din urmă, opacitate parametrul determină opacitatea culorii. Opacitatea este opțională și poate avea orice valoare între 0 și 1.
Puteți defini gradienți radiali într-un mod similar folosind două.makeRadialGradient (x, y, rază, opriri, fx, fy). În acest caz, valorile X și y determină centrul gradientului. rază parametrul specifică gradul de extindere a gradientului. De asemenea, puteți trece o serie de opriri la această metodă pentru a seta compoziția culorilor gradientelor. Parametrii fx și fy sunt opționale și pot fi folosite pentru a specifica poziția focală pentru gradient.
Consultați câteva dintre tipurile de gradient și codul acestora în Codul de mai jos.
Amintiți-vă că X și y Poziția gradienților este legată de originea formei pe care încearcă să o umple. De exemplu, un gradient radial care se presupune că va umple o formă din centru va avea întotdeauna X și y setat la zero.
Two.js vă permite, de asemenea, să scrieți text pe zona de desen și să îl actualizați ulterior în funcție de nevoile dvs. Aceasta necesită utilizarea metodei two.makeText (mesaj, x, y, stiluri). Ar putea fi evident din numele parametrilor mesaj este textul real pe care doriți să îl scrieți. Parametrii X și y sunt coordonatele punctului care va acționa ca centru pentru scrierea textului. stiluri parametrul este un obiect care poate fi utilizat pentru a seta valorile unui set mare de proprietăți.
Puteți utiliza stiluri pentru a seta valorile proprietăților, cum ar fi fontul familie, mărimea, și aliniere. De asemenea, puteți specifica valoarea proprietăților, cum ar fi completati, accident vascular cerebral, opacitate, rotație, scară, și traducere.
După ce ați aflat despre toate aceste metode și proprietăți, este timpul să le aplicați unui proiect. În acest tutorial, vă voi arăta cum putem folosi Two.js pentru a reda primele zece elemente ale mesei periodice cu electroni care se rotesc în jurul nucleului. Nucleul va avea, de asemenea, o ușoară mișcare pentru a îmbunătăți atractivitatea vizuală a reprezentării noastre.
Începem prin definirea unor variabile și funcții care vor fi utilizate ulterior.
Accentsconagua
var centruX = fereastră.innerWidth / 2; var centrulY = window.innerHeight / 2; var elem = document.getElementById ("atomi"); var elementName = ["", "Hidrogen", "Heliu", "Litiu", "Beriliu", "Bor", "Carbon", "Azot", "Oxigen", "Fluor", "Neon"]; var stiles = aliniere: "center", dimensiune: 36, familie: "Lato"; var nucleusCount = 10; var nucleuArray = Array (); var electronCount = 10; var electronArray = Array (); funcția intRange (min, max) retur Math.random () * (max - min) + min; Codul de mai sus stochează coordonatele centrului ferestrei noastre în variabile centerX și centerY. Acestea vor fi folosite mai târziu pentru a plasa atomul nostru în centru. elementNames array conține numele primelor zece elemente ale tabelului periodic. Indicele fiecărui nume corespunde numărului de electroni și protoni ai acelui element și începe cu un șir gol. stiluri obiect conține proprietăți pentru styling obiect text.
De asemenea, am definit o funcție IntRange () pentru a obține o valoare intregă aleatorie în cadrul unor anumite extreme.
var 2 = nou Două (fullscreen: true) appendTo (elem); var protonColor = două.makeRadialGradient (0, 0, 15, nou Două.Stop (0, "roșu", 1), nou Două.Stop (1, "negru", 1)); var neutronColor = 2.makeRadialGradient (0, 0, 15, nou Două.Stop (0, "albastru", 1), nou Două.Stop (1, "negru", 1)); pentru (i = 0; i < nucleusCount; i++) nucleusArray.push(two.makeCircle(intRange(-10, 10), intRange(-10, 10), 8)); nucleusArray.forEach(function(nucleus, index) if (index % 2 == 0) nucleus.fill = protonColor; if (index % 2 == 1) nucleus.fill = neutronColor; nucleus.noStroke(); );
Aceasta creează o instanță a Două și definește două gradienți radiali. Gradienții radiali roșii / negri vor reprezenta protoni, iar gradienții albastru / negru vor reprezenta neutroni.
Am folosit IntRange () funcția de a plasa toate aceste neutroni și protoni în 20 pixeli unul de celălalt. makeCircle () metoda stabilește de asemenea raza acestor protoni și neutroni la 10 pixeli. După aceea, vom repeta nucleusArray și umpleți fiecare cerc cu un gradient diferit alternativ.
pentru (var i = 0; i < 10; i++) if (i < 2) var shellRadius = 50; var angle = i * Math.PI; electronArray.push( two.makeCircle( Math.cos(angle) * shellRadius, Math.sin(angle) * shellRadius, 5 ) ); if (i >= 2 && i < 10) var shellRadius = 80; var angle = (i - 2) * Math.PI / 4; electronArray.push( two.makeCircle( Math.cos(angle) * shellRadius, Math.sin(angle) * shellRadius, 5 ) );
Plasarea neutronilor și a protonilor în interiorul nucleului a fost ușoară. Cu toate acestea, plasarea corectă a electronilor la o distanță uniformă va necesita puțină matematică. Noi folosim shellRadius variabilă pentru a specifica distanța diferitelor coajă de electroni din nucleu. Un cerc întreg acoperă un unghi egal cu 2 radiani PI. Putem pune electroni diferiți în mod uniform distribuind cele 2 radiali PI între ele în mod egal.
Math.cos () și Math.sin () funcțiile sunt utilizate pentru a separa componentele verticale și orizontale ale vectorului de poziție a diferiților electroni în funcție de unghiul lor.
var orbitA = două cicluri (centerX, centerY, 50); orbitA.fill = "transparent"; orbitA.linewidth = 2; orbitA.stroke = "rgba (0, 0, 0, 0,1)"; var orbitB = două cicluri (centerX, centerY, 80); orbitB.fill = "transparent"; orbitB.linewidth = 2; orbitB.stroke = "rgba (0, 0, 0, 0,1)"; grupul varElectronA = grupul de două grupări (electronArray.slice (0, 2)); groupElectronA.translation.set (centrulX, centralY); groupElectronA.fill = "portocaliu"; groupElectronA.linewidth = 1; grupul varElectronB = grupa de două mărimi (electronArray.slice (2, 10)); groupElectronB.translation.set (centruX, centralY); groupElectronB.fill = "galben"; groupElectronB.linewidth = 1; grupul varNucleus = grupul cu două grupări (nucleusArray); groupNucleus.translation.set (centrulX, centralY);
Această parte a codului pune electroni din diferite cochilii, precum și neutroni și protoni în propriile grupuri separate. De asemenea, setează culorile de umplere pentru toți electronii dintr-o orbită specifică.
două .bind ("actualizare", funcție (frameCount) groupElectronA.rotion + = 0.025 * Math.PI; groupElectronB.rotation + = 0.005 * Math.PI; groupNucleus.rotation - = 0.05;) .play (); var text = 2.makeText ("", centerX, 100, stiluri); nucleusArray.forEach (funcție (nucleu, index) nucleus.opacity = 0;); electronArray.forEach (funcție (electron, index) electron.opacity = 0;); Această parte a codului stabilește opacitatea electronilor individuali și a protonilor la zero. De asemenea, îi spune lui Two.js să rotească electronii și protonii la viteze specifice.
vizibil = 0; document.addEventListener ("clic", funcție (eveniment) if (vizibil < nucleusArray.length) nucleusArray[visible].opacity = 1; electronArray[visible].opacity = 1; visible++; text.value = elementNames[visible]; else nucleusArray.forEach(el => el.opacity = 0); electronArray.forEach (el => el.opacitate = 0); vizibil = 0; text.value = elementNames [0]; ); Partea finală a codului ne permite să iteram prin elemente făcând clic pe mouse sau atingând. Pentru a încărca următorul element, vom face un electron și un proton sau un neutron mai vizibil și vom actualiza numele elementului. După ce faceți clic pe ultimul element, toate particulele sunt ascunse din nou, astfel încât să putem începe din nou. vizibil variabila ține evidența numărului de particule atomice care sunt vizibile în prezent, astfel încât să le putem arăta sau să le ascundem în consecință.
Încercați să faceți clic sau să atingeți din următoarea demonstrație CodePen pentru a vedea primele zece elemente ale tabelului periodic.
Am început acest tutorial cu o scurtă introducere în biblioteca Two.js și cum poate fi folosită pentru a desena forme precum dreptunghiuri, cercuri și elipse. După aceea, am discutat modul în care putem grupa diferite obiecte împreună pentru a le manipula pe toate odată. Am folosit această abilitate pentru a grupa elemente pentru a le traduce și a le roti în sincronizare. Aceste instrumente s-au adunat în animația noastră a atomilor primelor zece elemente din tabelul periodic.
După cum puteți vedea, crearea grafică 2D animată este foarte ușoară utilizând Two.js. Obiectivul acestui post a fost să vă ajute să începeți rapid, așa că am acoperit numai elementele de bază. Cu toate acestea, ar trebui să citiți documentația oficială pentru a afla mai multe despre bibliotecă!
