Share
I den siste Particles.js-opplæringen lærte du å lage partikler med former og størrelser du ønsket. Mens det føltes godt å se at alle partiklene beveget seg, er det fortsatt rom for forbedring. For tiden er det ingen interaksjon mellom forskjellige partikler overhodet. De passerer bare gjennom hverandre som om de andre partiklene ikke eksisterer.
Denne opplæringen vil lære deg hvordan du beveger partikler rundt slik du vil, ved å kontrollere retning, hastighet og mye mer. Du vil også lære om ulike interaksjonsmoduser og hendelser.
Ikke alle partikler i hvert partikkelsystem beveger seg i tilfeldige retninger. Selv når de gjør det, er det noen andre krefter i aksjon. For eksempel kan de øke hastigheten når de nærmer seg hverandre eller spretter tilbake etter kollisjoner. Alle disse alternativene kan styres av ulike egenskaper tilgjengelig under bevege seg.
Hvis du ikke vil at partiklene skal bevege seg i det hele tatt, kan du gjøre det ved å sette inn Aktiver til falsk. Du kan angi hastigheten på partikler ved hjelp av parameteren hastighet. For å flytte hver partikkel med litt tilfeldig hastighet, sett tilfeldig til ekte. På den annen side, for å flytte dem i tilfeldige retninger, spesifiser retning som ingen.
Før eller senere vil minst en av partiklene flytte til grensen av systemet vårt. Hvorvidt den partikkelen spretter tilbake eller kommer ut fra en annen retning, avgjøres av verdien av out_mode parameter. Når det er satt til ute, partiklene beveger seg ut av lerretet. Når det er satt til sprette, partiklene spretter tilbake etter å ha rammet grensen.
Det virker litt unaturlig når partikler passerer gjennom hverandre uten noen hastighetsendring. For å endre partikkelhastighet ved hver kollisjon, kan du stille inn sprette til ekte. Interessant, dette vil fungere bare hvis enten line_linked eller tiltrekning Egenskapen er aktivert. Partikler vil reversere retningen hver gang de kolliderer, selv om kollisjonen ikke er på hovedet.
Til slutt vil jeg diskutere attraksjon. Når du aktiverer tiltrekning, vil partiklene endre hastigheten når de er i nærheten av andre partikler. Endringen kan være positiv eller negativ avhengig av verdien av andre parametere. Tiltrengningen i hver retning er omvendt proporsjonal med verdien av de respektive parametrene, rotateX og rotateY. Standardverdiene er svært høye for å observere noen merkbar tiltrekning. På den annen side, hvis du gjør sine verdier for lave, vil partiklene etter hvert ha svært høye hastigheter.
JSON ansvarlig for bevegelsen av partiklene ovenfor er:
"flytte": "aktiver": true, "speed": 20, "tilfeldig": sann, "retning": "ingen", "sprette": sann, "out_mode": "sprette" "aktiver": true, "rotateX": 10, "rotateY": 10
Du bør huske på at når du setter rett til ekte og retning til ingen Samtidig vil partiklene ikke bevege seg i det hele tatt.
Så langt så bra, men du lurer kanskje på om partiklene også kan samhandle med brukeren, og hvis de kan, hvordan de ville samhandle.
For å svare på ditt første spørsmål, kan partiklene samhandle med brukeren. Particles.js kan svare på tre hendelser: sveve, klikk, og endre størrelse på. Men først bør du vite at hendelsene kan oppdages på lerretet eller på selve vinduet ved å sette verdien av detect_on parameter. Nå blir alle disse hendelsene utløst når du svever, klikker eller endrer størrelsen på lerretet / vinduet.
Når du setter inn endre størrelse på til ekte, partiklene justerer seg i det gjenværende rommet uten forvrengning. Når endre størrelse på er satt til falsk, Partiklene vil endre sin form for å imøtekomme eventuelle endringer i lerretstørrelsen.
"detect_on": "canvas", "events": "onhover": "aktiver": true, "mode": "repulse", "onclick": "aktiver": true, "mode" "," resize ": true
Du lurer sikkert på hva modus parameteren finnes i kodestykket ovenfor. Denne parameteren definerer hvordan partiklene vil samhandle med brukeren. Biblioteket har definert fem interaksjonsmoduser. De er gripe, boble, Repulse, trykk, og fjerne.
De gripe modus skaper tilkoblingslinjer mellom pekepunktet eller klikk og nærliggende partikler innenfor en bestemt avstand som du angir selv. Denne modusen virker bare med hover-hendelsen. JSON nedenfor trekker en linje med opasitet 1 for å koble alle partikler innen 800 px.
"grip": "avstand": 800, "line_linked": "opacity": 1
De boble modus endrer størrelsen og opaciteten til alle partikler som ligger innenfor en bestemt avstand for en varighet du bestemmer. De Repulse modus gjør partikkelen gå vekk fra plasseringen av klikket. Begge disse modiene kan legges til enten sveve eller klikk. Varigheten gjelder kun på klikkhendelsene i begge tilfeller.
"boble": "avstand": 600, "størrelse": 60, "varighet": 0,1, "opacity": 1, "repulse": "avstand": 500, "varighet": 0,5
Du bør prøve å endre ulike parametere for å gjøre demoen enda bedre.
De trykk modus legger til et visst antall partikler på hvert museklikk. Partiklene vil bli lagt til på stedet for klikket. På samme måte, fjerne modus fjerner partikler fra lerretet. Partiklene som skal fjernes, bestemmes tilfeldig.
"push": "particles_nb": 3, "remove": "particles_nb": 1
De tre opplæringene i denne serien dekket alt som Particles.js har å tilby. Jeg har også nevnt noen få ting nå og da, slik at du ikke trenger å klø på hodet senere på problemer som partikler som ikke hopper av hverandre, osv..
Hvis du trenger å vite mer om alle parametrene som vi diskuterte, vennligst gå over dokumentasjonen til dette biblioteket. Videre, hvis du sitter fast på et tidspunkt mens du bruker biblioteket eller noe ikke oppfører seg som det skulle, vil jeg foreslå at du leser kildekoden for å se hva som skjer under hetten.
Accentsconagua