Share
Two.js en API som gjør det enkelt å lage 2D-former med kode. Følg med, og du lærer å lage og animere figurer fra JavaScript.
Two.js er agnostisk gjengivelse, slik at du kan stole på samme API for å tegne med lerret, SVG eller WebGL. Biblioteket har mange metoder som kan brukes til å kontrollere hvordan ulike former vises på skjermen eller hvordan de blir animert.
Den ukomprimerte versjonen av biblioteket har en størrelse på rundt 128 kB, mens den komprimerte versjonen er 50 kB. Hvis du bruker den nyeste versjonen, kan du ytterligere redusere størrelsen på biblioteket ved hjelp av en egendefinert bygg.
Du kan enten laste ned den godkjente versjonen av biblioteket fra GitHub, eller du kan koble direkte til CDN-vertsversjonen. Når du har lagt til biblioteket på nettsiden din, kan du begynne å tegne og animere ulike former eller objekter.
Først må du fortelle Two.js om elementet du vil tegne og animere figurene på. Du kan passere noen parametre til To konstruktør for å sette opp ting.
Angi typen gjengivelse ved hjelp av type eiendom. Du kan spesifisere en verdi som svg, WebGL, lerret, etc. Den type er satt til svg som standard. Bredden og høyden på tegneplassen kan spesifiseres ved hjelp av bredde og høyde parametre. Du kan også sette tegneplass til full tilgjengelig skjerm ved hjelp av full skjerm parameter. Når full skjerm er satt til ekte, verdiene til bredde og høyde vil bli ignorert.
Til slutt kan du fortelle Two.js å automatisk starte en animasjon med hjelp av den boolske Auto Start parameter.
Etter å ha bestått alle ønskede parametere til konstruktøren, kan du begynne å tegne linjer, rektangler, sirkler og ellipser.
Du kan tegne en linje med two.makeLine (x1, y1, x2, y2). Her, (x1, y1) er koordinatene til det første sluttpunktet, og (x2, y2) er koordinatene til det andre sluttpunktet. Denne funksjonen returnerer a Two.Line objekt, som kan lagres i en variabel for videre manipulering på et senere tidspunkt.
På samme måte kan du tegne normale og avrundede rektangler med two.makeRectangle (x, y, bredde, høyde) og two.makeRoundedRectangle (x, y, bredde, høyde, radius) henholdsvis. Husk at x og y bestem rektangelens midtpunkt, i stedet for dets øverste venstre koordinater som mange andre biblioteker. De bredde og høyde Parametrene bestemmer størrelsen på rektangelet. De radius parameter brukes til å spesifisere verdien av radius for det avrundede hjørnet.
Du kan også gjengi sirkler og ellipser på en nettside med two.makeCircle (x, y, radius) og two.makeEllipse (x, y, bredde, høyde) henholdsvis. Akkurat som rektanglene, den x og y parametere angir sirkelens eller ellipsens senter. Innstilling av bredde og høyde til samme verdi i tilfelle av en ellipse vil gjøre det som en sirkel.
En nyttig metode i Two.js som du vil bruke ofte er two.makeGroup (objekter). Du kan enten sende en liste over forskjellige objekter eller sende en rekke objekter, baner eller grupper som parameteren til denne metoden. Det vil også returnere a Two.Group gjenstand.
Etter at du har opprettet en gruppe, kan du manipulere alle sine barn på en gang ved å bruke egenskaper som gruppen gjør tilgjengelig for deg.
De hjerneslag og fylle Egenskaper kan brukes til å angi slag og fyllfarge for alle barn i en gruppe. De vil godta alle gyldige former der du kan representere en farge i CSS. Dette betyr at du er fri til å bruke RGB-, HSL- eller hex-notering. Du kan også bare bruke navnet på fargen, som oransje, rød, eller blå. På samme måte kan du angi verdier for alle andre egenskaper som linje bredde, opasitet, mitre, og lokk. Det er mulig å fjerne fyll og strekk fra alle barn i en gruppe ved hjelp av noFill () og noStroke () fremgangsmåter.
Du kan også bruke andre fysiske transformasjoner som skala, rotasjon, og oversettelse. Disse transformasjonene vil bli brukt på enkelte objekter. Å legge til nye objekter i en gruppe og fjerne dem er enkelt med metoder som Legg til() og fjerne().
Du kan definere både lineære og radiale gradienter i Two.js. Definere en gradient betyr ikke at den automatisk blir gjengitt på skjermen, men den vil være tilgjengelig for bruk når du setter inn fylle eller hjerneslag verdier av ulike objekter.
Du kan definere en lineær gradient ved hjelp av two.makeLinearGradient (x1, y1, x2, y2, stopper). Verdiene x1 og y1 bestemme koordinatene for begynnelsen av gradienten. På samme måte er verdiene x2 og y2 bestemme koordinatene til slutten av gradienten. De stopp parameter er en rekke av Two.Stop forekomster. Disse definerer fargene til hver del av arrayet og hvor hver farge overgår til neste. De kan defineres ved hjelp av nye Two.Stop (offset, farge, opacity), hvor offset bestemmer punktet på gradienten der den aktuelle farge må fullstendig gjengis. De farge parameteren bestemmer fargen på graden ved det aktuelle punktet. Du kan bruke gyldige CSS-fargerepresentasjoner som verdi. Endelig, den opasitet parameteren bestemmer fargens opasitet. Opaciteten er valgfri, og den kan ha en verdi mellom 0 og 1.
Du kan definere radiale gradienter på en lignende måte med two.makeRadialGradient (x, y, radius, stopp, fx, fy). I dette tilfellet er verdiene x og y bestemme midtpunktet for gradienten. De radius parameter angir hvor langt gradienten skal strekke seg. Du kan også sende en rekke stopp til denne metoden for å angi fargesammensetningen av gradienter. Parametrene fx og fy er valgfrie, og de kan brukes til å spesifisere fokuseringsposisjonen for gradienten.
Sjekk ut noen av gradenes grad og deres kode i CodePen nedenfor.
Husk at x og y posisjonen av gradienter er med hensyn til opprinnelsen til formen de prøver å fylle. For eksempel vil en radial gradient som skal fylle en form fra senteret alltid ha x og y satt til null.
Two.js lar deg også skrive tekst på tegneområdet og oppdatere det senere etter dine behov. Dette krever bruk av metoden two.makeText (melding, x, y, stiler). Det kan tydeligvis være navnet på parametrene som budskap er den faktiske teksten du vil skrive. Parametrene x og y er koordinatene til punktet som vil fungere som midtpunkt for å skrive teksten. De stiler parameter er et objekt som kan brukes til å angi verdiene for et stort sett med egenskaper.
Du kan bruke stiler til å angi verdiene for egenskaper som skrift familie, størrelse, og Justering. Du kan også angi verdien av egenskaper som fylle, hjerneslag, opasitet, rotasjon, skala, og oversettelse.
Etter å ha lært om alle disse metodene og egenskapene, er det på tide å søke dem på et prosjekt. I denne veiledningen vil jeg vise deg hvordan vi kan bruke Two.js til å gjengi de første ti elementene i det periodiske bordet med elektroner som roterer rundt kjernen. Kjernen vil også ha en liten bevegelse for å forbedre visuell appell av vår representasjon.
Vi begynner med å definere noen variabler og funksjoner som vil bli brukt senere.
Accentsconagua
var centerX = window.innerWidth / 2; var centerY = window.innerHeight / 2; var elem = document.getElementById ("atomer"); var elementNames = ["", "Hydrogen", "Helium", "Litium", "Beryllium", "Bor", "Karbon", "nitrogen", "oksygen", "Fluor", "Neon"]; var styles = alignment: "center", størrelse: 36, familie: "Lato"; var nucleusCount = 10; var nucleusArray = Array (); var electronCount = 10; var electronArray = Array (); funksjon intRange (min, maks) return Math.random () * (max - min) + min; Ovennevnte kode lagrer koordinatene til sentrum av vinduet i variablene centerX og centery. Disse vil bli brukt senere til å plassere vårt atom i sentrum. De elementNames array inneholder navnene på de ti første elementene i det periodiske tabellen. Indeksen til hvert navn tilsvarer antall elektroner og protoner av det elementet, og det begynner med en tom streng. De stiler objekt inneholder egenskaper for styling av tekstobjektet.
Vi har også definert en funksjon intRange () for å få en tilfeldig heltallverdi innenfor bestemte ekstremer.
var to = ny to (fullscreen: true). appendTo (elem); var protonColor = two.makeRadialGradient (0, 0, 15, ny Two.Stop (0, "rød", 1), ny Two.Stop (1, "black", 1)); var neutronColor = two.makeRadialGradient (0, 0, 15, ny Two.Stop (0, "blue", 1), new Two.Stop (1, "black", 1)); for (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(); );
Dette skaper en forekomst av to og definerer to radiale gradienter. De røde / svarte radiale gradienter representerer protoner, og blå / svarte gradienter representerer nøytroner.
Vi har brukt intRange () funksjon for å plassere alle disse nøytronene og protonene innen 20 piksler av hverandre. De makeCircle () Metoden setter også radiusen til disse protonene og nøytronene til 10 piksler. Deretter slår vi over nucleusArray og fyll hver sirkel med en annen gradient vekselvis.
for (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 ) );
Plassering av nøytroner og protoner inne i kjernen var lett. Men riktig plassering av elektronene på en jevn avstand vil kreve litt matematikk. Vi bruker shellRadius variabel for å spesifisere avstanden til forskjellige elektronskjell fra kjernen. En hel sirkel dekker en vinkel som er lik 2 PI radianer. Vi kan plassere ulike elektroner jevnt ved å distribuere 2 PI radianene mellom dem på samme måte.
De Math.cos () og Tak i Math.sin () Funksjoner brukes til å skille vertikale og horisontale komponenter i posisjonsvektoren av forskjellige elektroner basert på deres vinkel.
var orbitA = two.makeCircle (centerX, centerY, 50); orbitA.fill = "transparent"; orbitA.linewidth = 2; orbitA.stroke = "rgba (0, 0, 0, 0,1)"; var orbitB = two.makeCircle (centerX, centerY, 80); orbitB.fill = "transparent"; orbitB.linewidth = 2; orbitB.stroke = "rgba (0, 0, 0, 0,1)"; var groupElectronA = two.makeGroup (electronArray.slice (0, 2)); groupElectronA.translation.set (centerX, centerY); groupElectronA.fill = "orange"; groupElectronA.linewidth = 1; var groupElectronB = two.makeGroup (electronArray.slice (2, 10)); groupElectronB.translation.set (centerX, centerY); groupElectronB.fill = "yellow"; groupElectronB.linewidth = 1; var groupNucleus = two.makeGroup (nucleusArray); groupNucleus.translation.set (centerX, centerY);
Denne delen av koden setter elektroner fra forskjellige skall samt nøytroner og protoner i egne grupper. Det setter også fyllfargene for alle elektroner i en bestemt bane samtidig.
to .bind ("oppdatering", funksjon (frameCount) groupElectronA.rotation + = 0.025 * Math.PI; groupElectronB.rotation + = 0.005 * Math.PI; groupNucleus.rotation - = 0.05;) .play (); var text = two.makeText ("", centerX, 100, stiler); nucleusArray.forEach (funksjon (kjerne, indeks) nucleus.opacity = 0;); electronArray.forEach (funksjon (elektron, indeks) electron.opacity = 0;); Denne delen av koden setter opaciteten til enkelte elektroner og protoner til null. Det forteller også Two.js å rotere elektronene og protonene ved bestemte hastigheter.
synlig = 0; document.addEventListener ("klikk", funksjon (hendelse) hvis (synlig < 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.opacity = 0); synlig = 0; text.value = elementNames [0]; ); Den siste delen av koden tillater oss å iterere gjennom elementene ved å klikke på musen eller trykke på. For å laste neste element, lager vi en ekstra elektron og en proton eller nøytron synlig og oppdaterer elementnavnet. Etter å ha klikket på det siste elementet, er alle partiklene skjult igjen slik at vi kan begynne igjen. De synlig variabel holder styr på antall atompartikler som for tiden er synlige, slik at vi kan vise eller gjemme dem tilsvarende.
Prøv å klikke eller trykke på følgende CodePen-demo for å se de ti første elementene i det periodiske tabellen.
Vi startet denne opplæringen med en kort introduksjon til Two.js-biblioteket og hvordan det kan brukes til å tegne former som rektangler, sirkler og ellipser. Deretter diskutert vi hvordan vi kan gruppere ulike objekter sammen for å manipulere dem alle samtidig. Vi brukte denne muligheten til å gruppere elementer for å oversette og rotere dem i synkronisering. Disse verktøyene kom sammen i vår animasjon av atomene av de ti første elementene i det periodiske bordet.
Som du ser, er det veldig enkelt å lage animert 2D-grafikk ved hjelp av Two.js. Fokuset på dette innlegget var å hjelpe deg med å komme i gang raskt, så vi bare dekket grunnleggende. Du bør imidlertid lese den offisielle dokumentasjonen for å lære mer om biblioteket!
