Jugar con partículas usando la API de animaciones web

Cuando se trata de movimiento y animaciones, probablemente no haya nada que me guste más que las partículas. Es por eso que cada vez que explora nuevas tecnologías siempre termina creando demostraciones con tantas partículas como puedo.

En esta publicación, crearemos aún más magia de partículas usando la API de animaciones web para crear un efecto de fuegos artificiales al hacer clic en un botón.

Soporte del navegador

En el momento en que escribo este artículo, todos los principales navegadores, con excepción de Safari e Internet Explorer, admiten al menos parcialmente la API de animaciones web. La compatibilidad con Safari se puede habilitar en el menú de desarrollador “Funciones experimentales”.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Móvil/Tableta

Si interesado en reproducir la animación del corazón de Twitter, también puedes echar un vistazo a este interesante artículo de Ana Tudor, que es otro gran ejemplo de explosión de partículas en un botón.

configuración HTML

No necesitaremos mucho HTML para esta demostración. Usaremos un buttonelemento pero podría ser otro tipo de elemento de etiqueta. Incluso podríamos escuchar cualquier clic en la página para hacer que las partículas salten desde cualquier lugar si realmente quisiéramos.

buttonClick on me/button

configuración CSS

Dado que cada partícula tiene algunas propiedades CSS en común, podemos configurarlas en el CSS global de la página. Como puedes crear elementos de etiquetas personalizadas en HTML, usaré un particlenombre de etiqueta para evitar el uso de etiquetas semánticas. Pero la verdad es que puedes animar po icualquier etiqueta de tu elección.

particle {  border-radius: 50%;  left: 0;  pointer-events: none;  position: fixed;  top: 0;}

Un par de cosas a tener en cuenta aquí:

• Las partículas no deben interactuar con el diseño de nuestra página, por lo que establecemos una fixedposición con topy leften 0pxcada una.
• También eliminaremos eventos de puntero para evitar cualquier interacción del usuario con las partículas HTML mientras están en la pantalla.

Debido a que diseño el botón y el diseño de la página no es realmente el propósito de este artículo, lo dejaré a un lado.

Configuración de JavaScript

Estos son los seis pasos que seguiremos en nuestro JavaScript:

1. Escuche el evento de clic en el botón
2. Crea 30 particleelementos y añádelos albody
3. Establecer un azar width, heighty backgroundpara cada partícula
4. Anima cada partícula desde la posición del ratón a un lugar aleatorio a medida que se desvanece.
5. Elimina particleel DOM cuando se complete la animación.

Paso 1: el evento de clic

// We first check if the browser supports the Web Animations APIif (document.body.animate) {  // If yes, we add a click listener on our button  document.querySelector('#button').addEventListener('click', pop);}

Paso 2: Las partículas

// The pop() function is called on every clickfunction pop(e) {   // Loop to generate 30 particles at once  for (let i = 0; i  30; i++) {    // We pass the mouse coordinates to the createParticle() function    createParticle(e.clientX, e.clientY);  }}function createParticle(x, y) {  // Create a custom particle element  const particle = document.createElement('particle');  // Append the element into the body  document.body.appendChild(particle);}

Paso 3: ancho, alto y fondo de la partícula

function createParticle (x, y) {  // [...]  // Calculate a random size from 5px to 25px  const size = Math.floor(Math.random() * 20 + 5);  // Apply the size on each particle  particle.style.width = `${size}px`;  particle.style.height = `${size}px`;  // Generate a random color in a blue/purple palette  particle.style.background = `hsl(${Math.random() * 90 + 180}, 70%, 60%)`;}

Paso 4: anima cada partícula

function createParticle (x, y) {  // [...]  // Generate a random x  y destination within a distance of 75px from the mouse  const destinationX = x + (Math.random() - 0.5) * 2 * 75;  const destinationY = y + (Math.random() - 0.5) * 2 * 75;  // Store the animation in a variable because we will need it later  const animation = particle.animate([    {      // Set the origin position of the particle      // We offset the particle with half its size to center it around the mouse      transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,      opacity: 1    },    {      // We define the final coordinates as the second keyframe      transform: `translate(${destinationX}px, ${destinationY}px)`,      opacity: 0    }  ], {    // Set a random duration from 500 to 1500ms    duration: 500 + Math.random() * 1000,    easing: 'cubic-bezier(0, .9, .57, 1)',    // Delay every particle with a random value from 0ms to 200ms    delay: Math.random() * 200  });}

Debido a que tenemos un retraso aleatorio, las partículas que esperan iniciar su animación son visibles en la parte superior izquierda de la pantalla. Para evitar esto, podemos establecer una opacidad cero en cada partícula en nuestro CSS global.

particle {  /* Same as before */  opacity: 0;}

Paso 5: elimina las partículas una vez completada la animación

Es importante eliminar los elementos de partículas del DOM. Dado que creamos 30 elementos nuevos con cada clic, la memoria del navegador puede llenarse bastante rápido y hacer que las cosas se pongan raras. Así es como podemos hacer eso:

function createParticle (x, y) {  // Same as before  // When the animation is finished, remove the element from the DOM  animation.onfinish = () = {    particle.remove();  };}

resultado final

Juntar todo nos da lo que estamos buscando: una colorida explosión de bondad de partículas.

¿No ves la animación en la demostración? Compruebe si su navegador admite la API de animaciones web. en la mesa de soporte en la parte superior del poste.

¡Ser creativo!

Debido a que todo esto usa CSS, es bastante sencillo modificar los estilos de partículas. Aquí hay cinco ejemplos que utilizan varias formas… ¡e incluso personajes!

O bueno, incluso podemos explotar el botón como lo hizo Zach Saucier en esta publicación.