Une bibliothèque d’animation de confettis frontend utile

 (github.com/catdad)
5 points par GN⁺ 2024-04-26 | 1 commentaires | Partager sur WhatsApp

  • Méthodes d’installation

    • Installation possible comme module via NPM 
      npm install --save canvas-confetti
    • Utilisable dans un projet avec require('canvas-confetti')
    • Comme il s’agit d’un composant côté client, cela ne fonctionne pas dans Node. Il faut builder le projet avec webpack ou équivalent
    • Peut être inclus directement dans une page HTML via un CDN 
      <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/…;
    • Lors de l’intégration au projet, il est recommandé d’utiliser la dernière version depuis la page des releases

  • Mode de réduction des animations

    • Certains utilisateurs n’apprécient pas les animations, il faut donc en tenir compte
    • L’option disableForReducedMotion permet de prendre en compte les utilisateurs qui ne souhaitent pas d’animations perturbantes
    • Désactivé par défaut pour le moment, mais la valeur par défaut devrait changer dans une prochaine major release

API

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

    • Prend un seul objet d’options en paramètre
    • Retourne une Promise si window.Promise est disponible, sinon retourne null (par exemple sur IE)
    • Il est possible de fournir une implémentation de Promise via un polyfill ou confetti.Promise
    • Si confetti est appelé plusieurs fois avant la fin, la même Promise est renvoyée. Le même élément canvas est réutilisé en interne
    • Quand toutes les animations sont terminées, la Promise renvoyée par chaque appel est résolue
    • Principales propriétés de l’objet options
      • particleCount, angle, spread, startVelocity, decay, gravity, drift, ticks, origin, colors, shapes, scalar, zIndex etc.

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

    • Crée une forme de confetti personnalisée à partir d’une chaîne SVG Path
    • Seule la couleur unie est prise en charge, le Stroke n’est pas implémenté
    • Une matrice de transformation est nécessaire. Elle peut être fournie directement ou calculée avec un helper
    • Limité aux navigateurs prenant en charge Path2D
    • Retourne un objet Shape

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

    • Fonction pour le rendu de confettis en emoji
    • Il est recommandé d’utiliser un seul caractère, en particulier un emoji
    • Le texte étant rastérisé, il ne convient pas bien à un redimensionnement après création
    • En cas de redimensionnement avec scalar, il faut utiliser ici la même valeur
    • Options text, scalar, color, fontFamily

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

    • Crée une instance de la fonction confetti utilisant un canvas personnalisé
    • Permet de limiter la taille du canvas
    • Options globales
      • resize : définit la taille de l’image du canvas et indique si elle doit être conservée lors du redimensionnement de la fenêtre
      • useWorker : indique s’il faut utiliser un Web Worker asynchrone pour le rendu lorsque c’est possible
      • disableForReducedMotion : indique s’il faut désactiver complètement les confettis pour les utilisateurs en mode de réduction des animations
    • Points d’attention avec useWorker: true
      • Il ne faut pas manipuler directement le canvas. Le contrôle est transféré au Web Worker

  • confetti.reset()

    • Arrête l’animation et supprime tous les confettis
    • Résout immédiatement les Promises encore en attente
    • Les instances créées avec confetti.create disposent de leur propre méthode reset

Exemples d’utilisation

  • Utilisation de base

    confetti();

  • Utiliser beaucoup de confettis

    confetti({
  particleCount: 150
});

  • Les disperser largement

    confetti({
  spread: 180
});

  • Petit tir depuis une position aléatoire

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

  • Tir continu depuis plusieurs directions pendant 30 secondes

    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);
  }
}());

Avis de GN⁺

  • canvas-confetti semble être une bibliothèque légère permettant d’appliquer facilement un effet de confettis sur une page web. L’installation via NPM comme via CDN est prise en charge, ce qui paraît très pratique pour les développeurs.

  • La bibliothèque prend en charge de nombreux réglages de l’effet de confettis, ce qui lui donne une grande flexibilité. Il semble possible d’ajuster librement le nombre de confettis, leur dispersion, leur taille, leur forme ou encore leurs couleurs pour créer différentes ambiances.

  • Il est intéressant de pouvoir créer aussi des confettis personnalisés à partir de texte ou de chemins SVG. Les confettis utilisant des emoji semblent être une idée particulièrement amusante.

  • L’utilisation de Web Worker pour exécuter l’animation sans bloquer le thread principal semble également être un avantage. En contrepartie, le contrôle direct du canvas devient impossible.

  • Le support d’un mode de réduction des animations pour les utilisateurs sensibles au mouvement est un point positif du point de vue de l’accessibilité web. Il faut noter que ce mode devrait être activé par défaut dans une future version.

  • Globalement, la bibliothèque semble facile à utiliser et propose de nombreuses options. Elle paraît bien adaptée aux pages de célébration ou aux jeux nécessitant une ambiance légère et festive. Un usage excessif peut toutefois nuire à l’expérience utilisateur, il semble donc préférable de l’utiliser avec modération.

À lire aussi

1 commentaires

 
GN⁺ 2024-04-26
Avis Hacker News
  • L’astuce pour obtenir une animation performante consiste à dessiner sur un canvas, à placer ce canvas devant tous les autres éléments, puis à désactiver les événements de pointeur sur le canvas afin de pouvoir continuer à interagir avec la page
  • Je garde le souvenir des bons moments passés à faire du développement web au lycée, en 2015. J’avais créé une animation de confettis sur un petit site web pour inviter une fille au bal de promo (avec le recul, ça fait un peu nerd). Il fut un temps où créer des sites web donnait l’impression d’avoir un superpouvoir quand on était jeune
  • J’adore les petits projets faits juste pour le plaisir. C’est la raison pour laquelle j’ai commencé à programmer, et c’est toujours ce qui me motive
  • Sur la page de démo, si on passe le nombre de particules à environ 400, on peut voir un spectacle décevant où les confettis prennent la forme uniforme d’un « cône plat ». C’est trop parfait, et ça casse l’illusion
  • Il est rare de voir ce genre d’attention au détail dans le monde, que ce soit dans les visualisations statistiques, les accessoires de cinéma ou les confettis sur les sites web, donc je l’apprécie partout où je la trouve
  • Je suppose que la distribution réelle serait proche d’une gaussienne, et qu’une bonne solution serait de modifier directement la distribution aléatoire
  • Ce n’est pas seulement une bibliothèque cool et utile, c’est aussi un bon exemple de « module profond » dont parle John Ousterhout dans A Philosophy of Software Design
  • La version la plus basique de la bibliothèque (faire apparaître des confettis) est très simple à utiliser, mais on peut en tirer beaucoup en explorant les options proposées (neige, couleurs spécifiques, différents effets de confettis, etc.)
  • J’ai ajouté un effet de confettis lors d’une vente sur le tableau de bord d’administration de commerciaux, et c’était étonnamment agréable et motivant
  • C’est impressionnant et sympa, mais je n’ai pas envie de voir ça s’exécuter sur les sites web que j’utilise. En particulier, je ne veux pas de confettis à l’apparition d’une popup de newsletter ou quand j’ajoute un produit au panier
  • J’aimerais que la fonction de réinitialisation s’appelle confetti.resetti()
  • J’avais créé une animation similaire il y a quelques années dans le cadre d’un produit. Le flux affichait une animation de confettis lorsqu’un nouvel utilisateur s’inscrivait puis utilisait le produit pour créer pour la première fois un certain résultat. Les chefs de produit trouvaient ça amusant et rafraîchissant, au point de le montrer fièrement aux dirigeants, mais après des revues UX et des tests d’accessibilité, cela a finalement été retiré du produit. C’était amusant à montrer en démo, mais cela pouvait être agaçant pour les utilisateurs
  • Il existe aussi la bibliothèque Party.js : https://party.js.org/
  • Je me souviens de la sensation incroyable quand nous avions ajouté un effet de neige sur un site e-commerce vers 2005. Cela montre le chemin parcouru (à certains égards !)