Cómo crear una animación de rastro de partículas en JavaScript

Las animaciones de partículas pertenecen a las animaciones más impresionantes que existen. En este artículo, Anna Prenzel explicará cómo puedes programar fácilmente un pequeño rastro de partículas con anime.js .

¿Alguna vez ha pensado en distraer a los visitantes de su sitio web con una animación de partículas brillantes y sofisticadas durante unos momentos, mientras se cargan algunos datos en segundo plano? Afortunadamente, no es necesario profundizar mucho en la programación gráfica con bibliotecas 3D como three.js. En cambio, todo lo que necesitas es algunos conocimientos básicos de CSS y JavaScript y una biblioteca de animación ligera como anime.js. Al final deberíamos tener el siguiente resultado :

Descarga e integración de Anime.js

Puedes descargar la biblioteca anime.js desde el sitio oficial de GitHub . Descarga el archivo anime.js o anime.min.js de la lib/carpeta.

En mi ejemplo, la parte HTML se ve así:

!DOCTYPE htmlhtml head  meta charset="UTF-8"  titleAnime.js Particles/title  !--or use anime.min.js--  script src="anime.js"/script  link rel="stylesheet" href="style.css"/headbodydiv/divscript src="script.js"/script/body/html

El archivo CSS style.css define el color de fondo de la página y de las partículas individuales. La configuración de posición es necesaria para que luego podamos posicionar las partículas libremente en la página usando las propiedades CSS lefty top.

body { background-color: hsl(30, 3%, 14%);}.anime-container {  position: relative;} .anime-container .dot{  position: absolute;  /*draw particles as circles:*/  border-radius: 50%;  background-color: hsl(60, 100%, 80%);}

El contenido del archivo script.js se trata en la siguiente sección.

Generando las partículas

Como sugiere el nombre, una animación de partículas consiste en muchas partículas pequeñas que se mueven en el espacio siguiendo un patrón determinado. Todas las partículas se generan simultáneamente antes de que comience la animación.

Para la siguiente explicación, será útil la documentación oficial de anime.js .

En mi ejemplo, las partículas están situadas en una espiral de Arquímedes. La posición xy yde una partícula en la pantalla (también conocida como lefty topen CSS) se calcula a partir de su posición angleen la espiral:

x=a*angle*cos(angle)y=a*angle*sin⁡(angle)

El número de ángulos y, por tanto, la longitud de la espiral está determinado por el parámetro l. Con el parámetro a, puedes controlar la densidad de la espiral.

var container = document.querySelector(".anime-container");var n = 15;var a = 20;var l = 110;for (var i = 0; i = l; i += 1) {  var angle = 0.1 * i;  //shift the particles to the center of the window   //by adding half of the screen width and screen height  var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;  var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;  var dot = document.createElement("div");  dot.classList.add("dot");  container.appendChild(dot);  var size = 5;  dot.style.width = size + "px";  dot.style.height = size + "px";  dot.style.left = x + "px";  dot.style.top = y + "px";  dot.style.backgroundColor = "hsl(60, 100%, 80%)";  }}

De esta manera, obtenemos una espiral con exactamente una partícula por posición, pero un efecto de estela real sólo se puede lograr si se genera más de una partícula en cada posición. Para que el sendero parezca tupido, las posiciones de las partículas individuales deben ser ligeramente diferentes. La biblioteca de anime proporciona una práctica función auxiliar para esto:

anime.random(minValue, maxValue);

El tamaño de las partículas también varía aleatoriamente:

for (var i = 0; i = l; i += 1) {  var angle = 0.1 * i;  //shift particles to the center of the window   //by adding half of the screen width and screen height  var x = (a*angle) * Math.cos(angle) + window.innerWidth / 2;  var y = (a*angle) * Math.sin(angle) + window.innerHeight / 2;  var n = 15;    //create n particles for each angle  for (var j = 0; j  n; j++) {    var dot = document.createElement("div");    dot.classList.add("dot");    container.appendChild(dot);    var size = anime.random(5, 10);     dot.style.width = size + "px";    dot.style.height = size + "px";    dot.style.left = x + anime.random(-15, 15) + "px";    dot.style.top = y + anime.random(-15, 15) + "px";    dot.style.backgroundColor = "hsl(60, 100%, 80%)";  }}

Aquí puedes jugar con el resultado intermedio:

Vea el Pen [anime js partículas wip] (https://codepen.io/smashingmag/pen/JjdqBve) de Anna Prenzel .

Antes de que comience la animación, todas las partículas deben ser invisibles. Entonces agregaré:

dot.style.opacity = "0";

Animación de las partículas

Configuraciones básicas de la animación

La configuración básica de mi animación se compone de la siguiente manera:

• La animación se repetirá continuamente (bucle: verdadero),
• La relajación es lineal (pero puedes probar diferentes valores ),
• Los objetivos son todos elementos con la clase "punto".

anime({  loop: true,  easing: "linear",  targets: document.querySelectorAll(".dot"),});

En el siguiente paso animaré varias propiedades CSS de mis objetivos. Los pasos básicos para la animación CSS se pueden encontrar en el capítulo de propiedades de la documentación de anime.js.

Animación de opacidad

Así es como se ve nuestra primera animación de propiedades, en la que todas las partículas se hacen visibles lentamente en 50 ms:

anime({  loop: true,  easing: "linear",  targets: document.querySelectorAll(".dot"),  opacity: { value: 1, duration: 50}});

¡Y ahora por fin les revelaré el truco que crea un movimiento en espiral de las partículas! La idea es hacer visibles las partículas con un cierto retraso (por ejemplo, en un intervalo de 2 ms). Primero se hacen visibles las partículas en el centro de la espiral, seguidas por todas las demás partículas desde el interior hacia el exterior. La función stagger de anime.js es perfecta para esto. En mi opinión, el asombroso es uno de los mayores puntos fuertes de la biblioteca que permite conseguir grandes efectos.

opacity: { value: 1, duration: 50, delay: anime.stagger(2) }

Para crear la ilusión de una estela de vuelo, las partículas deben empezar a desaparecer lentamente tan pronto como aparecen . Afortunadamente, anime.js proporciona una notación de fotogramas clave para las propiedades :

opacity: [    { value: 1, duration: 50, delay: anime.stagger(2) },    { value: 0, duration: 1200}  ],

Aquí podéis ver el resultado intermedio:

Vea el Pen [anime js partículas wip 2] (https://codepen.io/smashingmag/pen/ZEGNjjv) de Anna Prenzel .

Animación de tamaño

El rastro de mi cometa debería parecer más grande al principio que al final. Para ello, dejo que las partículas se encojan en 500 ms hasta un diámetro de 2 px. Es importante elegir el mismo retardo de tiempo que para la animación de opacidad, de modo que cada partícula comience a reducirse solo después de haber aparecido:

width: { value: 2, duration: 500, delay: anime.stagger(2) },height: { value: 2, duration: 500, delay: anime.stagger(2) },

Movimiento individual de las partículas

Lo típico de una animación de partículas es el comportamiento individual e impredecible de las partículas. Finalmente doy vida a las partículas con un movimiento individual en la dirección xy y:

translateX: {    value: function() {      return anime.random(-30, 30);    },    duration: 1500,    delay: anime.stagger(2)  },translateY: {    value: function() {      return anime.random(-30, 30);    },    duration: 1500,    delay: anime.stagger(2)  }

Nuevamente, es importante que el movimiento comience con el mismo retraso que la aparición de las partículas.

Además, en este caso es absolutamente necesario calcular functionslos valores de translateXy translateY. Aquí utilizamos los parámetros como parámetros basados ​​en funciones cuyos valores se determinan para cada objetivo individualmente . De lo contrario, todos los objetivos se desplazarían en la misma cantidad (aunque determinada al azar).

Pensamientos finales

Puedes ver el resultado final aquí:

Vea el Pen [partículas de anime js] (https://codepen.io/smashingmag/pen/yLNWqRP) de Anna Prenzel .

Puedes modificar la animación a tu gusto simplemente ajustando todos los valores. Tengo un pequeño consejo para los toques finales: ahora que estamos familiarizados con los parámetros basados ​​en funciones, la animación de opacidad se puede mejorar un poco:

opacity: [    { value: 1, duration: 50, delay: anime.stagger(2) },    { value: 0, duration: function(){return anime.random(500,1500);}}],

La duración antes de que una partícula desaparezca ahora se establece para cada partícula individualmente. Esto hace que nuestra animación sea visualmente aún más sofisticada.

¡Espero que ahora estés tan entusiasmado como yo con las posibilidades que ofrece anime.js para animaciones de partículas! Recomiendo una visita a CodePen donde puedes ver muchos más ejemplos impresionantes.

Lecturas adicionales sobre SmashingMag:

• Incluir animación en su sistema de diseño
• Animación de relleno HTML5 SVG con CSS3 y JavaScript Vanilla
• Introducción a la animación y la tienda de aplicaciones iMessage con Shruggie
• Explorando técnicas de animación e interacción con WebGL (un estudio de caso)

(ra, yk, il)Explora más en

• javascript
• Animación