Share
Tutorialul Particles.js anterior a discutat pe scurt diferitele caracteristici pe care biblioteca le oferă și cum să începeți cu biblioteca. În acest tutorial voi detalia toate aspectele Particles.js care se ocupă de aspectul fizic al particulelor.
Primul lucru cu care ne vom ocupa este numărul și densitatea particulelor. Densitatea determină numărul de particule care vor fi împachetate împreună într-o anumită zonă. Este activată în mod implicit cu value_area setați la 800. Iată JSON-ul care vă permite să controlați numărul de particule:
"număr": "valoare": 50, "densitate": "enable": true, "value_area": 500
Dacă ați setat permite sub densitate la fals atunci numărul de particule afișate va fi exact 50. Dublați valoarea value_area va reduce numărul de particule aproximativ la jumătate.
Există trei moduri de a seta culorile particulelor. Puteți seta culori în format HEX, format RGB sau HSL. Din cauza unei erori în bibliotecă, formatul RGB și HSL funcționează numai atunci când eliminați valoarea implicită a culorii din bibliotecă.
Dacă doriți să setați aleatoriu culoarea particulelor, puteți face acest lucru cu valoarea "aleatorie". În cele din urmă, pentru a seta culoarea aleatoriu dintr-o listă de culori, va trebui să furnizați culorile în format HEX ca și matrice. Aici este JSON pentru a seta culori pentru particule:
"culoare": "value": "#fff" // set alb în HEX (folosim această versiune) "value": r: 255, g: 255, b: valoare ": h: 0, s: 100%, l: 100% // set alb în valoarea" HSL ": [" # f00 "," # 0f0 "," # 00f " și albastru aleatoriu "value": "random" // setarea culorilor aleatoriu
Proprietatea de opacitate vă oferă mult control. Puteți să o setați la o valoare exactă sau să utilizați valorile aleatoare prin setare "întâmplător" la Adevărat. Nu numai asta, dar și tu poți anima opacitatea particulelor. Iată codul JSON pentru proprietatea de opacitate:
"opacitate": "valoare": 1, "aleatoriu": true, // setat la false în cazul nostru "anim": "enable": true, "speed": 8, "opacity_min" ": fals
reglaj „Sincronizare“ la Adevărat va anima opacitatea tuturor particulelor în același timp. Folosind o valoare de 0,4 pentru "Opacity_min" asigurați-vă că opacitatea nu trece niciodată sub 0,4 pentru orice particulă în timpul animației. Aici este un demo cu stele care se deplasează în spațiu. Încercați să modificați numărul, culoarea sau opacitatea particulelor pentru a le vedea efectul.
Particles.js are cinci valori diferite pentru a crea forme de bază. O formă simplă cerc generează o particulă circulară, triunghi generează particule triunghiulare și margine generează pătrate. Puteți utiliza valoarea poligon pentru a crea un nb_sides verso poligon, în cazul în care vă oferi valoarea nb_sides. Pentru a crea forme reale de stele, puteți seta tipul formei la stea. accident vascular cerebral parametrul adaugă o contur a unei anumite culori și lățime în jurul tuturor particulelor. Codul JSON de mai jos va crea hexagoane.
"formă": "tip": "poligon", "cursă": "lățime": 4, "culoare": "#fff", "poligon": "nb_sides": 6
De asemenea, este posibilă afișarea imaginilor în locul formelor de bază. În primul rând, va trebui să specificați tipul de formă ca imagine. După aceasta, puteți seta sursa de imagine și înălțimea și lățimea dorite. Merită să ținem cont de faptul că lățimea și înălțimea nu vor determina dimensiunea particulelor imaginii, ci dimensiunea lor. Iată câteva JSON pentru a crea particule cu imagini asteroid:
"formă": "tip": "imagine", "imagine": "src": "img / football.png", // setați calea imaginii. "width": 1, // Lățimea și înălțimea nu determină mărimea. "înălțime": 1 // Ei decid doar raportul de aspect.
De asemenea, biblioteca vă permite să amestecați mai multe forme împreună. De exemplu, puteți decide să creați simultan cercuri, pătrate și hexagoane. În acest caz, tot ce trebuie să faceți este să treceți o matrice cu toate aceste forme.
"tip": ["cerc", "margine", "poligon"]
Proprietatea de mărime are toate opțiunile proprietății de opacitate. Puteți seta dimensiunea la întâmplare, precum și anima dimensiunea particulelor individuale. Priviți cu atenție următorul cod JSON.
"dimensiune": "valoare": 25, "aleatoriu": adevărat, "anim": "activ": adevărat, "viteză": 20, "size_min": 10, "sincronizare";
Dacă ați setat întâmplător la fals, toate particulele vor avea dimensiunea 25. Când întâmplător este setat sa Adevărat, dimensiunea servește drept limită maximă pentru particule. reglaj sincronizați la Adevărat animația interioară va schimba dimensiunea tuturor elementelor simultan. Ar trebui să deschideți demo-ul și să încercați diferite valori pentru numărul laturilor de poligon, animație și alte proprietăți pentru a vedea cum afectează rezultatul final.
Atunci când particulele sunt destul de aproape, puteți trasa linii de legătură între ele, permițând line_linked proprietate.
Această proprietate are patru valori suplimentare. distanţă proprietatea specifică distanța maximă până la care vor fi extrase liniile. De asemenea, puteți seta culoare ca șir HEX. Opacitatea liniilor variază în funcție de distanța dintre particule. Valoarea pe care o specificați ca opacitate este opacitatea liniilor când particulele sunt într-adevăr apropiate. In cele din urma, lăţime determină cât de largi vor fi liniile tale. Iată fragmentul JSON pentru demo-ul însoțitor.
"line_linked": "enable": true, "distance": 200, "color": "#fff", "opacitate": 1,
Puteți vedea că liniile dispar imediat ce distanța dintre particule devine mai mare de 200 de px.
Am încercat să acoperez tot ce trebuie să știți pentru a schimba forma, dimensiunea, culoarea și aproape orice altă proprietate fizică a particulelor. Exemplele din acest tutorial ilustrează în mod clar cât de ușor este utilizarea acestei biblioteci. Dacă aveți vreodată nevoie de o bibliotecă de particule de bază, ar trebui să încercați cu certitudine Particles.js.
Următorul tutorial vă va învăța cum să controlați mișcarea particulelor și interacțiunea dintre ele, precum și cu voi. Dacă aveți întrebări legate de acest tutorial, vă rugăm să lăsați un comentariu.
Accentsconagua