Share
En el último tutorial de Particles.js, aprendió a crear partículas con las formas y tamaños que deseaba. Si bien se sintió bien al ver que todas las partículas se mueven, todavía hay espacio para mejorar. En la actualidad, no hay interacción entre varias partículas en absoluto. Solo se atraviesan como si las otras partículas no existieran..
Este tutorial te enseñará cómo mover las partículas en la forma que deseas mediante el control de su dirección, velocidad y mucho más. También aprenderás sobre varios modos de interacción y eventos..
No todas las partículas en cada sistema de partículas se mueven en direcciones aleatorias. Incluso cuando lo hacen, hay otras fuerzas en acción. Por ejemplo, pueden acelerarse cuando se acercan entre sí o recuperarse después de las colisiones. Todas estas opciones pueden ser controladas por varias propiedades disponibles en movimiento.
Si no desea que las partículas se muevan, puede hacerlo configurando habilitar a falso. Puede especificar la velocidad de las partículas utilizando el parámetro velocidad. Para mover cada partícula con una velocidad aleatoria, establece aleatorio a cierto. Por otro lado, para moverlos en direcciones al azar, especifique dirección como ninguna.
Tarde o temprano, al menos una de las partículas se moverá al límite de nuestro sistema. Si esa partícula rebota o sale de otra dirección se decide por el valor de la out_mode parámetro. Cuando está configurado para afuera, Las partículas se mueven fuera del lienzo. Cuando está configurado para rebotar, Las partículas se recuperan después de golpear el límite..
Parece un poco antinatural cuando las partículas pasan a través de la otra sin ningún cambio en la velocidad. Para cambiar la velocidad de las partículas en cada colisión, puede configurar rebotar a cierto. Curiosamente, esto funcionará solo si el line_linked o la atracción La propiedad está habilitada. Las partículas invertirán su dirección cada vez que colisionen, incluso si la colisión no es de frente..
Finalmente, me gustaría discutir la atracción. Una vez que habilites la atracción, las partículas cambiarán su velocidad cuando estén cerca de otras partículas. El cambio puede ser positivo o negativo dependiendo del valor de otros parámetros. La atracción en cada dirección es inversamente proporcional al valor de los parámetros respectivos, rotarX y rotarY. Los valores predeterminados son muy altos para observar alguna atracción notable. Por otro lado, si hace que sus valores sean demasiado bajos, las partículas ganarán velocidades muy altas después de algún tiempo..
El JSON responsable del movimiento de las partículas de arriba es:
"move": "enable": true, "speed": 20, "random": true, "direction": "none", "bounce": true, "out_mode": "bounce", "attract": "enable": verdadero, "rotateX": 10, "rotateY": 10
Debe tener en cuenta que cuando configura Derecho a cierto y dirección a ninguna al mismo tiempo, las partículas no se moverán en absoluto.
Hasta ahora todo bien, pero podría preguntarse si las partículas también pueden interactuar con el usuario y, si pueden, cómo interactuarían..
Para responder a su primera pregunta, las partículas pueden interactuar con el usuario. Particles.js puede responder a tres eventos: flotar, hacer clic, y redimensionar. Sin embargo, primero debe saber que los eventos se pueden detectar en el lienzo o en la propia ventana estableciendo el valor de detect_on parámetro. Ahora todos estos eventos se activarán cuando se desplace, haga clic o cambie el tamaño del lienzo / ventana.
Cuando te pones redimensionar a cierto, Las partículas se ajustan en el espacio restante sin ninguna distorsión. Cuando redimensionar se establece en falso, Las partículas cambiarán su forma para adaptarse a cualquier cambio en el tamaño del lienzo.
"detect_on": "lienzo", "eventos": "onhover": "enable": true, "mode": "repulse", "onclick": "enable": true, "mode": "push "," redimensionar ": verdadero
Probablemente te estés preguntando qué modo parámetro hace en el fragmento de código anterior. Este parámetro define cómo las partículas interactuarían con el usuario. La biblioteca ha definido cinco modos de interacción. Son agarrar, burbuja, rechazar, empujar, y retirar.
los agarrar el modo crea líneas de conexión entre su punto de desplazamiento o el clic y las partículas cercanas a una distancia específica que usted establece. Este modo solo funciona con el evento hover. El JSON a continuación dibuja una línea con opacidad 1 para conectar todas las partículas dentro de 800 px.
"grab": "distance": 800, "line_linked": "opacity": 1
los burbuja el modo cambia el tamaño y la opacidad de todas las partículas que se encuentran dentro de una distancia específica durante el tiempo que decida. los rechazar El modo hace que la partícula se aleje de la ubicación del clic. Ambos modos se pueden agregar a cualquiera flotar o hacer clic. La duración es aplicable solo en los eventos de clic en ambos casos.
"burbuja": "distancia": 600, "tamaño": 60, "duración": 0.1, "opacidad": 1, "rechazar": "distancia": 500, "duración": 0.5
Debería intentar cambiar varios parámetros para mejorar aún más la demostración..
los empujar El modo agrega un cierto número de partículas en cada clic del mouse. Las partículas se agregarán en la ubicación del clic. Del mismo modo, el retirar El modo elimina las partículas del lienzo. Las partículas a eliminar se deciden aleatoriamente..
"push": "partículas_nb": 3, "eliminar": "partículas_nb": 1
Los tres tutoriales de esta serie cubrieron todo lo que Particles.js tiene para ofrecer. También he mencionado algunas cosas de vez en cuando para que no tenga que rascarse la cabeza más adelante por cuestiones como partículas que no rebotan entre sí, etc..
Si necesita saber más sobre todos los parámetros que discutimos, revise la documentación de esta biblioteca. Además, si te quedas atascado en algún momento mientras usas la biblioteca o algo no se comporta como debería, me gustaría sugerirte que leas el código fuente para ver qué sucede debajo del capó..
Accentsconagua