Útil biblioteca de animaciones de confetti para frontend

(github.com/catdad)

5 puntos por GN⁺ 2024-04-26 | 1 comentarios | Compartir por WhatsApp

Cómo instalar
- Se puede instalar como módulo mediante NPM
```
npm install --save canvas-confetti
```
- Se puede usar en el proyecto con require('canvas-confetti')
- Como es un componente del cliente, no funciona en Node. Hay que compilar el proyecto usando webpack o algo similar
- Se puede incluir directamente en una página HTML mediante CDN
```
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/…;
```
- Al incluirlo en un proyecto, se recomienda usar la versión más reciente desde la página de releases
Modo de reducción de animaciones
- Algunas personas usuarias prefieren evitar el movimiento, así que hay que tenerlo en cuenta
- Con la opción disableForReducedMotion se puede considerar a quienes no quieren animaciones que resulten molestas o confusas
- Está desactivado por defecto, pero se planea cambiar ese valor predeterminado en un próximo major release

API

confetti([options {Object}]) → Promise|null
- Recibe un único objeto de opciones como parámetro
- Si window.Promise está disponible, devuelve un Promise; si no lo está (por ejemplo, en IE), devuelve null
- Es posible proporcionar una implementación de Promise mediante un polyfill o con confetti.Promise
- Si se llama a confetti varias veces antes de que termine, devuelve el mismo Promise. Internamente reutiliza el mismo elemento canvas
- Cuando todas las animaciones terminan, se resuelve el Promise devuelto en cada llamada
- Principales propiedades del objeto options
  - particleCount, angle, spread, startVelocity, decay, gravity, drift, ticks, origin, colors, shapes, scalar, zIndex, etc.
confetti.shapeFromPath({ path, matrix? }) → Shape
- Crea una forma de confetti personalizada usando una cadena SVG Path
- Solo admite color sólido y el soporte para stroke no está implementado
- Requiere una matriz de transformación. Se puede pasar directamente o calcular con un helper
- Está limitado a navegadores que soporten Path2D
- Devuelve un objeto Shape
confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → Shape
- Función para renderizar confetti con emoji
- Se recomienda usar un solo carácter, especialmente un emoji
- Como rasteriza el texto, no es adecuado redimensionarlo después de crearlo
- Si se ajusta el tamaño con scalar, aquí también hay que usar el mismo valor
- Opciones: text, scalar, color, fontFamily
confetti.create(canvas, [globalOptions]) → function
- Crea una instancia de la función confetti que usa un canvas personalizado
- Permite limitar el tamaño del canvas
- Opciones globales
  - resize: establece el tamaño de imagen del canvas y si debe mantenerse al cambiar el tamaño de la ventana
  - useWorker: indica si se debe usar un Web Worker asíncrono para renderizar cuando sea posible
  - disableForReducedMotion: si se debe desactivar por completo el confetti para quienes usan modo de reducción de animaciones
- Consideraciones al usar useWorker: true
  - No se debe manipular el canvas directamente. El control se transfiere al Web Worker
confetti.reset()
- Detiene la animación y elimina todo el confetti
- Resuelve de inmediato los Promise pendientes
- Las instancias creadas con confetti.create tienen su propio método reset

Ejemplos de uso

Uso básico
```
confetti();
```
Usar una gran cantidad de confetti
```
confetti({
  particleCount: 150
});  
```
Esparcirlo ampliamente
```
confetti({
  spread: 180
});
```

Lanzar una pequeña cantidad desde una posición aleatoria

confetti({
  particleCount: 100, 
  startVelocity: 30,
  spread: 360,
  origin: { 
    x: Math.random(),  
    y: Math.random() - 0.2
  }
});

Lanzamiento continuo desde varias direcciones durante 30 segundos

var duration = 30 * 1000;
var end = Date.now() + duration;

(function frame() {
  confetti({
    particleCount: 7,
    angle: 60, 
    spread: 55,
    origin: { x: 0 }
  });

  confetti({  
    particleCount: 7,
    angle: 120,
    spread: 55, 
    origin: { x: 1 }
  });

  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());

Opinión de GN⁺

canvas-confetti parece ser una biblioteca ligera que permite aplicar fácilmente efectos de confetti en páginas web. Soporta tanto instalación por NPM como vía CDN, lo que parece ofrecer una buena comodidad para desarrolladores.
Soporta una gran variedad de configuraciones para el efecto de confetti, por lo que ofrece bastante flexibilidad. Se pueden ajustar libremente la cantidad de confetti, el nivel de dispersión, el tamaño, la forma y los colores para lograr distintos ambientes.
Es interesante que también permita crear confetti con formas personalizadas usando texto o rutas SVG. En particular, la idea de usar emoji como confetti parece divertida.
También parece una ventaja que pueda ejecutar la animación usando Web Worker sin bloquear el hilo principal. Eso sí, en ese caso ya no es posible controlar el canvas directamente, así que hay un trade-off.
Desde la perspectiva de accesibilidad web, es positivo que soporte un modo de reducción de animaciones para considerar a personas sensibles al movimiento. Conviene tomar nota de que en versiones futuras este modo estará activado por defecto.
En general, parece una biblioteca fácil de usar y con muchas opciones. Podría ser adecuada para páginas de celebración o juegos donde se quiera transmitir una atmósfera animada. Aun así, un uso excesivo podría perjudicar la experiencia de usuario, por lo que parece recomendable usarla con moderación.

1 comentarios

GN⁺ 2024-04-26

Opiniones de Hacker News

El truco para lograr una animación con buen rendimiento es dibujar en un canvas y poner ese canvas delante de todos los demás elementos, pero desactivar los eventos de puntero en el canvas para poder seguir interactuando con la página
Recuerdo haberla pasado muy bien haciendo desarrollo web en la preparatoria por allá de 2015. Hice una animación de confeti en un pequeño sitio web para invitar a una chica al baile de bienvenida (viéndolo ahora, suena bastante nerd). Hubo una época en la que hacer sitios web de niño se sentía como un superpoder
Me encantan los proyectos pequeños hechos puramente por diversión. Esa es la razón por la que empecé a programar y sigue siendo lo que me impulsa
Si cambias la cantidad de partículas a unas 400 en la página de demo, puedes ver la decepcionante escena de que el confeti se ve como un "cono plano" uniforme. Se ve demasiado perfecto y rompe la ilusión
Es raro encontrar en el mundo atención a este tipo de detalles, ya sea en visualización estadística, utilería de cine o confeti en sitios web, así que cuando la veo en cualquier parte la valoro mucho
Supongo que la distribución real se aproximaría a una gaussiana, y como solución probablemente sería mejor modificar directamente la distribución aleatoria
No solo es una librería genial y útil, también es un buen ejemplo de un "módulo profundo" del que habla John Ousterhout en 'A Philosophy of Software Design'
La versión más básica de la librería (invocar confeti) es muy fácil de usar, pero puedes sacarle mucho explorando las opciones disponibles (nieve, colores específicos, varios efectos de confeti, etc.)
Agregué un efecto de confeti al panel de administración de los vendedores cuando hacen una venta y, sorprendentemente, resulta divertido y motivador
Aunque es impresionante y genial, no me gustaría verlo ejecutándose en los sitios web que uso. En especial no quiero que salga confeti con un popup del boletín o al agregar productos al carrito
Ojalá la función de reinicio se hubiera llamado confetti.resetti()
Hace unos años hice una animación similar como parte de un producto. El flujo era que cuando un usuario nuevo se registraba y usaba el producto por primera vez para crear cierto resultado, aparecía una animación de confeti. A los gerentes de producto les pareció divertida y novedosa, y se la presumieron a los ejecutivos, pero después de una revisión de UX y pruebas de accesibilidad, al final la quitaron del producto. Era divertida para mostrar en demos, pero podía resultar molesta para los usuarios
También existe la librería Party.js: https://party.js.org/
Recuerdo lo increíble que se sintió cuando agregué un efecto de nieve a un sitio de comercio electrónico por ahí de 2005. Muestra lo lejos que hemos llegado (¡en algunos sentidos!)

Útil biblioteca de animaciones de confetti para frontend

API

Ejemplos de uso

Opinión de GN⁺

Lecturas relacionadas

1 comentarios

Opiniones de Hacker News