Share
În ultimul tutorial Particles.js, ați învățat cum să creați particule cu forme și dimensiuni pe care le-ați dorit. Deși sa simțit bine să vedem că toate particulele se mișcă, există încă loc pentru îmbunătățire. În prezent, nu există nicio interacțiune între diferite particule. Pur și simplu trec prin ele ca și când celelalte particule nu există.
Acest tutorial vă va învăța cum să mutați particulele în modul dorit, controlând direcția, viteza și multe altele. De asemenea, veți afla despre diferite moduri și evenimente de interacțiune.
Nu toate particulele din fiecare sistem de particule se mișcă în direcții aleatorii. Chiar și atunci când o fac, există și alte forțe în acțiune. De exemplu, acestea pot accelera atunci când se apropie unul de celălalt sau se repetă după coliziuni. Toate aceste opțiuni pot fi controlate de diferitele proprietăți disponibile sub mișcare.
Dacă nu doriți ca particulele să se miște deloc, puteți face acest lucru prin setare permite la fals. Puteți specifica viteza particulelor utilizând parametrul viteză. Pentru a muta fiecare particulă cu o anumită viteză aleatorie, setați întâmplător la Adevărat. Pe de altă parte, pentru a le muta în direcții aleatorii, specificați direcţie la fel de nici unul.
Mai devreme sau mai târziu, cel puțin una dintre particule se va muta la granița sistemului nostru. Indiferent dacă această particulă se învârte înapoi sau iese dintr - o altă direcție, este decisă de valoarea lui out_mode parametru. Când este setat afară, particulele se mișcă din panza. Când este setat sări, particulele sări înapoi după ce au lovit granița.
Pare un pic nenatural când particulele trec prin ele fără nici o schimbare a vitezei. Pentru a schimba viteza particulelor la fiecare coliziune, puteți seta sări la Adevărat. Interesant, acest lucru va funcționa numai dacă fie line_linked sau atracţie proprietatea este activată. Particulele își vor inversa direcția de fiecare dată când se ciocnesc, chiar dacă coliziunea nu este capabilă.
În cele din urmă, aș vrea să discutăm despre atracție. Odată ce permiteți atragerea, particulele își vor schimba viteza ori de câte ori se află în imediata apropiere a altor particule. Schimbarea poate fi pozitivă sau negativă în funcție de valoarea altor parametri. Atracția în fiecare direcție este invers proporțională cu valoarea parametrilor respectivi, rotateX și rotateY. Valorile implicite sunt foarte mari pentru a observa o anumită atracție vizibilă. Pe de altă parte, dacă faceți valori prea mici, particulele vor câștiga viteze foarte mari după ceva timp.
JSON responsabil pentru mișcarea particulelor de mai sus este:
"mișcare": "permite": adevărat, "viteză": 20, "aleatoriu": true, "direcție" "enable": true, "rotateX": 10, "rotateY": 10
Ar trebui să țineți minte că atunci când ați stabilit drept la Adevărat și direcţie la nici unul în același timp, particulele nu se vor mișca deloc.
Până acum, atât de bine, dar s-ar putea să te întrebi dacă particulele pot interacționa, de asemenea, cu utilizatorul, și dacă pot, cum ar interacționa.
Pentru a răspunde la prima întrebare, particulele pot interacționa cu utilizatorul. Particles.js poate răspunde la trei evenimente: planare, clic, și redimensiona. Cu toate acestea, mai întâi ar trebui să știți că evenimentele pot fi detectate pe pânză sau pe fereastra însăși prin stabilirea valorii detect_on parametru. Toate aceste evenimente vor fi declanșate ori de câte ori plasați mouse-ul, faceți clic pe sau redimensionați panza / fereastra.
Când ați setat redimensiona la Adevărat, particulele se ajustează în spațiul rămas fără nici o distorsiune. Cand redimensiona este setat sa fals, particulele își vor schimba forma pentru a se adapta oricărei modificări în dimensiunea pânzei.
"detectare": "canvas", "evenimente": "onhover": "permite": true, "mode": "repulse" "onclick" "," redimensionare ": true
Probabil vă întrebați ce mod parametru face în fragmentul de cod de mai sus. Acest parametru definește modul în care particulele ar interacționa cu utilizatorul. Biblioteca a definit cinci moduri de interacțiune. Sunt apuca, balon, respinge, Apăsați, și elimina.
apuca Modul creează linii de legătură între punctul dvs. de hover sau clic și particulele din apropiere într-o anumită distanță pe care ați stabilit-o. Acest mod funcționează numai cu evenimentul de hover. JSON-ul de mai jos trage o linie cu opacitatea 1 pentru a conecta toate particulele în interval de 800 px.
"apuca": "distance": 800, "line_linked": "opacity": 1
balon modul modifică dimensiunea și opacitatea tuturor particulelor care se află într-o anumită distanță pentru o durată pe care o decideți. respinge Modul face ca particula să se îndepărteze de la locul clicului. Ambele moduri pot fi adăugate la oricare dintre acestea planare sau clic. Durata se aplică numai în cazul evenimentelor de clic în ambele cazuri.
"balon": "distanța": 600, "dimensiunea": 60, "durata": 0,1, "opacitatea": 1, repulse:
Ar trebui să încercați să modificați diferiți parametri pentru a face demo-ul chiar mai bine.
Apăsați Modul adaugă un anumit număr de particule pe fiecare clic al mouse-ului. Particulele vor fi adăugate la locația clicului. În mod similar, elimina modul elimină particulele din panza. Particulele care urmează a fi eliminate sunt decise aleatoriu.
"împingeți": "particles_nb": 3, "eliminați": "particles_nb": 1
Cele trei tutoriale din această serie au acoperit tot ceea ce Particles.js are de oferit. Am mai mentionat si cateva lucruri din cand in cand, astfel incat sa nu mai trebuie sa te zgarieti mai tarziu peste probleme cum ar fi particulele care nu se sustrage reciproc, etc.
Dacă trebuie să știți mai multe despre toți parametrii pe care le-am discutat, vă rugăm să citiți documentația acestei biblioteci. Mai mult, dacă rămâneți blocat într-un anumit punct în timp ce utilizați biblioteca sau ceva nu se comportă așa cum ar trebui, aș dori să vă sugerez să citiți codul sursă pentru a vedea ce se petrece sub capota.
Accentsconagua