Share
In de laatste handleiding van Particles.js hebt u geleerd hoe u deeltjes kunt maken met de vormen en formaten die u wilt. Hoewel het goed voelde om alle deeltjes te zien bewegen, is er nog steeds ruimte voor verbetering. Op dit moment is er geen interactie tussen verschillende deeltjes. Ze passeren gewoon door elkaar alsof de andere deeltjes niet bestaan.
In deze zelfstudie leer je deeltjes verplaatsen op de manier die jij wilt door hun richting, snelheid en nog veel meer te regelen. Je leert ook over verschillende interactiemodi en evenementen.
Niet alle deeltjes in elk deeltjessysteem bewegen in willekeurige richtingen. Zelfs wanneer ze dat doen, zijn er enkele andere krachten in actie. Ze kunnen bijvoorbeeld versnellen wanneer ze elkaar naderen of stuiteren na botsingen. Al deze opties kunnen worden beheerd door verschillende eigenschappen die beschikbaar zijn onder verhuizing.
Als je niet wilt dat de deeltjes helemaal bewegen, kun je dat doen door in te stellen in staat stellen naar vals. U kunt de snelheid van deeltjes opgeven met behulp van de parameter snelheid. Om elk deeltje met een willekeurige snelheid te verplaatsen, stel in willekeurig naar waar. Als u ze in willekeurige richtingen wilt verplaatsen, geeft u dat op richting zoals geen.
Vroeg of laat zal ten minste een van de deeltjes naar de grens van ons systeem gaan. Of dat deeltje terugkaatst of uit een andere richting komt, wordt bepaald door de waarde van het out_mode parameter. Wanneer het is ingesteld op uit, de deeltjes bewegen uit het canvas. Wanneer het is ingesteld op stuiteren, de deeltjes stuiteren terug na het raken van de grens.
Het lijkt een beetje onnatuurlijk wanneer deeltjes elkaar passeren zonder enige verandering in snelheid. Om de deeltjessnelheid bij elke botsing te veranderen, kunt u instellen stuiteren naar waar. Interessant is dat dit alleen werkt als de line_linked of de aantrekkelijkheid eigenschap is ingeschakeld. Deeltjes keren hun richting om telkens wanneer ze botsen, zelfs als de botsing niet recht voor de raap is.
Ten slotte zou ik de aantrekkingskracht willen bespreken. Zodra u attractie inschakelt, zullen de deeltjes hun snelheid veranderen wanneer ze zich in de onmiddellijke nabijheid van andere deeltjes bevinden. De verandering kan positief of negatief zijn, afhankelijk van de waarde van andere parameters. De aantrekkingskracht in elke richting is omgekeerd evenredig met de waarde van de respectieve parameters, rotateX en rotateY. De standaardwaarden zijn erg hoog om enige merkbare aantrekking waar te nemen. Aan de andere kant, als u hun waarden te laag maakt, zullen de deeltjes na enige tijd zeer hoge snelheden krijgen.
De JSON die verantwoordelijk is voor de beweging van de deeltjes hierboven is:
"move": "enable": true, "speed": 20, "random": true, "direction": "none", "bounce": true, "out_mode": "bounce", "attract": "enable": true, "rotateX": 10, "rotateY": 10
Houd er rekening mee dat wanneer u instelt recht naar waar en richting naar geen tegelijkertijd zullen de deeltjes helemaal niet bewegen.
Tot nu toe goed, maar je vraagt je misschien af of de deeltjes ook interactie met de gebruiker kunnen hebben en als ze kunnen, hoe ze zouden reageren.
Om uw eerste vraag te beantwoorden, kunnen de deeltjes interactie hebben met de gebruiker. Particles.js kan reageren op drie evenementen: zweven, Klik, en verkleinen. U moet echter eerst weten dat de gebeurtenissen op het canvas of in het venster zelf kunnen worden gedetecteerd door de waarde van de detect_on parameter. Nu worden al deze gebeurtenissen geactiveerd wanneer u het canvas / venster op de voorgrond plaatst, erop klikt of het formaat wijzigt.
Wanneer je instelt verkleinen naar waar, de deeltjes passen zichzelf aan in de overblijvende ruimte zonder enige vervorming. Wanneer verkleinen ingesteld op vals, de deeltjes veranderen van vorm om rekening te houden met eventuele veranderingen in de canvasgrootte.
"detect_on": "canvas", "events": "onhover": "enable": true, "mode": "repulse", "onclick": "enable": true, "mode": "push "," resize ": true
Je vraagt je waarschijnlijk af wat de mode parameter doet in het bovenstaande codefragment. Deze parameter definieert hoe de deeltjes zouden communiceren met de gebruiker. De bibliotheek heeft vijf interactiemodi gedefinieerd. Zij zijn grijpen, bubbel, afwijzen, Duwen, en verwijderen.
De grijpen modus maakt verbindingslijnen tussen je zweefpunt of klik en deeltjes in de buurt binnen een specifieke afstand die je zelf hebt ingesteld. Deze modus werkt alleen met de zweefgebeurtenis. De onderstaande JSON tekent een lijn met dekking 1 om alle deeltjes binnen 800 px te verbinden.
"grab": "distance": 800, "line_linked": "onacity": 1
De bubbel modus verandert de grootte en dekking van alle deeltjes die zich binnen een bepaalde afstand bevinden gedurende een door u gekozen duur. De afwijzen modus zorgt ervoor dat het deeltje weggaat van de locatie van de klik. Beide modi kunnen aan beide worden toegevoegd zweven of Klik. De duur is alleen van toepassing op de klikgebeurtenissen in beide gevallen.
"bubble": "distance": 600, "size": 60, "duration": 0.1, "opacity": 1, "repulse": "distance": 500, "duration": 0.5
Je zou moeten proberen om verschillende parameters te veranderen om de demo nog beter te maken.
De Duwen modus voegt een bepaald aantal deeltjes toe bij elke muisklik. De deeltjes worden toegevoegd op de locatie van de klik. Evenzo is de verwijderen modus verwijdert deeltjes van het canvas. De te verwijderen deeltjes worden willekeurig bepaald.
"push": "particles_nb": 3, "remove": "particles_nb": 1
De drie handleidingen in deze serie hadden betrekking op alles wat Particles.js te bieden heeft. Ik heb ook zo nu en dan een paar dingen genoemd, zodat je later je hoofd niet hoeft te krabben over zaken als deeltjes die niet tegen elkaar stuiteren, enz..
Als u meer wilt weten over alle parameters die we hebben besproken, raadpleegt u de documentatie van deze bibliotheek. Bovendien, als je op een gegeven moment vastloopt tijdens het gebruik van de bibliotheek of als iets zich niet gedraagt zoals het zou moeten, zou ik willen voorstellen dat je de broncode leest om te zien wat er gebeurt onder de motorkap.
Accentsconagua