Share
Nell'ultimo tutorial di Particles.js, hai imparato come creare particelle con forme e dimensioni desiderati. Mentre è stato bello vedere tutte le particelle muoversi, c'è ancora spazio per miglioramenti. Al momento, non c'è interazione tra le varie particelle. Si passano l'un l'altro come se le altre particelle non esistessero.
Questo tutorial ti insegnerà come spostare le particelle nel modo desiderato, controllandone la direzione, la velocità e molto altro. Imparerai anche a conoscere varie modalità di interazione ed eventi.
Non tutte le particelle in ogni sistema di particelle si muovono in direzioni casuali. Anche quando lo fanno, ci sono altre forze in azione. Ad esempio, possono accelerare avvicinandosi l'un l'altro o riprendersi dopo le collisioni. Tutte queste opzioni possono essere controllate da varie proprietà disponibili sotto mossa.
Se non vuoi che le particelle si muovano, puoi farlo impostando abilitare a falso. È possibile specificare la velocità delle particelle utilizzando il parametro velocità. Per spostare ogni particella con una certa velocità casuale, impostare casuale a vero. D'altra parte, per spostarli in direzioni casuali, specificare direzione come nessuna.
Prima o poi, almeno una delle particelle si sposterà al confine del nostro sistema. Se quella particella rimbalza o esce da un'altra direzione viene decisa dal valore di out_mode parametro. Quando è impostato su su, le particelle si muovono fuori dalla tela. Quando è impostato su rimbalzo, le particelle rimbalzano dopo aver colpito il confine.
Sembra un po 'innaturale quando le particelle passano attraverso l'altra senza alcun cambiamento di velocità. Per cambiare la velocità delle particelle ad ogni collisione, puoi impostare rimbalzo a vero. È interessante notare che questo funzionerà solo se line_linked o il attrazione la proprietà è abilitata. Le particelle invertiranno la loro direzione ogni volta che entrano in collisione, anche se la collisione non è frontale.
Infine, vorrei discutere di attrazione. Una volta attivata l'attrazione, le particelle cambieranno la loro velocità ogni volta che si trovano nelle immediate vicinanze di altre particelle. La modifica può essere positiva o negativa in base al valore di altri parametri. L'attrazione in ciascuna direzione è inversamente proporzionale al valore dei rispettivi parametri, rotateX e RotateY. I valori predefiniti sono molto alti per osservare qualche attrazione notevole. D'altra parte, se rendi i loro valori troppo bassi, le particelle guadagneranno velocità molto alte dopo un po 'di tempo.
Il JSON responsabile del movimento delle particelle sopra è:
"move": "enable": true, "speed": 20, "random": true, "direction": "none", "bounce": true, "out_mode": "bounce", "attract": "enable": true, "rotateX": 10, "rotateY": 10
Dovresti tenere a mente che quando si imposta dritto a vero e direzione a nessuna allo stesso tempo, le particelle non si muoveranno affatto.
Fin qui tutto bene, ma ti starai chiedendo se le particelle possono anche interagire con l'utente, e se possono, come potrebbero interagire.
Per rispondere alla tua prima domanda, le particelle possono interagire con l'utente. Particles.js può rispondere a tre eventi: librarsi, clic, e ridimensionare. Tuttavia, per prima cosa è necessario sapere che gli eventi possono essere rilevati sulla tela o sulla finestra stessa impostando il valore di detect_on parametro. Ora tutti questi eventi verranno attivati ogni volta che si passa con il mouse, si fa clic o si ridimensiona la tela / finestra.
Quando si imposta ridimensionare a vero, le particelle si adattano nello spazio rimanente senza alcuna distorsione. quando ridimensionare è impostato per falso, le particelle cambieranno la loro forma per adattarsi a qualsiasi cambiamento nelle dimensioni della tela.
"detect_on": "canvas", "events": "onhover": "enable": true, "mode": "repulse", "onclick": "enable": true, "mode": "push "," ridimensiona ": vero
Probabilmente ti starai chiedendo cosa modalità parametro nello snippet di codice sopra. Questo parametro definisce il modo in cui le particelle interagirebbero con l'utente. La libreria ha definito cinque modalità di interazione. Loro sono afferrare, bolla, respingere, Spingere, e rimuovere.
Il afferrare la modalità crea linee di collegamento tra il punto di hover o clic e le particelle vicine entro una distanza specifica impostata dall'utente. Questa modalità funziona solo con l'evento di passaggio del mouse. Il JSON di seguito disegna una linea con l'opacità 1 per connettere tutte le particelle entro 800 px.
"grab": "distance": 800, "line_linked": "opacity": 1
Il bolla la modalità cambia la dimensione e l'opacità di tutte le particelle che si trovano all'interno di una distanza specifica per una durata che si decide. Il respingere la modalità fa allontanare la particella dalla posizione del clic. Entrambe queste modalità possono essere aggiunte a entrambi librarsi o clic. La durata è applicabile solo agli eventi click in entrambi i casi.
"bubble": "distance": 600, "size": 60, "duration": 0.1, "opacity": 1, "repulse": "distance": 500, "duration": 0.5
Dovresti provare a cambiare vari parametri per rendere la demo ancora migliore.
Il Spingere la modalità aggiunge un certo numero di particelle su ciascun clic del mouse. Le particelle verranno aggiunte nella posizione del clic. Allo stesso modo, il rimuovere la modalità rimuove le particelle dalla tela. Le particelle da rimuovere vengono decise casualmente.
"push": "particles_nb": 3, "rimuovi": "particles_nb": 1
I tre tutorial di questa serie hanno riguardato tutto ciò che Particles.js ha da offrire. Ho anche menzionato alcune cose ogni tanto in modo da non dover grattarsi la testa più tardi su problemi come particelle che non si rimbalzano, ecc..
Se hai bisogno di sapere di più su tutti i parametri che abbiamo discusso, ti preghiamo di consultare la documentazione di questa libreria. Inoltre, se ti blocchi a un certo punto mentre usi la libreria o qualcosa non si comporta come dovrebbe, vorrei suggerirti di leggere il codice sorgente per vedere cosa succede sotto la cappa.
Accentsconagua