canvas confetti
1.9.3
Catdad.github.io/canvas-confetti
Puede instalar este módulo como componente desde NPM:
npm install --save canvas-confetti Luego puede require('canvas-confetti'); para usarlo en la construcción de su proyecto. Nota: Este es un componente del cliente y no se ejecutará en el nodo. Deberá crear su proyecto con algo como Webpack para usar esto.
También puede incluir esta biblioteca en su página HTML directamente desde un CDN:
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js " > </ script >Nota: Debe usar la última versión en el momento en que incluye su proyecto. Puede ver todas las versiones en la página de versiones.
Gracias por acompañarme en este mensaje muy importante sobre Motion en su sitio web. Mira, no a todos les gusta, y algunos en realidad no prefieren ningún movimiento. Tienen formas de contarnos al respecto y deberíamos escuchar. Si bien no quiero ir tan lejos como para decirle que no tenga confeti en su página todavía, quiero que sea fácil para usted respetar lo que sus usuarios quieren. Existe una opción disableForReducedMotion que puede usar para que los usuarios que tengan problemas con las animaciones caóticas no necesiten luchar en su sitio web. Esto está deshabilitado de forma predeterminada, pero estoy considerando cambiar eso en una futura lanzamiento importante. Si tienes sentimientos fuertes sobre esto, hágamelo saber. Por ahora, por favor confetici de manera responsable.
Cuando se instala desde npm , esta biblioteca se puede requerir como componente del cliente en la compilación de su proyecto. Al usar la versión CDN, se expone como una función confetti en window .
confetti([options {Object}]) → Promise|null confetti toma un solo objeto opcional. Cuando window.Promise esté disponible, le devolverá una promesa informarle cuándo está hecho. Cuando no hay promesas disponibles (como en IE), devolverá null . Puede pololear las promesas utilizando cualquiera de los polyfills populares. También puede proporcionar una implementación de promesa para confetti a través de:
const MyPromise = require ( 'some-promise-lib' ) ;
const confetti = require ( 'canvas-confetti' ) ;
confetti . Promise = MyPromise ; Si llama confetti varias veces antes de que se haga, devolverá la misma promesa cada vez. Internamente, el mismo elemento de lienzo se reutilizará, continuando la animación existente con el nuevo confeti agregado. La promesa devuelta por cada llamada a confetti se resolverá una vez que se realicen todas las animaciones.
options El parámetro confetti es un objeto options opcionales únicas, que tiene las siguientes propiedades:
particleCount Integer (predeterminado: 50) : el número de confeti para lanzar. Más siempre es divertido ... pero sé genial, hay muchas matemáticas involucradas.angle (predeterminado: 90) : el ángulo para lanzar el confeti, en grados. 90 es directo.spread (predeterminado: 45): qué tan lejos puede ir el centro de confeti, en grados. 45 significa que el confeti se lanzará en el angle definido más o menos 22.5 grados.startVelocity (predeterminado: 45): qué tan rápido comenzará el confeti, en píxeles.decay (predeterminado: 0.9): qué tan rápido el confeti perderá la velocidad. Mantenga este número entre 0 y 1, de lo contrario, el confeti ganará velocidad. Mejor aún, nunca lo cambie.gravity (predeterminado: 1): qué tan rápido se reducen las partículas. 1 es una gravedad completa, 0.5 es media gravedad, etc., pero no hay límites. Incluso puede hacer que las partículas suban si lo desea.drift (predeterminado: 0): cuánto al lado se deriva el confeti. El valor predeterminado es 0, lo que significa que caerán directamente. Use un número negativo para el número izquierdo y positivo para la derecha.flat Boolean (predeterminado: falso) : opcionalmente apaga la inclinación y el bamboleo que tendría confeti tridimensional en el mundo real. Sí, se ven un poco tristes, pero todos los pidieron, así que no me culpen.ticks (predeterminado: 200) : cuántas veces se moverá el confeti. Esto es abstracto ... pero juega con él si el confeti desaparece demasiado rápido para ti.origin : de dónde comenzar a disparar confeti. Siéntase libre de lanzar fuera de la pantalla si lo desea.origin.x número (predeterminado: 0.5) : la posición x en la página, siendo 0 el borde izquierdo y 1 es el borde derecho.origin.y número (predeterminado: 0.5) : la posición y en la página, siendo 0 el borde superior y 1 es el borde inferior.colors Array <String> : una matriz de cadenas de color, en el formato hexadecimal ... ya sabes, como #bada55 .shapes <String | Shape> : una matriz de formas para el confeti. Hay 3 valores incorporados de square , circle y star . El valor predeterminado es usar cuadrados y círculos en una mezcla uniforme. Para usar una sola forma, puede proporcionar solo una forma en la matriz, como ['star'] . También puede cambiar la mezcla proporcionando un valor como ['circle', 'circle', 'square'] para usar dos terceros círculos y un tercio cuadrados. También puede crear sus propias formas utilizando los métodos confetti.shapeFromPath o confetti.shapeFromText Helper.scalar (predeterminado: 1): factor de escala para cada partícula de confeti. Use decimales para que el confeti sea más pequeño. Continúa, prueba un pequeño confeti, ¡son adorables!zIndex Integer (predeterminado: 100) : El confeti debe estar en la cima, después de todo. Pero si tienes una página alta loca, puedes configurarla aún más.disableForReducedMotion boolean (predeterminado: falso) : deshabilita por completo para los usuarios que prefieren el movimiento reducido. La promesa confetti() se resolverá inmediatamente en este caso.confetti.shapeFromPath({ path, matrix? }) → ShapeEste método de ayuda le permite crear una forma de confeti personalizada utilizando una cadena de ruta SVG. Cualquier ruta válida debería funcionar, aunque hay algunas advertencias:
canvas-confetti .Path2D , que realmente debería ser todo el principal navegador en este momento. Este método devolverá una Shape : en realidad es solo un objeto simple con algunas propiedades, pero shhh ... fingiremos que es una forma. Pase este objeto Shape a la matriz shapes directamente.
Como ejemplo, así es como podrías hacer un confeti de triángulo:
var triangle = confetti . shapeFromPath ( { path : 'M0 10 L5 0 L10 10z' } ) ;
confetti ( {
shapes : [ triangle ]
} ) ;confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → Shape¡Esta es la característica muy esperada para representar el confeti emoji! Use cualquier emoji unicode estándar. U otro texto, pero ... tal vez no use otro texto.
Si bien cualquier texto debería funcionar, hay algunas advertencias:
scalar para escalar su confeti, use el mismo valor scalar aquí al crear la forma. Esto se asegurará de que el confeti no esté borrosa.Las opciones para este método son:
Object options :String text : el texto se representará como un confeti. Si no puedes decidir, sugiero "?".Number, optional, default: 1 scalar , opcional, predeterminado: 1: un valor de escala relativo al tamaño predeterminado. Coincide con el valor scalar en las opciones de confeti.String, optional, default: #000000 color , opcional, predeterminado: #000000: el color utilizado para representar el texto.fontFamily String, optional, default: native emoji : el nombre de la familia de fuentes para usar al renderizar el texto. El valor predeterminado sigue las mejores prácticas para representar el emoji del sistema operativo nativo del dispositivo, recurriendo a sans-serif . Si usa una fuente web, asegúrese de que esta fuente esté cargada antes de representar su confeti. var scalar = 2 ;
var pineapple = confetti . shapeFromText ( { text : '?' , scalar } ) ;
confetti ( {
shapes : [ pineapple ] ,
scalar
} ) ;confetti.create(canvas, [globalOptions]) → function Este método crea una instancia de la función confetti que utiliza un lienzo personalizado. Esto es útil si desea limitar el área en su página en la que aparecen confeti. Por defecto, este método no modificará el lienzo de ninguna manera (que no sea dibujarlo).
Sin embargo, el lienzo se puede malinterpretar un poco, así que permítanme explicar por qué es posible que desee dejar que el módulo modifique el lienzo un poco un poco. Por defecto, un canvas es una imagen relativamente pequeña, en algún lugar alrededor de 300x150, dependiendo del navegador. Cuando lo cambia de tamaño con CSS, esto establece el tamaño de la pantalla del lienzo, pero no la imagen que se representa en ese lienzo. Piense en ello como cargar una imagen JPEG 300x150 en una etiqueta img y luego configurar el CSS para esa etiqueta a 1500x600 ; su imagen terminará estirada y borrosa. En el caso de un lienzo, también debe establecer el ancho y la altura de la imagen de lienzo en sí. Si no desea hacer eso, puede permitir que confetti lo establezca.
Tenga en cuenta también que debe persistir la instancia personalizada y evitar inicializar una instancia de confeti con el mismo elemento de lienzo más de una vez.
Las siguientes opciones globales están disponibles:
resize el tamaño de Boolean (predeterminado: falso) : si debe permitir configurar el tamaño de la imagen del lienzo, así como mantenerlo de tamaño correcto si la ventana cambia de tamaño (por ejemplo, cambiar el tamaño de la ventana, girar un dispositivo móvil, etc.). Por defecto, el tamaño del lienzo no se modificará.useWorker Boolean (predeterminado: falso) : si se debe usar un trabajador web asíncrono para representar la animación de confeti, siempre que sea posible. Esto se desactiva por defecto, lo que significa que la animación siempre se ejecutará en el hilo principal. Si se enciende y el navegador lo admite, la animación se ejecutará fuera del hilo principal para que no esté bloqueando ningún otro trabajo que su página debe hacer. El uso de esta opción también modificará el lienzo, pero más sobre eso directamente a continuación: léelo. Si no es compatible con el navegador, este valor será ignorado.disableForReducedMotion boolean (predeterminado: falso) : deshabilita por completo para los usuarios que prefieren el movimiento reducido. Cuando se establece en True, el uso de esta instancia de confeti siempre respetará la solicitud de un usuario de movimiento reducido y desactivará confeti para ellos. IMPORTANTE: Si usa useWorker: true , ahora soy dueño de su lienzo. Es mío ahora y puedo hacer lo que quiera con él (no te preocupes ... solo pondré confeti dentro de él, lo prometo). No debe intentar usar el lienzo de ninguna manera (aparte de que supongo que eliminarlo del DOM), ya que lanzará un error. Al usar trabajadores para representar, el control del lienzo debe transferirse al trabajador web, evitando cualquier uso de ese lienzo en el hilo principal. Si debe manipular el lienzo de alguna manera, no use esta opción.
var myCanvas = document . createElement ( 'canvas' ) ;
document . body . appendChild ( myCanvas ) ;
var myConfetti = confetti . create ( myCanvas , {
resize : true ,
useWorker : true
} ) ;
myConfetti ( {
particleCount : 100 ,
spread : 160
// any other options from the global
// confetti function
} ) ;confetti.reset() Detiene la animación y borra todos los confeti, así como de inmediato resuelve cualquier promesa pendiente. En el caso de una instancia de confeti separada creada con confetti.create , esa instancia tendrá su propio método reset .
confetti ( ) ;
setTimeout ( ( ) => {
confetti . reset ( ) ;
} , 100 ) ; var myCanvas = document . createElement ( 'canvas' ) ;
document . body . appendChild ( myCanvas ) ;
var myConfetti = confetti . create ( myCanvas , { resize : true } ) ;
myConfetti ( ) ;
setTimeout ( ( ) => {
myConfetti . reset ( ) ;
} , 100 ) ; Inicie algunos confeti de la manera predeterminada:
confetti ( ) ;Lanza un montón de confeti:
confetti ( {
particleCount : 150
} ) ;Lanza algunos confeti realmente amplios:
confetti ( {
spread : 180
} ) ;Ser creativo. Lanza un pequeño poof de confeti desde una parte aleatoria de la página:
confetti ( {
particleCount : 100 ,
startVelocity : 30 ,
spread : 360 ,
origin : {
x : Math . random ( ) ,
// since they fall down, start a bit higher than random
y : Math . random ( ) - 0.2
}
} ) ; Dije creativo ... podemos hacerlo mejor. Dado que no importa cuántas veces llamamos confetti (solo el número total de confeti en el aire), podemos hacer algunas cosas divertidas, como lanzar continuamente más y más confeti durante 30 segundos, desde múltiples direcciones:
// do this for 30 seconds
var duration = 30 * 1000 ;
var end = Date . now ( ) + duration ;
( function frame ( ) {
// launch a few confetti from the left edge
confetti ( {
particleCount : 7 ,
angle : 60 ,
spread : 55 ,
origin : { x : 0 }
} ) ;
// and launch a few from the right edge
confetti ( {
particleCount : 7 ,
angle : 120 ,
spread : 55 ,
origin : { x : 1 }
} ) ;
// keep going until we are out of time
if ( Date . now ( ) < end ) {
requestAnimationFrame ( frame ) ;
}
} ( ) ) ;
