Partikel.js: Kontrollpartikelanzahl und -form

Die vorherigen Partikel.JS -Tutorial behandelten kurz die verschiedenen Funktionen der Bibliothek und wie man damit anfängt. Dieses Tutorial bietet eine detaillierte Einführung in alle Aspekte im Zusammenhang mit dem physischen Erscheinungsbild von Partikeln in Partikeln.

Partikelnummer, Farbe und Deckkraft

Zunächst werden wir uns mit der Anzahl und Dichte von Partikeln befassen. Die Dichte bestimmt die Anzahl der Partikel, die sich in einer bestimmten Region versammeln. Es ist standardmäßig aktiviert und value_area wird auf 800 gesetzt. Mit dem folgenden JSON -Code können Sie die Anzahl der Partikel steuern:

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

Wenn Sie enable auf false value_area festlegen, beträgt die Anzahl der angezeigten Partikel genau 50. Verdoppeln Sie den Wert von

, verringert die Anzahl der Partikel um etwa die Hälfte.

Es gibt drei Möglichkeiten, die Farbe der Partikel festzulegen. Sie können die Farbe mit Hexadezimalformat, RGB -Format oder HSL -Format einstellen. Aufgrund eines Fehlers in der Bibliothek sind die RGB- und HSL -Formate nur dann gültig, wenn der Standardfarbwert aus der Bibliothek entfernt wird.

Wenn Sie die Partikelfarbe zufällig festlegen möchten, können Sie den Wert "zufällig" verwenden. Um die Farbe zufällig aus der Farbliste zu setzen, müssen Sie die Farbe im hexadezimalen Format als Array bereitstellen. Das Folgende ist der JSON -Code zum Festlegen der Partikelfarbe:

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

"random" Opacity -Attribut gibt Ihnen viel Kontrolle. Sie können es auf einen genauen Wert einstellen oder einen Zufallswert verwenden, indem Sie true auf

festlegen. Darüber hinaus können Sie auch die Deckkraft von Partikeln einstellen. Hier ist der JSON -Code für Opazitätseigenschaften:

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

"sync" Einstellung true auf "opacity_min" setzt gleichzeitig Opazitätsanimationen für alle Partikel. Verwenden Sie einen Wert von 0,4 als

, um sicherzustellen, dass die Opazität von Partikeln während des Animationsprozesses nicht unter 0,4 fällt. Dies ist eine Demonstration von Sternen, die sich durch den Raum bewegen. Versuchen Sie, die Anzahl, Farbe oder Deckkraft von Partikeln zu ändern, um zu sehen, wie sie funktionieren.

Form und Größe

circle Partikel.js hat fünf verschiedene Werte, um grundlegende Formen zu erstellen. Eine einfache Form wie triangle erzeugt ein kreisförmiges Partikel, edge erzeugt ein Dreieckspartikel und polygon wird ein Quadrat erzeugen. Sie können den Wert nb_sides verwenden, um ein Polygon mit nb_sides Kante zu erstellen, und Sie müssen einen Wert von star bereitstellen. Um einen tatsächlichen Stern zu erstellen, können Sie den Formtyp auf stroke festlegen. Der Parameter

fügt einen Umriss der angegebenen Farbe und Breite um alle Partikel hinzu. Der folgende JSON -Code erstellt das Sechseck.

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

kann auch Bilder anstelle von grundlegenden Formen anzeigen. Zunächst müssen Sie den Formyp als image angeben. Danach können Sie die Bildquelle und ihre gewünschte Höhe und Breite festlegen. Es ist sich zu erinnern, dass Breite und Höhe nicht die Größe der Bildpartikel bestimmen, sondern ihr Seitenverhältnis. Hier sind einige JSON -Codes, die Fußballbilder verwenden, um Partikel zu erstellen:

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

Mit dieser Bibliothek können Sie auch mehrere Formen mischen. Zum Beispiel können Sie sich entscheiden, gleichzeitig Kreise, Quadrate und Sechsecke zu erstellen. In diesem Fall passieren Sie nur ein Array, das alle diese Formen enthält.

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

Die Eigenschaft

Größe verfügt über alle Optionen für die Opacity -Eigenschaft. Sie können die Größe zufällig festlegen und die Animationsgröße eines einzelnen Teilchens festlegen. Schauen Sie sich den folgenden JSON -Code sorgfältig an.

<code>"shape": {<br>  "type": "polygon",<br>  "stroke": {<br>     "width": 4,<br>     "color": "#fff"<br>  },<br>  "polygon": {<br>     "nb_sides": 6<br>  }<br>}<br></code>

Wenn Sie random auf false festlegen, haben alle Partikel eine Größe von 25. Wenn random auf true eingestellt ist, wirkt die Größe als maximale Größengrenze für das Partikel. Das Einstellen von sync auf true in der Animation ändert die Größe aller Elemente gleichzeitig. Sie sollten die Demo öffnen und verschiedene Werte für die Anzahl der Polygonkanten, Animationen und andere Eigenschaften ausprobieren, um zu sehen, wie sie sich auf das Endergebnis auswirken.

verbundene Partikel

Wenn Partikel nahe genug sind, können Sie die Verbindungslinien zwischen ihnen zeichnen, indem Sie die Eigenschaft line_linked aktivieren.

Diese Eigenschaft hat vier zusätzliche Werte. Die Eigenschaft distance gibt den maximalen Abstand an, in dem die Linie gezogen wird. Sie können auch color auf eine hexadezimale Zeichenfolge setzen. Die Opazität der Linien variiert je nach Abstand zwischen den Partikeln. Der Wert, den Sie als opacity angeben, ist die Deckkraft der Linie, wenn das Partikel sehr nahe ist. Schließlich bestimmt width die Breite der Linie. Das Folgende ist ein JSON -Code -Snippet für die begleitende Demonstration.

<code>"shape": {<br>  "type": "image",<br>  "image": {<br>     "src": "img/football.png", // 设置图像路径。<br>     "width": 1,   // 宽度和高度不决定大小。<br>     "height": 1   // 它们只决定纵横比。<br>  }<br>}<br></code>

Sie können sehen, dass die Linien, sobald der Abstand zwischen den Partikeln 200 Pixel übersteigt, verschwinden.

Zusammenfassung

Ich habe mein Bestes ausprobiert, um alles abzudecken, was Sie über die Form, Größe, Farbe der Partikel und fast jede andere physikalische Eigenschaft wissen müssen. Die Beispiele in diesem Tutorial veranschaulichen deutlich, wie einfach es ist, diese Bibliothek zu verwenden. Wenn Sie eine grundlegende Partikelbibliothek benötigen, sollten Sie auf jeden Fall Partikel ausprobieren.js.

Im nächsten Tutorial lehrt Sie, wie Sie die Bewegung von Partikeln und ihre Wechselwirkungen miteinander und Ihren Wechselwirkungen kontrollieren können.

Dieser Artikel wurde aktualisiert und enthält Beiträge von Kingsley Ubah. Kingsley ist begeistert davon, Inhalte zu erstellen, die die Leser erziehen und inspirieren. Zu den Hobbys gehören Lesen, Fußball und Radfahren.

Das obige ist der detaillierte Inhalt vonPartikel.js: Kontrollpartikelanzahl und -form. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!