Share
Two.js un'API che semplifica la creazione di forme 2D con codice. Segui e imparerai come creare e animare forme da JavaScript.
Two.js è indipendente dal renderer, quindi puoi fare affidamento sulla stessa API per disegnare con Canvas, SVG o WebGL. La libreria ha molti metodi che possono essere usati per controllare come appaiono diverse forme sullo schermo o come sono animate.
La versione non compressa della libreria ha una dimensione di circa 128 KB, mentre la versione compressa è di 50 KB. Se si utilizza la versione più recente, è possibile ridurre ulteriormente le dimensioni della libreria utilizzando una build personalizzata.
È possibile scaricare la versione minified della libreria da GitHub o collegarsi direttamente alla versione ospitata da CDN. Una volta aggiunta la libreria alla tua pagina web, puoi iniziare a disegnare e animare diverse forme o oggetti.
Innanzitutto, devi dire a Two.js dell'elemento su cui vuoi disegnare e animare le tue forme. È possibile passare alcuni parametri al Due costruttore per sistemare le cose.
Imposta il tipo di renderer usando il genere proprietà. Puoi specificare un valore come svg, WebGL, tela, ecc genere è impostato per svg per impostazione predefinita. La larghezza e l'altezza dello spazio di disegno possono essere specificate usando larghezza e altezza parametri. È inoltre possibile impostare lo spazio del disegno sullo schermo completo disponibile utilizzando il pulsante a schermo intero parametro. quando a schermo intero è impostato su true, i valori di larghezza e altezza sarà ignorato.
Infine, puoi dire a Two.js di avviare automaticamente un'animazione con l'aiuto di Boolean avvio automatico parametro.
Dopo aver passato tutti i parametri desiderati al costruttore, puoi iniziare a disegnare linee, rettangoli, cerchi ed ellissi.
Puoi disegnare una linea usando two.makeLine (x1, y1, x2, y2). Qui, (x1, y1) sono le coordinate del primo punto finale, e (x2, y2) sono le coordinate del secondo punto finale. Questa funzione restituirà a Two.Line oggetto, che può essere memorizzato in una variabile per ulteriori manipolazioni in un secondo momento.
In modo simile, puoi disegnare rettangoli normali e arrotondati usando two.makeRectangle (x, y, width, height) e two.makeRoundedRectangle (x, y, larghezza, altezza, raggio) rispettivamente. Ricordatelo X e y determinare il centro del rettangolo, invece delle sue coordinate in alto a sinistra come molte altre librerie. Il larghezza e altezza i parametri determineranno la dimensione del rettangolo. Il raggio parametro viene utilizzato per specificare il valore del raggio per l'angolo arrotondato.
Puoi anche eseguire il rendering di cerchi ed ellissi su una pagina web utilizzando two.makeCircle (x, y, raggio) e two.makeEllipse (x, y, width, height) rispettivamente. Proprio come i rettangoli, il X e y i parametri specificano il centro del cerchio o dell'ellisse. Impostazione del larghezza e altezza allo stesso valore nel caso di un'ellisse lo renderà come un cerchio.
Un metodo utile in Two.js che userete frequentemente è two.makeGroup (oggetti). È possibile passare un elenco di oggetti diversi o passare una serie di oggetti, percorsi o gruppi come parametro di questo metodo. Restituirà anche a Two.Group oggetto.
Dopo aver creato un gruppo, puoi manipolare tutti i suoi figli contemporaneamente usando le proprietà che il gruppo mette a tua disposizione.
Il ictus e riempire le proprietà possono essere utilizzate per impostare il tratto e il colore di riempimento per tutti i bambini di un gruppo. Accetteranno tutte le forme valide in cui è possibile rappresentare un colore nei CSS. Ciò significa che sei libero di usare la notazione RGB, HSL o esadecimale. Puoi anche semplicemente usare il nome del colore, come arancia, rosso, o blu. Allo stesso modo, puoi impostare valori per tutte le altre proprietà come larghezza della linea, opacità, mitra, e berretto. È possibile rimuovere il riempimento e il tratto da tutti i bambini di un gruppo usando il noFill () e noStroke () metodi.
Puoi anche applicare altre trasformazioni fisiche come scala, rotazione, e traduzione. Queste trasformazioni verranno applicate a singoli oggetti. Aggiungere nuovi oggetti a un gruppo e rimuoverli è facile con metodi come Inserisci() e rimuovere().
Puoi definire sia i gradienti lineari che quelli radiali in Two.js. La definizione di una sfumatura non significa che sarà resa automaticamente sullo schermo, ma sarà disponibile per l'uso quando si imposta il riempire o ictus valori di vari oggetti.
Puoi definire un gradiente lineare usando two.makeLinearGradient (x1, y1, x2, y2, stops). I valori x1 e Y1 determinare le coordinate dell'inizio del gradiente. Allo stesso modo, i valori x2 e y2 determinare le coordinate della fine del gradiente. Il fermate parametro è un array di Two.Stop le istanze. Questi definiscono i colori di ciascuna parte dell'array e dove ogni colore passa alla successiva. Possono essere definiti usando nuovo Two.Stop (offset, colore, opacità), dove compensare determina il punto sul gradiente in cui quel particolare colore deve essere reso completamente. Il colore parametro determina il colore del gradiente nel punto particolare. È possibile utilizzare qualsiasi rappresentazione di colore CSS valida come valore. Finalmente, il opacità parametro determina l'opacità del colore. L'opacità è facoltativa e può avere qualsiasi valore compreso tra 0 e 1.
È possibile definire gradienti radiali in modo simile utilizzando two.makeRadialGradient (x, y, radius, stops, fx, fy). In questo caso, i valori X e y determinare il centro del gradiente. Il raggio parametro specifica quanto deve estendersi il gradiente. È anche possibile passare una serie di fermate a questo metodo per impostare la composizione dei colori dei gradienti. I parametri fx e fy sono opzionali e possono essere utilizzati per specificare la posizione focale del gradiente.
Scopri alcuni dei tipi di gradiente e il loro codice nel CodePen sottostante.
Ricorda che il X e y la posizione dei gradienti è rispetto all'origine della forma che stanno cercando di riempire. Ad esempio, un gradiente radiale che dovrebbe riempire una forma dal centro avrà sempre X e y impostato su zero.
Two.js consente inoltre di scrivere del testo nell'area di disegno e di aggiornarlo in seguito in base alle proprie esigenze. Ciò richiede l'uso del metodo two.makeText (message, x, y, styles). Potrebbe essere evidente dal nome dei parametri che Messaggio è il testo che vuoi scrivere. I parametri X e y sono le coordinate del punto che fungerà da centro per scrivere il testo. Il stili parametro è un oggetto che può essere utilizzato per impostare i valori di un ampio set di proprietà.
Puoi usare gli stili per impostare i valori di proprietà come il font famiglia, taglia, e allineamento. Puoi anche specificare il valore di proprietà come riempire, ictus, opacità, rotazione, scala, e traduzione.
Dopo aver appreso tutti questi metodi e proprietà, è il momento di applicarli a un progetto. In questo tutorial, ti mostrerò come possiamo usare Two.js per rendere i primi dieci elementi della tavola periodica con gli elettroni che ruotano attorno al nucleo. Il nucleo avrà anche un leggero movimento per migliorare l'aspetto visivo della nostra rappresentazione.
Iniziamo definendo alcune variabili e funzioni che verranno utilizzate in seguito.
Accentsconagua
var centerX = window.innerWidth / 2; var centerY = window.innerHeight / 2; var elem = document.getElementById ("atomi"); var elementNames = ["", "Idrogeno", "Elio", "Litio", "Berillio", "Boro", "Carbonio", "Azoto", "Ossigeno", "Fluoro", "Neon"]; var styles = alignment: "center", size: 36, family: "Lato"; var nucleusCount = 10; var nucleusArray = Array (); var electronCount = 10; var electronArray = Array (); function intRange (min, max) return Math.random () * (max - min) + min; Il codice precedente memorizza le coordinate del centro della nostra finestra nelle variabili centerX e centerY. Questi saranno usati in seguito per posizionare il nostro atomo al centro. Il elementNames array contiene i nomi dei primi dieci elementi della tavola periodica. L'indice di ciascun nome corrisponde al numero di elettroni e protoni di quell'elemento e inizia con una stringa vuota. Il stili oggetto contiene proprietà per lo styling dell'oggetto testo.
Abbiamo anche definito una funzione intRange () per ottenere un valore intero casuale all'interno degli estremi dati.
var two = new Two (fullscreen: true). appendTo (elem); var protonColor = two.makeRadialGradient (0, 0, 15, new Two.Stop (0, "red", 1), new Two.Stop (1, "black", 1)); var neutronColor = two.makeRadialGradient (0, 0, 15, new Two.Stop (0, "blue", 1), new Two.Stop (1, "black", 1)); per (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(); );
Questo crea un'istanza di Due e definisce due gradienti radiali. I gradienti radiali rosso / nero rappresenteranno i protoni ei gradienti blu / neri rappresenteranno i neutroni.
Abbiamo usato il intRange () funzione per posizionare tutti questi neutroni e protoni entro 20 pixel l'uno dall'altro. Il makeCircle () metodo imposta anche il raggio di questi protoni e neutroni a 10 pixel. Dopo di ciò, continuiamo a scorrere nucleusArray e riempire alternativamente ogni cerchio con un diverso gradiente.
per (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 ) );
Posizionare neutroni e protoni all'interno del nucleo era facile. Tuttavia, posizionando correttamente gli elettroni ad una distanza uniforme richiederà un po 'di matematica. Noi usiamo il shellRadius variabile per specificare la distanza dei diversi gusci di elettroni dal nucleo. Un intero cerchio copre un angolo pari a 2 radianti PI. Possiamo posizionare elettroni diversi in modo uniforme distribuendo i 2 radianti PI tra di loro allo stesso modo.
Il Math.cos () e Math.sin () le funzioni sono utilizzate per separare le componenti verticali e orizzontali del vettore di posizione di elettroni diversi in base alla loro angolazione.
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);
Questa parte del codice mette elettroni da diversi gusci e neutroni e protoni nei loro gruppi separati. Imposta anche i colori di riempimento per tutti gli elettroni in un'orbita specifica alla volta.
two .bind ("update", function (frameCount) groupElectronA.rotation + = 0.025 * Math.PI; groupElectronB.rotation + = 0.005 * Math.PI; groupNucleus.rotation - = 0.05;) .play (); var text = two.makeText ("", centerX, 100, styles); nucleusArray.forEach (function (nucleus, index) nucleus.opacity = 0;); electronArray.forEach (funzione (elettrone, indice) electron.opacity = 0;); Questa parte del codice imposta l'opacità di singoli elettroni e protoni a zero. Indica anche a Two.js di ruotare gli elettroni e i protoni a specifiche velocità.
visibile = 0; document.addEventListener ("clic", funzione (evento) if (visibile < 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); visibile = 0; text.value = elementNames [0]; ); La parte finale del codice ci consente di scorrere gli elementi facendo clic con il mouse o toccando. Per caricare l'elemento successivo, rendiamo visibile un altro elettrone e un altro protone o neutrone e aggiorna il nome dell'elemento. Dopo aver fatto clic sull'ultimo elemento, tutte le particelle sono nascoste nuovamente in modo da poter ricominciare da capo. Il visibile variabile tiene traccia del numero di particelle atomiche che sono attualmente visibili in modo che possiamo mostrarle o nasconderle di conseguenza.
Prova a fare clic o toccare nella seguente demo CodePen per vedere i primi dieci elementi della tavola periodica.
Abbiamo iniziato questo tutorial con una breve introduzione alla libreria Two.js e come può essere utilizzato per disegnare forme come rettangoli, cerchi ed ellissi. Dopo di ciò, abbiamo discusso su come possiamo raggruppare diversi oggetti per manipolarli tutti contemporaneamente. Abbiamo usato questa capacità per raggruppare elementi da tradurre e ruotarli in sincronizzazione. Questi strumenti si sono tutti riuniti nella nostra animazione degli atomi dei primi dieci elementi nella tavola periodica.
Come puoi vedere, la creazione di grafica 2D animata è molto semplice con Two.js. L'obiettivo di questo post era di aiutarti a iniziare rapidamente, quindi abbiamo coperto solo le nozioni di base. Tuttavia, dovresti leggere la documentazione ufficiale per saperne di più sulla libreria!
