Share
I den sista Particles.js handledningen lärde du dig hur du skapar partiklar med former och storlekar som du önskar. Medan det kände sig bra att se alla partiklarna rör sig, finns det fortfarande utrymme för förbättringar. För närvarande finns det ingen interaktion mellan olika partiklar alls. De passerar bara genom varandra som om de andra partiklarna inte existerar.
Denna handledning lär dig hur man rör partiklar runt hur man vill genom att styra sin riktning, hastighet och mycket mer. Du lär dig också om olika interaktionslägen och händelser.
Inte alla partiklar i varje partikelsystem rör sig i slumpmässiga riktningar. Även när de gör det finns några andra krafter i aktion. Till exempel kan de påskyndas när de närmar sig varandra eller studsar tillbaka efter kollisioner. Alla dessa alternativ kan styras av olika egenskaper som finns tillgängliga under flytta.
Om du inte vill att partiklarna ska flytta alls kan du göra det genom att ställa in Gör det möjligt till falsk. Du kan ange partikelhastighet med parametern fart. För att flytta varje partikel med viss slumpvis hastighet, sätt slumpmässig till Sann. Å andra sidan, för att flytta dem i slumpmässiga riktningar, specificera riktning som ingen.
Förr eller senare kommer åtminstone en av partiklarna att flytta till gränsen för vårt system. Huruvida den partikel studsar tillbaka eller kommer ut från en annan riktning bestäms av värdet av out_mode parameter. När det är inställt på ut, partiklarna rör sig ut ur duken. När det är inställt på studsa, partiklarna studsar tillbaka efter att ha träffat gränsen.
Det verkar lite onaturligt när partiklar passerar varandra utan någon förändring i hastighet. För att ändra partikelhastighet vid varje kollision kan du ställa in studsa till Sann. Intressant kommer detta att fungera endast om antingen line_linked eller den attraktion egendom är aktiverat. Partiklar kommer att vända sin riktning varje gång de kolliderar, även om kollisionen inte är på huvudet.
Slutligen vill jag diskutera attraktion. När du aktiverar attraktion kommer partiklarna att ändra sin hastighet när de är i närheten av andra partiklar. Förändringen kan vara positiv eller negativ beroende på värdet av andra parametrar. Attraktionen i varje riktning är omvänt proportionell mot värdet av respektive parametrar, rotateX och rotateY. Standardvärdena är mycket höga för att observera någon märkbar attraktion. Å andra sidan, om du gör sina värden för låga, kommer partiklarna att få mycket höga hastigheter efter en tid.
Den JSON som ansvarar för rörelsen av partiklarna ovan är:
"flytta": "aktivera": true, "speed": 20, "slumpmässigt": sant "riktning": "ingen", "studsa": sant "out_mode": "studsa" "aktivera": true, "rotateX": 10, "rotateY": 10
Du bör komma ihåg att när du ställer in rakt till Sann och riktning till ingen samtidigt kommer partiklarna inte att flytta alls.
Hittills så bra, men du kanske undrar om partiklarna också kan interagera med användaren, och om de kan, hur de skulle interagera.
För att svara på din första fråga kan partiklarna interagera med användaren. Particles.js kan svara på tre händelser: sväva, klick, och ändra storlek. Men först bör du veta att händelserna kan upptäckas på duken eller på fönstret i sig genom att ställa in värdet på detect_on parameter. Nu kommer alla dessa händelser att utlösas när du svävar, klickar eller ändrar duken / fönstret.
När du ställer in ändra storlek till Sann, partiklarna anpassar sig i det återstående utrymmet utan förvrängning. När ändra storlek är satt till falsk, partiklarna kommer att ändra sin form för att rymma eventuella ändringar i dukstorlek.
"avkänning": "" "," resize ": true
Du undrar nog vad läge parameteren finns i kodfliken ovan. Denna parameter definierar hur partiklarna skulle interagera med användaren. Biblioteket har definierat fem interaktionslägen. Dom är hugg, bubbla, slå tillbaka, tryck, och ta bort.
De hugg läge skapar anslutningslinjer mellan din svängpunkt eller klicka och närliggande partiklar inom ett visst avstånd som du ställer in. Detta läge fungerar endast med svängningsevenemanget. JSON nedan drar en linje med opacitet 1 för att ansluta alla partiklar inom 800 px.
"grip": "distans": 800, "line_linked": "opacitet": 1
De bubbla läge ändrar storleken och opaciteten hos alla partiklar som ligger inom ett visst avstånd under en längd som du bestämmer. De slå tillbaka läge gör partikeln bort från platsen för klicket. Båda dessa lägen kan läggas till antingen sväva eller klick. Varaktigheten är endast tillämplig på klickhändelserna i båda fallen.
"bubbla": "avstånd": 600, "storlek": 60, "varaktighet": 0,1, "opacitet": 1, "repulse": "distance": 500, "duration"
Du bör försöka ändra olika parametrar för att göra demo ännu bättre.
De tryck läge lägger till ett visst antal partiklar på varje musklick. Partiklarna kommer att läggas till på platsen för klicket. På samma sätt, ta bort läge tar bort partiklar från duken. De partiklar som ska avlägsnas bestäms slumpmässigt.
"push": "particles_nb": 3, "remove": "particles_nb": 1
De tre handledningarna i denna serie täckte allt som Particles.js har att erbjuda. Jag har också nämnt några saker nu och då så att du inte behöver skrapa huvudet senare efter problem som partiklar som inte studsar varandra, etc.
Om du behöver veta mer om alla parametrar som vi diskuterade, gå igenom dokumentationen för det här biblioteket. Om du fastnar vid någon tidpunkt när du använder biblioteket eller om något inte fungerar som det borde jag föreslå att du läser källkoden för att se vad som händer under huven.
Accentsconagua