Jugando con partículas usando la API de animaciones web | Programar Plus

0

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

En esta publicación, haremos 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 navegadores principales, con la 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ú del 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 posteriores.

Escritorio

Cromo Firefox ES DECIR Borde Safari
84 75 No 84 13,1

Móvil / Tableta

Android Chrome Android Firefox Androide Safari de iOS
96 94 96 13,4-13,7

Si está interesado en reproducir la animación del corazón de Twitter, también puede 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 <button> elemento, pero podría ser otro tipo de elemento de etiqueta. Incluso podríamos escuchar cualquier clic en la página para hacer estallar partículas desde cualquier lugar si realmente quisiéramos.

<button id="button">Click on me</button>

Configuración de CSS

Dado que cada partícula tiene algunas propiedades CSS en común, podemos establecerlas en el CSS global de la página. Como puede crear elementos de etiqueta personalizados en HTML, usaré un <particle> nombre de etiqueta para evitar el uso de etiquetas semánticas. Pero la verdad es que podrías animar <p>, <i> o cualquier etiqueta de su 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 deberían interactuar con el diseño de nuestra página, por lo que estamos configurando un fixed posición con top y left en 0px cada.
  • También estamos eliminando eventos de puntero para evitar cualquier interacción del usuario en las partículas HTML mientras están en la pantalla.

Debido a que el estilo del 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

Aquí están los seis pasos que seguiremos en nuestro JavaScript:

  1. Escuche el evento de clic en el botón
  2. Crear 30 <particle> elementos y añádalos a la <body>
  3. Establecer un aleatorio width, height y background por cada partícula
  4. Animar cada partícula desde la posición del mouse a un lugar aleatorio a medida que se desvanecen
  5. Quitar el <particle> del DOM cuando la animación está completa

Paso 1: el evento de clic

// We first check if the browser supports the Web Animations API
if (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 click
function 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 las partículas

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 comenzar 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: elimine las partículas después de que se complete 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 vuelvan locas. 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

Poner todo junto 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 es compatible con la API de animaciones web. en la mesa de apoyo en la parte superior del poste.

¡Ser creativo!

Debido a que todo esto usa CSS, es bastante simple 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 Zach Saucier hizo en esta publicación.

Un botón con un degradado que explota en partículas.