Partikel.js: Bewegung und Wechselwirkung

In diesem Tutorial tauchen wir in Partikel.js ein und lernen, wie man Partikelbewegung, Interaktionsmuster und Ereignisse steuert. Im vorherigen Tutorial haben wir gelernt, wie man Partikel unterschiedlicher Formen und Größen erzeugt. Es gibt jedoch einen Mangel an Wechselwirkung zwischen den Partikeln, und sie gehen durcheinander, als ob es keine anderen Partikel gibt. Dieses Tutorial wird dieses Manko ausgleichen.

Kontrollpartikelbewegung

Nicht alle Partikel in einem Partikelsystem bewegen sich in eine zufällige Richtung. Auch für zufällige Bewegungen gibt es andere Kräfte. Zum Beispiel können Partikel beschleunigen, wenn sie sich einander nähern oder nach einer Kollision abprallen. Alle diese Optionen können durch verschiedene Parameter unter dem Attribut move gesteuert werden.

Wenn Sie nicht möchten, dass sich die Partikel bewegen, können Sie enable auf false festlegen. Die Geschwindigkeit der Partikel kann unter Verwendung des Parameters speed angegeben werden. Setzen Sie random auf true, damit sich jedes Partikel mit einer Zufallsgeschwindigkeit bewegen lässt. Geben Sie auf der anderen Seite direction als none an, damit sie in eine zufällige Richtung bewegen.

Partikel bewegen sich schließlich zur Systemgrenze. out_mode Parameter bestimmen, ob sich das Partikel abprallt oder aus einer anderen Richtung erscheint. Wenn die Partikel auf out eingestellt sind, werden die Partikel nach dem Schlagen der Grenze aus der Leinwand herausgezogen. bounce

Es scheint unnatürlich, dass die Partikel durcheinander gehen, während die Geschwindigkeit unverändert bleibt. Um die Partikelgeschwindigkeit bei jeder Kollision zu ändern, setzen Sie

auf bounce. Interessanterweise ist diese Einstellung nur gültig, wenn die Eigenschaften true oder line_linked aktiviert sind. Jedes Mal, wenn ein Partikel kollidiert, kehrt es seine Richtung um, auch wenn es sich nicht um eine Frontalkollision handelt. attraction

Diskutieren wir schließlich die Attraktivität. Wenn die Attraktivität aktiviert ist, verändert das Partikel seine Geschwindigkeit, wenn andere Partikel in der Nähe existieren. Die Änderung kann je nach Wert anderer Parameter positiv oder negativ sein. Die Anziehungskraft jeder Richtung ist umgekehrt proportional zu den Werten der jeweiligen Parameter

und rotateX. Der Standardwert ist hoch, so dass offensichtliche Anziehungskraft beobachtet wird. Wenn diese Werte hingegen zu niedrig sind, erhalten die Partikel nach einer bestimmten Zeit sehr hohe Geschwindigkeiten. rotateY

Der JSON -Code für die obige Partikelbewegung lautet wie folgt:

"move": {
  "enable": true,
  "speed": 20,
  "random": true,
  "direction": "none",
  "bounce": true,
  "out_mode": "bounce",
  "attract": {
    "enable": true,
    "rotateX": 10,
    "rotateY": 10
  }
}

Denken Sie daran, dass sich die Partikel nicht bewegen, wenn

auf straight und true auf direction auf none eingestellt ist.

Interaktive Ereignisse und Muster

Kann der Benutzer mit Partikeln interagieren? Die Antwort lautet ja. Partikel.js können auf drei Ereignisse reagieren: hover, click und resize. Durch Festlegen des Werts des Parameters detect_on können Ereignisse in der Leinwand oder im Fenster selbst erkannt werden. Alle diese Ereignisse werden ausgelöst, wenn Sie das Leinwand/das Fenster ändern, klicken oder Größe ändern.

Wenn resize auf true eingestellt ist, passen sich die Partikel im verbleibenden Raum ohne Verformung ein. Wenn resize auf false eingestellt ist, ändern die Partikel die Form zu Änderungen der Größe der Leinwand.

"move": {
  "enable": true,
  "speed": 20,
  "random": true,
  "direction": "none",
  "bounce": true,
  "out_mode": "bounce",
  "attract": {
    "enable": true,
    "rotateX": 10,
    "rotateY": 10
  }
}

mode Parameter definieren, wie Benutzer mit Partikeln interagieren. Die Bibliothek definiert fünf Interaktionsmodi: grab, bubble, repulse, push, remove und

.

grab

Modus erstellt eine Verbindungslinie zwischen dem Punkt, den Sie schweben oder klicken, und in der Nähe Partikel in einem bestimmten Abstand. Dieser Modus gilt nur für schwebende Ereignisse. Der folgende JSON -Code zeichnet eine Linie mit Deckkraft von 1, um alle Partikel innerhalb von 800 Pixel zu verbinden.

"detect_on": "canvas",
"events": {
  "onhover": {
    "enable": true,
    "mode": "repulse"
  },
  "onclick": {
    "enable": true,
    "mode": "push"
  },
  "resize": true
}

bubble repulse Modus verändert die Größe und Deckkraft aller Partikel in einem bestimmten Abstand, die Dauer liegt bei Ihnen. hover Modus hält die Partikel von der Klickposition fern. Beide Modi können zu click oder

hinzugefügt werden. Die Dauer gilt nur für Klicken in beiden Fällen.

"grab": {
  "distance": 800,
  "line_linked": {
    "opacity": 1
  }
}

Sie können versuchen, verschiedene Parameter zu ändern, damit die Demo besser funktioniert.

push remove Modus fügt bei jedem Klicks der Maus eine bestimmte Anzahl von Partikeln hinzu. Die Partikel werden der geklickten Position hinzugefügt. In ähnlicher Weise entfernt der

-Modus Partikel aus der Leinwand. Die zu beseitigen Partikel sind zufällig ausgewählt.

"bubble": {
  "distance": 600,
  "size": 60,
  "duration": 0.1,
  "opacity": 1
},
"repulse": {
  "distance": 500,
  "duration": 0.5
}

Zusammenfassung

Diese Reihe von Tutorials umfasst alle Merkmale von Partikeln. Um Probleme wie Partikel zu vermeiden, die sich von Zeit zu Zeit nicht erholen, erwähnte ich auch einige Vorsichtsmaßnahmen von Zeit zu Zeit.

Wenn Sie weitere Informationen zu allen von uns diskutierten Parametern benötigen, lesen Sie bitte die Dokumentation für diese Bibliothek. Wenn Sie Probleme mit der Bibliothek haben oder einige Funktionen ungewöhnlich verhalten, wird empfohlen, den Quellcode zu lesen, um zu verstehen, wie er intern funktioniert.

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

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