Jugar con partículas usando la API de animaciones web

 

 

 


Índice
  1. Soporte del navegador
  2. configuración HTML
  3. configuración CSS
  4. Configuración de JavaScript
  5. resultado final
  6. ¡Ser creativo!

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

cromo Firefox ES DECIR Borde Safari
84 75 No 84 13.1

Móvil/Tableta

androidcromo Android Firefox androide Safari en iOS
125 126 125 13.4-13.7

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.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Jugar con partículas usando la API de animaciones web

Jugar con partículas usando la API de animaciones web

Soporte del navegadorconfiguración HTMLconfiguración CSSConfiguración de JavaScriptresultado final¡Ser creativo!Tal vez te puede interesar:Índice

programar

es

https://pseint.es/static/images/programar-jugar-con-particulas-usando-la-api-de-animaciones-web-1334-0.jpg

2024-06-13

 

Jugar con partículas usando la API de animaciones web
Jugar con partículas usando la API de animaciones web

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences