Share
El tutorial anterior de Particles.js describió brevemente varias características que ofrece la biblioteca y cómo comenzar a utilizarla. En este tutorial cubriré en detalle todos los aspectos de Particles.js que tratan con la apariencia física de las partículas..
Lo primero que trataremos es el número y la densidad de las partículas. La densidad determina el número de partículas que se empaquetarán en un área determinada. Se habilita por defecto con el valor_area establecido en 800. Aquí está el JSON que le permite controlar el número de partículas:
"number": "value": 50, "density": "enable": true, "value_area": 500
Si te pones habilitar bajo densidad a falso entonces la cantidad de partículas mostradas será exactamente 50. Duplicar el valor de valor_area reducirá la cantidad de partículas aproximadamente a la mitad.
Hay tres formas de configurar los colores de las partículas. Puede configurar los colores en formato HEX, formato RGB o formato HSL. Debido a un error en la biblioteca, el formato RGB y HSL solo funcionan cuando se elimina el valor de color predeterminado de la biblioteca.
Si desea establecer aleatoriamente el color de la partícula, puede hacerlo con el valor "aleatorio". Finalmente, para establecer el color al azar de una lista de colores, deberá proporcionar los colores en formato HEX como una matriz. Aquí está el JSON para establecer colores para partículas:
"color": "valor": "#fff" // configurar blanco en HEX (estamos usando esta versión) "valor": r: 255, g: 255, b: 255 // configurar blanco en RGB " valor ": h: 0, s: 100%, l: 100% // establecer blanco en HSL" valor ": [" # f00 "," # 0f0 "," # 00f "] // configurar rojo, verde y azul aleatoriamente "valor": "aleatorio" // establecer colores al azar
La propiedad de opacidad te da mucho control. Puede establecerlo en un valor exacto o usar valores aleatorios configurando "aleatorio" a cierto. No solo eso, sino que también puedes animar la opacidad de las partículas. Aquí está el código JSON para la propiedad de opacidad:
"opacidad": "valor": 1, "aleatorio": verdadero, // Establezca en falso en nuestro caso "anim": "habilitar": verdadero, "velocidad": 8, "opacidad_min": 0.4, "sincronización ": falso
Ajuste "sincronizar" a cierto Animará la opacidad de todas las partículas al mismo tiempo. Usando un valor de 0.4 para "opacity_min" se asegura de que la opacidad nunca sea inferior a 0.4 para cualquier partícula durante la animación. Aquí hay una demostración con estrellas moviéndose a través del espacio. Intenta cambiar el número, el color o la opacidad de las partículas para ver su efecto.
Particles.js tiene cinco valores diferentes para crear formas básicas. Una forma simple como circulo genera una partícula circular, triángulo genera partículas triangulares, y borde Genera cuadrados. Puedes usar el valor polígono para crear un nb_sides polígono de lados, donde se proporciona el valor nb_sides. Para crear formas de estrellas reales, puede establecer el tipo de forma en estrella. los carrera el parámetro agrega un contorno de un color y ancho dados alrededor de todas las partículas. El siguiente código JSON creará hexágonos.
"shape": "type": "polygon", "stroke": "width": 4, "color": "#fff", "polygon": "nb_sides": 6
También es posible mostrar imágenes en lugar de formas básicas. Primero, deberás especificar el tipo de forma como imagen. Después de eso, puede establecer la fuente de la imagen y su altura y anchura deseadas. Vale la pena tener en cuenta que el ancho y la altura no determinarán el tamaño de las partículas de la imagen sino su relación de aspecto. Aquí hay algunos JSON para crear partículas con imágenes de asteroides:
"shape": "type": "image", "image": "src": "img / football.png", // Establecer la ruta de la imagen. "ancho": 1, // El ancho y el alto no deciden el tamaño. "altura": 1 // Simplemente deciden la relación de aspecto.
La biblioteca también te permite mezclar múltiples formas juntas. Por ejemplo, puede decidir crear círculos, cuadrados y hexágonos simultáneamente. En ese caso, todo lo que tienes que hacer es pasar una matriz con todas estas formas.
"tipo": ["círculo", "borde", "polígono"]
La propiedad de tamaño tiene todas las opciones de la propiedad de opacidad. Puede establecer el tamaño al azar, así como animar el tamaño de las partículas individuales. Eche un vistazo de cerca al siguiente código JSON.
"size": "value": 25, "random": true, "anim": "enable": true, "speed": 20, "size_min": 10, "sync": false
Si te pones aleatorio a falso, todas las partículas serán de tamaño 25. Cuando aleatorio se establece en cierto, tamaño sirve como el límite de tamaño máximo para partículas. Ajuste sincronizar a cierto Dentro de la animación cambiará el tamaño de todos los elementos simultáneamente. Debe abrir la demostración y probar diferentes valores para el número de lados de polígonos, animaciones y otras propiedades para ver cómo afectan el resultado final..
Cuando las partículas están lo suficientemente cerca, puede dibujar líneas de conexión entre ellas habilitando la line_linked propiedad.
Esta propiedad tiene cuatro valores adicionales. los distancia La propiedad especifica la distancia máxima hasta la cual se dibujarán las líneas. También puede configurar el color como una cadena HEX. La opacidad de las líneas varía en función de la distancia entre las partículas. El valor que usted especifique como opacidad Es la opacidad de las líneas cuando las partículas están muy juntas. Finalmente, anchura Determina qué tan amplias serán tus líneas. Aquí está el fragmento JSON para la demostración adjunta.
"line_linked": "enable": true, "distance": 200, "color": "#fff", "opacity": 1, "width": 4
Puedes ver que las líneas desaparecen tan pronto como la distancia entre las partículas se vuelve más de 200 px.
He tratado de cubrir todo lo que necesita saber para cambiar la forma, el tamaño, el color y casi todas las demás propiedades físicas de las partículas. Los ejemplos en este tutorial ilustran claramente lo fácil que es usar esta biblioteca. Si alguna vez necesita una biblioteca de partículas básica, debería probar Particles.js.
El siguiente tutorial te enseñará cómo controlar el movimiento de las partículas y su interacción entre ellas y contigo. Si tiene alguna pregunta relacionada con este tutorial, deje un comentario..
Accentsconagua