Share
Im letzten Particles.js-Tutorial haben Sie gelernt, wie Sie Partikel mit gewünschten Formen und Größen erstellen. Während es sich gut anfühlte, zu sehen, wie sich alle Partikel bewegen, gibt es noch Raum für Verbesserungen. Gegenwärtig gibt es keinerlei Wechselwirkung zwischen verschiedenen Teilchen. Sie gehen einfach durch, als ob die anderen Teilchen nicht existieren würden.
In diesem Lernprogramm erfahren Sie, wie Sie Partikel nach Belieben bewegen, indem Sie deren Richtung, Geschwindigkeit und vieles mehr steuern. Außerdem lernen Sie verschiedene Interaktionsmodi und Ereignisse kennen.
Nicht alle Partikel in jedem Partikelsystem bewegen sich in zufälligen Richtungen. Sogar wenn sie es tun, sind andere Kräfte in Aktion. Zum Beispiel können sie sich bei Annäherung beschleunigen oder nach Kollisionen zurückspringen. Alle diese Optionen können durch verschiedene Eigenschaften gesteuert werden Bewegung.
Wenn Sie nicht möchten, dass sich die Partikel bewegen, können Sie dies durch Einstellen tun aktivieren zu falsch. Mit dem Parameter können Sie die Geschwindigkeit der Partikel festlegen Geschwindigkeit. Um jedes Teilchen mit einer zufälligen Geschwindigkeit zu bewegen, setzen Sie zufällig zu wahr. Um sie in zufällige Richtungen zu verschieben, geben Sie dies an Richtung wie keiner.
Früher oder später bewegt sich mindestens eines der Partikel an die Grenze unseres Systems. Ob dieses Teilchen zurückspringt oder aus einer anderen Richtung herauskommt, wird durch den Wert von bestimmt out_mode Parameter. Wenn es eingestellt ist aus, Die Partikel bewegen sich aus der Leinwand heraus. Wenn es eingestellt ist prallen, Die Partikel prallen nach dem Auftreffen auf die Grenze zurück.
Es erscheint ein wenig unnatürlich, wenn sich Partikel ohne Geschwindigkeitsänderung durchdringen. Um die Partikelgeschwindigkeit bei jeder Kollision zu ändern, können Sie einstellen prallen zu wahr. Interessanterweise funktioniert das nur, wenn entweder die line_linked oder der Attraktion Eigenschaft ist aktiviert. Die Partikel kehren bei jeder Kollision ihre Richtung um, selbst wenn die Kollision nicht von vorne erfolgt.
Zum Schluss möchte ich die Attraktivität diskutieren. Sobald Sie die Anziehung aktivieren, ändern die Partikel ihre Geschwindigkeit, sobald sie sich in der Nähe anderer Partikel befinden. Die Änderung kann je nach Wert anderer Parameter positiv oder negativ sein. Die Anziehungskraft in jeder Richtung ist umgekehrt proportional zum Wert der jeweiligen Parameter, RotateX und drehenY. Die Standardwerte sind sehr hoch, um eine bemerkenswerte Anziehungskraft zu beobachten. Wenn Sie dagegen zu niedrige Werte wählen, werden die Partikel nach einiger Zeit sehr schnell beschleunigt.
Die JSON, die für die Bewegung der Partikel oben verantwortlich ist, ist:
"move": "enable": true, "speed": 20, "random": true, "direction": "none", "bounce": true, "out_mode": "bounce", "anziehen": "enable": true, "rotateX": 10, "rotateY": 10
Sie sollten dies beim Einrichten beachten Gerade zu wahr und Richtung zu keiner zur gleichen zeit bewegen sich die partikel überhaupt nicht.
So weit so gut, aber Sie fragen sich vielleicht, ob die Partikel auch mit dem Benutzer interagieren können und ob sie dies können.
Um Ihre erste Frage zu beantworten, können die Partikel mit dem Benutzer interagieren. Particles.js kann auf drei Ereignisse reagieren: schweben, klicken, und Größe ändern. Zunächst sollten Sie jedoch wissen, dass die Ereignisse auf der Leinwand oder im Fenster selbst erkannt werden können, indem Sie den Wert von festlegen detect_on Parameter. Jetzt werden alle diese Ereignisse ausgelöst, wenn Sie den Canvas / das Fenster bewegen, klicken oder dessen Größe ändern.
Wenn du eingestellt hast Größe ändern zu wahr, im verbleibenden Raum stellen sich die Partikel verzerrungsfrei ein. Wann Größe ändern ist eingestellt auf falsch, Die Partikel ändern ihre Form, um Änderungen der Leinwandgröße zu berücksichtigen.
"detect_on": "canvas", "events": "onhover": "enable": true, "mode": "repulse", "onclick": "enable": true, "mode": "drücken "," resize ": true
Sie fragen sich wahrscheinlich, was das ist Modus Der Parameter tut im obigen Code-Snippet. Dieser Parameter definiert, wie die Partikel mit dem Benutzer interagieren würden. Die Bibliothek hat fünf Interaktionsmodi definiert. Sie sind greifen, Blase, Abwehr, drücken, und Löschen.
Das greifen Im Modus werden Verbindungslinien zwischen Ihrem Hover- oder Klickpunkt und nahegelegenen Partikeln innerhalb einer von Ihnen festgelegten Entfernung erstellt. Dieser Modus funktioniert nur mit dem Hover-Ereignis. Der JSON unten zeichnet eine Linie mit Deckkraft 1, um alle Partikel innerhalb von 800 px zu verbinden.
"grab": "distance": 800, "line_linked": "opacity": 1
Das Blase Der Modus ändert die Größe und Deckkraft aller Partikel, die sich innerhalb einer bestimmten Entfernung für eine von Ihnen festgelegte Dauer befinden. Das Abwehr Im Modus wird das Partikel vom Ort des Klicks entfernt. Beide Modi können zu beiden hinzugefügt werden schweben oder klicken. Die Dauer gilt in beiden Fällen nur für die Klickereignisse.
"bubble": "distance": 600, "size": 60, "duration": 0,1, "opacity": 1, "repulse": "distance": 500, "duration": 0,5
Sie sollten versuchen, verschiedene Parameter zu ändern, um die Demo noch besser zu machen.
Das drücken Der Modus fügt bei jedem Mausklick eine bestimmte Anzahl von Partikeln hinzu. Die Partikel werden an der Stelle des Klicks hinzugefügt. Ebenso die Löschen Im Modus werden Partikel aus der Leinwand entfernt. Die zu entfernenden Partikel werden zufällig ausgewählt.
"push": "particle_nb": 3, "entfernen": "particle_nb": 1
Die drei Tutorials dieser Serie behandelten alles, was Particles.js zu bieten hat. Ich habe auch ab und zu ein paar Dinge erwähnt, damit Sie sich später nicht über den Kopf kratzen müssen, wenn Teilchen wie Partikel nicht zusammenprallen, usw.
Wenn Sie mehr über alle Parameter wissen möchten, die wir besprochen haben, lesen Sie bitte die Dokumentation dieser Bibliothek. Wenn Sie während der Verwendung der Bibliothek irgendwann einmal nicht weiterkommen oder sich etwas nicht ordnungsgemäß verhält, möchte ich Ihnen vorschlagen, den Quellcode zu lesen, um zu sehen, was unter der Haube abläuft.
Accentsconagua