Biblioteca útil de animação de confete para frontend

 (github.com/catdad)
5 pontos por GN⁺ 2024-04-26 | 1 comentários | Compartilhar no WhatsApp

  • Como instalar

    • Pode ser instalada como módulo via NPM 
      npm install --save canvas-confetti
    • Pode ser usada no projeto com require('canvas-confetti')
    • Como é um componente de cliente, não funciona no Node. É preciso fazer o build do projeto com webpack ou equivalente
    • Também pode ser incluída diretamente em uma página HTML via CDN 
      <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/…;
    • Ao incluir no projeto, é recomendado usar a versão mais recente da página de releases

  • Modo de redução de animação

    • Alguns usuários não gostam de movimento, então isso deve ser levado em conta
    • Com a opção disableForReducedMotion, é possível considerar usuários que não querem animações que possam causar desconforto
    • Vem desativado por padrão, mas o valor padrão deve mudar em uma futura major release

API

  • confetti([options {Object}]) → Promise|null

    • Recebe um único objeto de opções como parâmetro
    • Se window.Promise estiver disponível, retorna uma Promise; caso contrário (como no IE), retorna null
    • É possível fornecer uma implementação de Promise via polyfill ou confetti.Promise
    • Se confetti for chamado várias vezes antes de terminar, retorna a mesma Promise. Internamente, o mesmo elemento canvas é reutilizado
    • Quando todas as animações terminarem, a Promise retornada em cada chamada será resolvida
    • Principais propriedades do objeto options
      • particleCount, angle, spread, startVelocity, decay, gravity, drift, ticks, origin, colors, shapes, scalar, zIndex etc.

  • confetti.shapeFromPath({ path, matrix? }) → Shape

    • Cria formas de confete personalizadas usando uma string SVG Path
    • Suporta apenas cor sólida, e Stroke ainda não foi implementado
    • Requer uma matriz de transformação. Ela pode ser passada diretamente ou calculada com um helper
    • Limitado a navegadores com suporte a Path2D
    • Retorna um objeto Shape

  • confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → Shape

    • Recurso para renderizar confete com emoji
    • É recomendado usar um único caractere, especialmente emoji
    • Como o texto é rasterizado, não é adequado redimensionar depois de criado
    • Ao ajustar o tamanho com scalar, é necessário usar o mesmo valor aqui também
    • Opções: text, scalar, color, fontFamily

  • confetti.create(canvas, [globalOptions]) → function

    • Cria uma instância da função confetti usando um canvas personalizado
    • Permite limitar o tamanho do canvas
    • Opções globais
      • resize : define o tamanho da imagem do canvas e se ele deve ser mantido ao redimensionar a janela
      • useWorker : define se a renderização deve usar um Web Worker assíncrono quando possível
      • disableForReducedMotion : define se o confete deve ser totalmente desativado para usuários com modo de redução de animação
    • Cuidados ao usar useWorker: true
      • O canvas não deve ser manipulado diretamente. O controle é transferido para o Web Worker

  • confetti.reset()

    • Interrompe a animação e remove todo o confete
    • Resolve imediatamente Promises ainda pendentes
    • Instâncias criadas com confetti.create têm seu próprio método reset

Exemplos de uso

  • Uso básico

    confetti();

  • Usando muito confete

    confetti({
  particleCount: 150
});

  • Espalhar bem aberto

    confetti({
  spread: 180
});

  • Disparar uma pequena quantidade de uma posição aleatória

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

  • Disparar continuamente de várias direções por 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ão do GN⁺

  • canvas-confetti parece ser uma biblioteca leve que permite aplicar facilmente efeitos de confete em páginas web. Como suporta tanto instalação via NPM quanto uso por CDN, parece bastante conveniente para desenvolvedores.

  • Ela oferece várias configurações para o efeito de confete, o que lhe dá bastante flexibilidade. É possível ajustar livremente quantidade de confete, dispersão, tamanho, forma, cor etc., permitindo criar diferentes atmosferas.

  • Também é interessante que seja possível criar confetes com formas personalizadas usando texto ou SVG Path. Em especial, a ideia de usar emojis como confete parece divertida.

  • O fato de poder usar Web Worker para executar a animação sem bloquear a thread principal também parece ser uma vantagem. Por outro lado, há o trade-off de não poder controlar o canvas diretamente nesse caso.

  • Do ponto de vista de acessibilidade web, é positivo haver suporte a modo de redução de movimento para considerar usuários sensíveis a animações. Vale observar que, em versões futuras, esse modo deverá vir ativado por padrão.

  • No geral, parece ser uma biblioteca fácil de usar e com várias opções. Deve ser adequada para páginas de comemoração, jogos e outros contextos que peçam uma atmosfera mais descontraída. Ainda assim, usar em excesso pode prejudicar a experiência do usuário, então parece recomendável aplicar com moderação.

Leituras relacionadas

1 comentários

 
GN⁺ 2024-04-26
Opiniões do Hacker News
  • O truque para uma animação com bom desempenho é desenhar no canvas e colocá-lo à frente de todos os outros elementos, mas desativar os eventos de ponteiro no canvas para que seja possível interagir com a página
  • Tenho lembranças de como me divertia fazendo desenvolvimento web no ensino médio em 2015. Fiz uma animação de confete em um pequeno site para convidar uma garota para o baile de boas-vindas (olhando agora, parece meio nerd). Houve uma época em que criar sites quando criança parecia um superpoder
  • Adoro pequenos projetos feitos puramente por diversão. Foi por isso que comecei a programar, e isso continua sendo meu motor até hoje
  • Na página de demonstração, se você mudar o número de partículas para algo em torno de 400, verá a cena decepcionante em que o confete parece um "cone plano" uniforme. Isso parece perfeito demais e quebra a ilusão
  • Esse tipo de atenção aos detalhes é raro no mundo, seja em visualização estatística, adereços de filmes ou confete em sites, e eu valorizo isso sempre que encontro
  • Suspeito que a distribuição real se aproxime de uma gaussiana, e a solução talvez seja alterar diretamente a distribuição aleatória
  • Além de ser uma biblioteca legal e útil, também é um bom exemplo de "módulo profundo", como John Ousterhout descreve em 'A Philosophy of Software Design'
  • A versão mais básica da biblioteca (disparar confete) é muito fácil de usar, mas dá para obter bastante explorando as opções apresentadas (neve, cores específicas, vários efeitos de confete etc.)
  • Adicionei um efeito de confete ao dashboard dos gerentes de vendedores quando uma venda é feita e, surpreendentemente, isso é divertido e motivador
  • Embora seja impressionante e legal, não quero ver isso sendo executado nos sites que uso. Especialmente não quero confete ao abrir um popup de newsletter ou ao adicionar um item ao carrinho
  • Eu queria que a função de reset se chamasse confetti.resetti()
  • Alguns anos atrás, fiz uma animação parecida como parte de um produto. Era um fluxo em que uma animação de confete aparecia quando um novo usuário se cadastrava e usava o produto pela primeira vez para criar um determinado resultado. Os gerentes de produto acharam isso divertido e refrescante e exibiram isso para os executivos, mas depois de revisões de UX e testes de acessibilidade, acabou sendo removido do produto. Era divertido para mostrar em demos, mas pode ser irritante para os usuários
  • Também existe a biblioteca Party.js: https://party.js.org/
  • Lembro da sensação incrível de quando coloquei um efeito de neve caindo em um site de comércio eletrônico por volta de 2005. Isso mostra o quanto evoluímos (em certos aspectos!)