Share
Im vorherigen Particles.js-Tutorial wurden kurz die verschiedenen Funktionen der Bibliothek und der Einstieg in die Bibliothek kurz besprochen. In diesem Tutorial werde ich ausführlich auf alle Aspekte von Particles.js eingehen, die sich auf das physikalische Erscheinungsbild von Partikeln beziehen.
Als erstes beschäftigen wir uns mit der Anzahl und Dichte der Partikel. Die Dichte bestimmt die Anzahl der Partikel, die in einem bestimmten Bereich zusammengepackt werden. Es ist standardmäßig mit aktiviert value_area auf 800 gesetzt. Hier ist der JSON, mit dem Sie die Anzahl der Partikel steuern können:
"number": "value": 50, "density": "enable": true, "value_area": 500
Wenn du eingestellt hast aktivieren unter dichte zu falsch dann wird die Anzahl der angezeigten Partikel genau 50 sein. Verdoppelt den Wert von value_area wird die Anzahl der Partikel ungefähr halbieren.
Es gibt drei Möglichkeiten, die Farben der Partikel einzustellen. Sie können Farben im HEX-Format, RGB-Format oder HSL-Format einstellen. Aufgrund eines Fehlers in der Bibliothek funktionieren das RGB- und HSL-Format nur, wenn Sie den Standardfarbwert aus der Bibliothek entfernen.
Wenn Sie die Partikelfarbe zufällig einstellen möchten, können Sie dies mit dem Wert "random" tun. Um die Farbe zufällig aus einer Liste von Farben festzulegen, müssen Sie die Farben im HEX-Format als Array angeben. Hier ist der JSON, um Farben für Partikel festzulegen:
"color": "value": "#fff" // Weiß in HEX setzen (wir verwenden diese Version) "Wert": r: 255, g: 255, b: 255 // Weiß in RGB setzen " value ": h: 0, s: 100%, l: 100% // Weiß in HSL setzen" value ": [" # f00 "," # 0f0 "," # 00f "] // // Rot, Grün und blau zufällig "value": "zufällig" // Farben zufällig setzen
Die Opazitätseigenschaft gibt Ihnen viel Kontrolle. Sie können ihn auf einen exakten Wert einstellen oder zufällige Werte verwenden "zufällig" zu wahr. Nicht nur das, Sie können auch die Deckkraft von Partikeln animieren. Hier ist der JSON-Code für die Opacity-Eigenschaft:
"opacity": "value": 1, "random": true, // In unserem Fall "anim": "enable": true, "speed": 8, "opacity_min": 0.4, "sync ": falsch
Rahmen "synchronisieren" zu wahr animiert gleichzeitig die Deckkraft aller Teilchen. Verwenden Sie einen Wert von 0,4 für "opacity_min" stellt sicher, dass die Deckkraft während der Animation für Partikel nicht unter 0,4 fällt. Hier ist eine Demo mit Stars, die sich durch den Weltraum bewegen. Ändern Sie die Anzahl, Farbe oder Deckkraft der Partikel, um ihre Wirkung zu sehen.
Particles.js verfügt über fünf verschiedene Werte zum Erstellen von Grundformen. Eine einfache Form wie Kreis erzeugt ein kreisförmiges Teilchen, Dreieck erzeugt dreieckige Teilchen und Kante erzeugt Quadrate. Sie können den Wert verwenden Polygon ein erstellen nb_sides seitig Polygon, wo Sie den Wert angeben nb_sides. Um tatsächliche Sternformen zu erstellen, können Sie den Formtyp auf festlegen Star. Das Schlaganfall Der Parameter fügt eine Kontur einer bestimmten Farbe und Breite um alle Partikel hinzu. Der folgende JSON-Code erstellt Sechsecke.
"Form": "Typ": "Polygon", "Strich": "Breite": 4, "Farbe": "#fff", "Polygon": "Nb_sides": 6
Es ist auch möglich, Bilder anstelle von Grundformen anzuzeigen. Zuerst müssen Sie den Formtyp als angeben Bild. Danach können Sie die Bildquelle sowie die gewünschte Höhe und Breite einstellen. Es ist zu beachten, dass Breite und Höhe nicht die Größe der Bildpartikel bestimmen, sondern deren Seitenverhältnis. Hier einige JSON zum Erstellen von Partikeln mit Asteroidenbildern:
"shape": "type": "image", "image": "src": "img / football.png", // Bildpfad festlegen. "width": 1, // Breite und Höhe bestimmen nicht die Größe. "height": 1 // Sie entscheiden nur das Seitenverhältnis.
In der Bibliothek können Sie auch mehrere Formen miteinander mischen. Sie können beispielsweise entscheiden, Kreise, Quadrate und Sechsecke gleichzeitig zu erstellen. In diesem Fall müssen Sie lediglich ein Array mit all diesen Formen übergeben.
"Typ": ["Kreis", "Kante", "Polygon"]
Die Eigenschaft size hat alle Optionen der Eigenschaft für die Deckkraft. Sie können die Größe nach dem Zufallsprinzip festlegen und die Größe der einzelnen Partikel animieren. Sehen Sie sich den folgenden JSON-Code genau an.
"size": "value": 25, "random": true, "anim": "enable": true, "speed": 20, "size_min": 10, "sync": false
Wenn du eingestellt hast zufällig zu falsch, Alle Partikel haben die Größe 25. Wann? zufällig ist eingestellt auf wahr, Größe dient als Maximalgröße für Partikel. Rahmen Sync zu wahr Innerhalb der Animation wird die Größe aller Elemente gleichzeitig geändert. Sie sollten die Demo öffnen und verschiedene Werte für die Anzahl der Polygonseiten, Animationen und anderen Eigenschaften ausprobieren, um zu sehen, wie sie das Endergebnis beeinflussen.
Wenn die Partikel nahe genug sind, können Sie Verbindungslinien zwischen ihnen zeichnen, indem Sie die Option aktivieren line_linked Eigentum.
Diese Eigenschaft hat vier zusätzliche Werte. Das Entfernung Diese Eigenschaft gibt die maximale Entfernung an, bis zu der Linien gezeichnet werden. Sie können auch einstellen Farbe als HEX-String. Die Deckkraft der Linien variiert je nach Abstand zwischen den Partikeln. Der Wert, den Sie als angeben Opazität ist die Deckkraft von Linien, wenn die Teilchen wirklich nahe beieinander liegen. Endlich, Breite bestimmt, wie breit Ihre Zeilen sein werden. Hier ist das JSON-Snippet für die begleitende Demo.
"line_linked": "enable": true, "distance": 200, "color": "#fff", "opacity": 1, "width": 4
Sie können sehen, dass die Linien verschwinden, sobald der Abstand zwischen den Partikeln mehr als 200 px beträgt.
Ich habe versucht, alles abzudecken, was Sie wissen müssen, um Form, Größe, Farbe und fast jede andere physikalische Eigenschaft von Partikeln zu ändern. Die Beispiele in diesem Tutorial zeigen deutlich, wie einfach die Verwendung dieser Bibliothek ist. Wenn Sie jemals eine grundlegende Partikelbibliothek benötigen, sollten Sie Particles.js unbedingt ausprobieren.
Im nächsten Lernprogramm erfahren Sie, wie Sie die Bewegung von Partikeln und ihre Interaktion untereinander sowie mit Ihnen steuern können. Wenn Sie Fragen zu diesem Tutorial haben, hinterlassen Sie bitte einen Kommentar.
Accentsconagua