canvas confetti
1.9.3
catdad.github.io/Canvas-Confetti
Você pode instalar este módulo como um componente do NPM:
npm install --save canvas-confetti Você pode então require('canvas-confetti'); para usá -lo em seu projeto Build. Nota: Este é um componente do cliente e não será executado no nó. Você precisará criar seu projeto com algo como o WebPack para usar isso.
Você também pode incluir esta biblioteca em sua página HTML diretamente de uma CDN:
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js " > </ script >Nota: você deve usar a versão mais recente no momento em que inclui seu projeto. Você pode ver todas as versões na página de lançamentos.
Obrigado por se juntar a mim nesta mensagem muito importante sobre movimento em seu site. Veja, nem todo mundo gosta, e alguns realmente preferem nenhum movimento. Eles têm maneiras de nos contar sobre isso e devemos ouvir. Embora eu não queira ir tão longe quanto dizer para que você ainda não tenha confetes na sua página, quero facilitar o que você respeita o que seus usuários desejam. Existe uma opção disableForReducedMotion que você pode usar para que os usuários que tenham problemas com animações caóticas não precisam lutar no seu site. Isso é desativado por padrão, mas estou pensando em alterar isso em uma versão futura futura. Se você tem sentimentos fortes sobre isso, por favor me avise. Por enquanto, por favor, contete com responsabilidade.
Quando instalado a partir npm , essa biblioteca pode ser necessária como um componente cliente em seu projeto. Ao usar a versão CDN, ela é exposta como uma função confetti na window .
confetti([options {Object}]) → Promise|null confetti leva um único objeto opcional. Quando window.Promise estiver disponível, ele retornará uma promessa de informar quando for feito. Quando as promessas não estiverem disponíveis (como no IE), ele retornará null . Você pode prometer o Polyfill usando qualquer um dos poli -preenchimentos populares. Você também pode fornecer uma implementação de promessa para confetti por meio de:
const MyPromise = require ( 'some-promise-lib' ) ;
const confetti = require ( 'canvas-confetti' ) ;
confetti . Promise = MyPromise ; Se você ligar confetti várias vezes antes de ser feito, ele retornará a mesma promessa todas as vezes. Internamente, o mesmo elemento de tela será reutilizado, continuando a animação existente com os novos confetes adicionados. A promessa devolvida por cada chamada para confetti será resolvida assim que todas as animações forem feitas.
options O parâmetro confetti é um único objeto options opcionais, que possui as seguintes propriedades:
particleCount (Padrão: 50) : o número de confetes para iniciar. Mais é sempre divertido ... mas seja legal, há muita matemática envolvida.angle (Padrão: 90) : O ângulo para iniciar o confete, em graus. 90 é direto.spread (Padrão: 45) : A que distância o centro dos confetes pode ir, em graus. 45 significa que o confete será lançado no angle definido mais ou menos 22,5 graus.startVelocity (Padrão: 45) : Com que rapidez o confete começará a ser visto em pixels.decay (Padrão: 0,9): Com que rapidez os confetes perderão velocidade. Mantenha esse número entre 0 e 1, caso contrário, o confete ganhará velocidade. Melhor ainda, apenas nunca mude.gravity (Padrão: 1): Com que rapidez as partículas são puxadas para baixo. 1 é a gravidade total, 0,5 é meia gravidade, etc., mas não há limites. Você pode até fazer as partículas subirem, se quiser.drift (Padrão: 0): Quanto ao lado o confete irá flutuar. O padrão é 0, o que significa que eles cairão diretamente. Use um número negativo para o número esquerdo e positivo para a direita.flat (Padrão: Falso) : Opcionalmente desligar a inclinação e balançar que os confetes tridimensionais teriam no mundo real. Sim, eles parecem um pouco tristes, mas vocês os pediram, então não me culpe.ticks (Padrão: 200) : Quantas vezes o confete se moverá. Isso é abstrato ... mas brinque com ele se os confetes desaparecerem muito rapidamente para você.origin : onde começar a disparar confete. Sinta-se à vontade para lançar a tela, se quiser.origin.x (Padrão: 0.5) : a posição x na página, sendo 0 a borda esquerda e 1 sendo a borda direita.origin.y (Padrão: 0.5) : a posição y na página, sendo 0 a borda superior e 1 sendo a borda inferior.colors <String> : Uma matriz de cordas coloridas, no formato hexadecimal ... você sabe, como #bada55 .shapes <String | Shape> : Uma matriz de formas para os confetes. Existem 3 valores internos de square , circle e star . O padrão é usar quadrados e círculos em uma mistura uniforme. Para usar uma forma única, você pode fornecer apenas uma forma na matriz, como ['star'] . Você também pode alterar o mix, fornecendo um valor como ['circle', 'circle', 'square'] para usar dois terceiros círculos e um terceiro quadrado. Você também pode criar suas próprias formas usando os métodos Helper confetti.shapeFromPath ou confetti.shapeFromText .scalar (padrão: 1): fator de escala para cada partícula de confete. Use decimais para diminuir os confetes. Vá em frente, tente minúsculos confetes, eles são adoráveis!zIndex (Padrão: 100) : O confete deve estar no topo, afinal. Mas se você tiver uma página alta louca, poderá defini -la ainda mais.disableForReducedMotion boolean (padrão: false) : desativa os confetes inteiramente para usuários que preferem movimento reduzido. A promessa confetti() resolverá imediatamente neste caso.confetti.shapeFromPath({ path, matrix? }) → ShapeEste método auxiliar permite criar uma forma de confete personalizada usando uma string de caminho SVG. Qualquer caminho válido deve funcionar, embora haja algumas advertências:
canvas-confetti .Path2D , que realmente deve ser todo o principal navegador neste momento. Esse método retornará uma Shape - é realmente apenas um objeto simples com algumas propriedades, mas shhh ... fingiremos que é uma forma. Passe esse objeto Shape para a matriz shapes diretamente.
Como exemplo, aqui está como você pode fazer um triângulo de confete:
var triangle = confetti . shapeFromPath ( { path : 'M0 10 L5 0 L10 10z' } ) ;
confetti ( {
shapes : [ triangle ]
} ) ;confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → ShapeEste é o recurso altamente antecipado para renderizar o emoji confetti! Use qualquer emoji unicode padrão. Ou outro texto, mas ... talvez não use outro texto.
Embora qualquer texto funcione, existem algumas advertências:
scalar para dimensionar seu confete, use o mesmo valor scalar aqui ao criar a forma. Isso garantirá que os confetes não estejam embaçados.As opções para este método são:
Object options :String text : o texto a ser renderizado como um confete. Se você não consegue se decidir, sugiro "?".Number, optional, default: 1 scalar , opcional, padrão: 1: Um valor de escala em relação ao tamanho padrão. Ele corresponde ao valor scalar nas opções de confete.color String, optional, default: #000000 : a cor usada para renderizar o texto.fontFamily String, optional, default: native emoji : o nome da família da fonte para usar ao renderizar o texto. O padrão segue as práticas recomendadas para rendimento do emoji nativo do sistema operacional do dispositivo, voltando ao sans-serif . Se estiver usando uma fonte da web, verifique se esta fonte está carregada antes de renderizar seu confete. var scalar = 2 ;
var pineapple = confetti . shapeFromText ( { text : '?' , scalar } ) ;
confetti ( {
shapes : [ pineapple ] ,
scalar
} ) ;confetti.create(canvas, [globalOptions]) → function Este método cria uma instância da função confetti que usa uma tela personalizada. Isso é útil se você deseja limitar a área em sua página em que os confetes aparecem. Por padrão, esse método não modificará a tela de forma alguma (além de desenhar para ele).
A tela pode ser incompreendida um pouco, por isso, deixe -me explicar por que você pode deixar o módulo modificar a tela um pouco. Por padrão, uma canvas é uma imagem relativamente pequena - em torno de 300x150, dependendo do navegador. Quando você o redimensiona usando CSS, isso define o tamanho da tela da tela, mas não a imagem que está sendo representada nessa tela. Pense nisso como carregando uma imagem JPEG de 300x150 em uma tag img e, em seguida, configurando o CSS para essa tag para 1500x600 - sua imagem acabará esticada e embaçada. No caso de uma tela, você também precisa definir a largura e a altura da própria imagem da tela. Se você não quiser fazer isso, pode permitir que confetti o defina para você.
Observe também que você deve persistir a instância personalizada e evitar a inicialização de uma instância de confete com o mesmo elemento de tela mais de uma vez.
As seguintes opções globais estão disponíveis:
resize booleano (padrão: false) : Se deve permitir a definição do tamanho da imagem da tela, bem como mantenha -o corretamente se a janela mudar de tamanho (por exemplo, redimensionando a janela, girando um dispositivo móvel etc.). Por padrão, o tamanho da tela não será modificado.useWorker Boolean (Padrão: false) : se deve usar um trabalhador da web assíncrono para renderizar a animação de confete, sempre que possível. Isso é desligado por padrão, o que significa que a animação sempre será executada no thread principal. Se ativado e o navegador suporta, a animação será executada no thread principal, para que não esteja bloqueando nenhum outro trabalho que sua página precise fazer. O uso dessa opção também modificará a tela, mas mais sobre isso diretamente abaixo - leia -a. Se não for suportado pelo navegador, esse valor será ignorado.disableForReducedMotion boolean (padrão: false) : desativa os confetes inteiramente para usuários que preferem movimento reduzido. Quando definido como true, o uso dessa instância de confete sempre respeitará a solicitação de um usuário de movimento reduzido e desativará os confetes para eles. IMPORTANTE: Se você usar useWorker: true , eu possuo sua tela agora. É meu agora e posso fazer o que eu quiser com ele (não se preocupe ... vou colocar confete dentro, prometo). Você não deve tentar usar a tela de forma alguma (exceto que eu acho que a removendo do DOM), pois ele apresentará um erro. Ao usar os trabalhadores para renderização, o controle da tela deve ser transferido para o trabalhador da web, impedindo qualquer uso dessa tela no tópico principal. Se você precisar manipular a tela de alguma forma, não use esta opção.
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() Pare a animação e limpa todos os confetes, além de resolver imediatamente quaisquer promessas pendentes. No caso de uma instância de confete separada criada com confetti.create , essa instância terá seu próprio 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 alguns confetes da maneira padrão:
confetti ( ) ;Inicie um monte de confete:
confetti ( {
particleCount : 150
} ) ;Inicie alguns confetes realmente largos:
confetti ( {
spread : 180
} ) ;Seja criativo. Inicie um pequeno poof de confete a partir de uma parte aleatória da 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
}
} ) ; Eu disse criativo ... podemos fazer melhor. Como não importa quantas vezes chamamos confetti (apenas o número total de confetes no ar), podemos fazer algumas coisas divertidas, como lançar continuamente cada vez mais confetes por 30 segundos, a partir de várias direções:
// 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 ) ;
}
} ( ) ) ;
