Share
Il precedente tutorial di Particles.js ha brevemente discusso le varie funzionalità offerte dalla libreria e come iniziare con la libreria. In questo tutorial tratterò in dettaglio tutti gli aspetti di Particles.js che riguardano l'aspetto fisico delle particelle.
La prima cosa di cui ci occuperemo è il numero e la densità delle particelle. La densità determina il numero di particelle che verranno imballate insieme in una determinata area. È abilitato di default con il value_area impostato su 800. Ecco il JSON che consente di controllare il numero di particelle:
"number": "value": 50, "density": "enable": true, "value_area": 500
Se si imposta abilitare sotto la densità a falso quindi il numero di particelle visualizzate sarà esattamente 50. Raddoppio del valore di value_area ridurrà il numero di particelle circa della metà.
Esistono tre modi per impostare i colori delle particelle. È possibile impostare i colori in formato HEX, RGB o HSL. A causa di un bug nella libreria, il formato RGB e HSL funziona solo quando si rimuove il valore di colore predefinito dalla libreria.
Se vuoi impostare in modo casuale il colore delle particelle, puoi farlo con il valore "random". Infine, per impostare il colore in modo casuale da un elenco di colori, dovrai fornire i colori in formato HEX come array. Ecco il JSON per impostare i colori per le particelle:
"color": "value": "#fff" // imposta il bianco in HEX (stiamo usando questa versione) "value": r: 255, g: 255, b: 255 // imposta il bianco in RGB " value ": h: 0, s: 100%, l: 100% // imposta il bianco in HSL" value ": [" # f00 "," # 0f0 "," # 00f "] // imposta rosso, verde e blu a caso "valore": "casuale" // imposta colori a caso
La proprietà di opacità ti dà un sacco di controllo. Puoi impostarlo su un valore esatto o usare valori casuali impostando "casuale" a vero. Non solo, ma puoi anche animare l'opacità delle particelle. Ecco il codice JSON per la proprietà di opacità:
"opacità": "valore": 1, "casuale": vero, // impostato su falso nel nostro caso "anim": "enable": true, "speed": 8, "opacity_min": 0.4, "sync ": falso
Ambientazione "Sync" a vero animerà l'opacità di tutte le particelle allo stesso tempo. Utilizzando un valore di 0,4 per "Opacity_min" fa in modo che l'opacità non vada mai al di sotto di 0,4 per nessuna particella durante l'animazione. Ecco una demo con le stelle che si muovono nello spazio. Prova a cambiare il numero, il colore o l'opacità delle particelle per vedere il loro effetto.
Particles.js ha cinque valori diversi per creare forme base. Una forma semplice come cerchio genera una particella circolare, triangolo genera particelle triangolari, e bordo genera quadrati. Puoi usare il valore poligono creare un nb_sides poligono laterale, in cui fornisci il valore nb_sides. Per creare forme stellari reali, puoi impostare il tipo di forma su stella. Il ictus parametro aggiunge un contorno di un dato colore e larghezza attorno a tutte le particelle. Il codice JSON qui sotto creerà esagoni.
"shape": "type": "poligono", "tratto": "larghezza": 4, "colore": "#fff", "poligono": "nb_sides": 6
È anche possibile visualizzare immagini invece di forme base. Innanzitutto, dovrai specificare il tipo di forma come Immagine. Dopodiché, puoi impostare la sorgente dell'immagine e l'altezza e la larghezza desiderate. Vale la pena ricordare che la larghezza e l'altezza non determinano la dimensione delle particelle d'immagine ma il loro rapporto d'aspetto. Ecco alcuni JSON per creare particelle con immagini di asteroidi:
"shape": "type": "image", "image": "src": "img / football.png", // Imposta il percorso dell'immagine. "larghezza": 1, // Larghezza e altezza non decidono le dimensioni. "height": 1 // Decidono solo le proporzioni.
La libreria consente anche di mescolare più forme insieme. Ad esempio, puoi decidere di creare cerchi, quadrati ed esagoni contemporaneamente. In tal caso, tutto ciò che devi fare è passare un array con tutte queste forme.
"tipo": ["cerchio", "bordo", "poligono"]
La proprietà size ha tutte le opzioni della proprietà opacity. È possibile impostare la dimensione in ordine casuale e animare la dimensione delle singole particelle. Osserva attentamente il seguente codice JSON.
"size": "value": 25, "random": true, "anim": "enable": true, "speed": 20, "size_min": 10, "sync": false
Se si imposta casuale a falso, tutte le particelle avranno la dimensione 25. Quando casuale è impostato per vero, la dimensione serve come limite massimo per le particelle. Ambientazione sincronizzare a vero l'animazione interna cambierà la dimensione di tutti gli elementi contemporaneamente. Dovresti aprire la demo e provare diversi valori per il numero di lati del poligono, animazione e altre proprietà per vedere come influenzano il risultato finale.
Quando le particelle sono abbastanza vicine, è possibile tracciare linee di collegamento tra loro attivando il line_linked proprietà.
Questa proprietà ha quattro valori aggiuntivi. Il distanza proprietà specifica la distanza massima fino a cui verranno disegnate le linee. Puoi anche impostare il colore come una stringa HEX. L'opacità delle linee varia in base alla distanza tra le particelle. Il valore specificato come opacità è l'opacità delle linee quando le particelle sono veramente vicine. Finalmente, larghezza determina quanto saranno ampie le tue linee. Ecco lo snippet JSON per la demo di accompagnamento.
"line_linked": "enable": true, "distance": 200, "color": "#fff", "opacity": 1, "width": 4
Puoi vedere che le linee scompaiono non appena la distanza tra le particelle diventa più di 200 px.
Ho cercato di coprire tutto ciò che è necessario sapere per cambiare forma, dimensione, colore e quasi ogni altra proprietà fisica delle particelle. Gli esempi in questo tutorial illustrano chiaramente quanto sia facile usare questa libreria. Se hai mai bisogno di una libreria di particelle di base, dovresti provare a provare a Particles.js.
Il prossimo tutorial ti insegnerà come controllare il movimento delle particelle e la loro interazione tra loro e con te. Se avete domande relative a questo tutorial, si prega di lasciare un commento.
Accentsconagua