canvas confetti
1.9.3
catdad.github.io/canvas-confetti
Vous pouvez installer ce module en tant que composant de NPM:
npm install --save canvas-confetti Vous pouvez alors require('canvas-confetti'); pour l'utiliser dans votre construction de projet. Remarque: il s'agit d'un composant client et ne s'exécutera pas dans le nœud. Vous devrez créer votre projet avec quelque chose comme WebPack pour l'utiliser.
Vous pouvez également inclure cette bibliothèque dans votre page HTML directement à partir d'un CDN:
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js " > </ script >Remarque: vous devez utiliser la dernière version au moment où vous incluez votre projet. Vous pouvez voir toutes les versions sur la page des versions.
Merci de me rejoindre dans ce message très important sur le mouvement sur votre site Web. Vous voyez, tout le monde ne l'aime pas, et certains ne préfèrent en fait aucun mouvement. Ils ont des moyens de nous en parler et nous devons écouter. Bien que je ne veux pas aller jusqu'à vous dire de ne pas avoir de confettis sur votre page pour l'instant, je veux vous permettre de respecter facilement ce que vos utilisateurs veulent. Il y a une option disableForReducedMotion que vous pouvez utiliser afin que les utilisateurs qui ont des problèmes avec les animations chaotiques n'aient pas besoin de lutter sur votre site Web. Ceci est désactivé par défaut, mais j'envisage de changer cela dans une future version majeure. Si vous avez de forts sentiments à ce sujet, faites-le moi savoir. Pour l'instant, veuillez confetti de manière responsable.
Lorsqu'il est installé à partir de npm , cette bibliothèque peut être requise en tant que composant client dans votre génération de projet. Lors de l'utilisation de la version CDN, il est exposé comme fonction confetti sur window .
confetti([options {Object}]) → Promise|null confetti prend un seul objet facultatif. Lorsque window.Promise est disponible, il renverra une promesse de vous informer quand cela sera fait. Lorsque les promesses ne sont pas disponibles (comme dans IE), il reviendra null . Vous pouvez promettre des promesses en utilisant l'un des polyfills populaires. Vous pouvez également fournir une mise en œuvre de promesses aux confetti à travers:
const MyPromise = require ( 'some-promise-lib' ) ;
const confetti = require ( 'canvas-confetti' ) ;
confetti . Promise = MyPromise ; Si vous appelez confetti plusieurs fois avant qu'il ne soit terminé, il renverra la même promesse à chaque fois. En interne, le même élément Canvas sera réutilisé, poursuivant l'animation existante avec les nouveaux confettis ajoutés. La promesse renvoyée par chaque appel aux confetti résoudra une fois toutes les animations terminées.
options Le paramètre confetti est un seul objet options facultatifs, qui a les propriétés suivantes:
particleCount entier (par défaut: 50) : le nombre de confettis à lancer. Plus c'est toujours amusant ... mais soyez cool, il y a beaucoup de mathématiques impliquées.angle (par défaut: 90) : l'angle dans lequel lancer les confettis, en degrés. 90 est tout droit.spread (par défaut: 45): À quelle distance le centre peut aller, en degrés. 45 signifie que les confettis seront lancés à l' angle défini plus ou moins 22,5 degrés.startVelocity NUMER (par défaut: 45) : à quelle vitesse les confettis commencent à aller, dans Pixels.decay (par défaut: 0,9): à quelle vitesse les confettis perdront la vitesse. Gardez ce nombre entre 0 et 1, sinon les confettis gagneront de la vitesse. Mieux encore, ne le changez jamais.gravity (par défaut: 1): à quelle vitesse les particules sont abaissées. 1 est pleine gravité, 0,5 est la moitié de la gravité, etc., mais il n'y a pas de limites. Vous pouvez même faire monter les particules si vous le souhaitez.drift (par défaut: 0): Combien de côté les confettis dériveront. La valeur par défaut est 0, ce qui signifie qu'ils tomberont directement. Utilisez un nombre négatif pour le nombre gauche et positif pour la droite.flat Boolean (par défaut: false) : éventuellement éteindre l'inclinaison et berceau que les confettis tridimensionnels auraient dans le monde réel. Ouais, ils ont l'air un peu triste, mais vous les avez tous demandé, alors ne me blâmez pas.ticks (par défaut: 200): combien de fois les confettis se déplaceront. C'est abstrait ... mais jouez avec si les confettis disparaissent trop rapidement pour vous.origin : par où commencer à tirer des confettis. N'hésitez pas à lancer hors écran si vous le souhaitez.origin.x (par défaut: 0,5) : la position x sur la page, avec 0 étant le bord gauche et 1 étant le bord droit.origin.y Numéro (par défaut: 0,5) : la position y sur la page, 0 étant le bord supérieur et 1 étant le bord inférieur.colors Array <string> : un tableau de chaînes de couleurs, au format hexadécimal ... vous savez, comme #bada55 .shapes Array <String | Shape> : Un tableau de formes pour les confettis. Il y a 3 valeurs intégrées de square , circle et star . La valeur par défaut consiste à utiliser les carrés et les cercles dans un mélange uniforme. Pour utiliser une seule forme, vous pouvez fournir une seule forme dans le tableau, comme ['star'] . Vous pouvez également modifier le mélange en fournissant une valeur telle que ['circle', 'circle', 'square'] pour utiliser deux troisième cercles et un troisième carrés. Vous pouvez également créer vos propres formes en utilisant les méthodes d'aide confetti.shapeFromPath ou confetti.shapeFromText .scalar (par défaut: 1): facteur d'échelle pour chaque particule de confettis. Utilisez des décimales pour rendre les confettis plus petits. Continuez, essayez de minuscules confettis, ils sont adorables!zIndex Integer (par défaut: 100) : les confettis doivent être en haut, après tout. Mais si vous avez une page haute folle, vous pouvez le régler encore plus haut.disableForReducedMotion Boolean (par défaut: false) : désactive les confettis entièrement pour les utilisateurs qui préfèrent le mouvement réduit. La promesse confetti() se résoudra immédiatement dans ce cas.confetti.shapeFromPath({ path, matrix? }) → ShapeCette méthode d'assistance vous permet de créer une forme de confettis personnalisée à l'aide d'une chaîne de chemin SVG. Tout chemin valide devrait fonctionner, bien qu'il y ait quelques mises en garde:
canvas-confetti .Path2D , qui devraient vraiment être tout le navigateur majeur à ce stade. Cette méthode retournera une Shape - c'est vraiment juste un objet simple avec certaines propriétés, mais shhh ... nous prétendons que c'est une forme. Passez cet objet Shape dans le tableau shapes directement.
Par exemple, voici comment vous pourriez faire un triangle confetti:
var triangle = confetti . shapeFromPath ( { path : 'M0 10 L5 0 L10 10z' } ) ;
confetti ( {
shapes : [ triangle ]
} ) ;confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → ShapeC'est la fonctionnalité très attendue pour rendre les confettis Emoji! Utilisez n'importe quel emoji Unicode standard. Ou un autre texte, mais ... peut-être n'utilisez pas d'autre texte.
Bien que tout texte devrait fonctionner, il y a quelques mises en garde:
scalar pour évoluer vos confettis, utilisez la même valeur scalar ici lors de la création de la forme. Cela s'assurera que les confettis ne sont pas flous.Les options de cette méthode sont:
options Object :String text : le texte à rendre comme confetti. Si vous ne pouvez pas vous décider, je vous suggère "?".Number, optional, default: 1 scalar , facultatif, par défaut: 1: une valeur d'échelle par rapport à la taille par défaut. Il correspond à la valeur scalar dans les options de confettis.color String, optional, default: #000000 : La couleur utilisée pour rendre le texte.fontFamily String, optional, default: native emoji : le nom de famille de police à utiliser lors du rendu du texte. La valeur par défaut suit les meilleures pratiques pour rendre les emoji OS natifs de l'appareil, retombant à sans-serif . Si vous utilisez une police Web, assurez-vous que cette police est chargée avant de rendre vos confettis. var scalar = 2 ;
var pineapple = confetti . shapeFromText ( { text : '?' , scalar } ) ;
confetti ( {
shapes : [ pineapple ] ,
scalar
} ) ;confetti.create(canvas, [globalOptions]) → function Cette méthode crée une instance de la fonction confetti qui utilise une toile personnalisée. Ceci est utile si vous souhaitez limiter la zone sur votre page dans laquelle les confettis apparaissent. Par défaut, cette méthode ne modifiera en aucune façon le canevas (à part le dessin).
La toile peut cependant être mal comprise, alors laissez-moi expliquer pourquoi vous voudrez peut-être laisser le module modifier un peu la toile. Par défaut, une canvas est une image relativement petite - quelque part autour de 300x150, selon le navigateur. Lorsque vous le redimensionnez à l'aide de CSS, cela définit la taille d'affichage de la toile, mais pas l'image représentée sur cette toile. Considérez-le comme le chargement d'une image JPEG 300x150 dans une balise img , puis en définissant le CSS pour cette balise à 1500x600 - votre image finira par étirer et floue. Dans le cas d'une toile, vous devez également définir la largeur et la hauteur de l'image en toile elle-même. Si vous ne voulez pas le faire, vous pouvez autoriser confetti à le définir pour vous.
Notez également que vous devez persister l'instance personnalisée et éviter d'initialiser plus d'une fois une instance de confettis avec le même élément de canevas.
Les options globales suivantes sont disponibles:
resize booléen (par défaut: false) : s'il faut permettre de régler la taille de l'image du canevas, ainsi que de la garder correctement si la fenêtre change la taille (par exemple, redimensionner la fenêtre, faire tourner un appareil mobile, etc.). Par défaut, la taille du canevas ne sera pas modifiée.useWorker boolean (par défaut: false) : s'il faut utiliser un travailleur Web asynchrone pour rendre l'animation de confettis, chaque fois que possible. Ceci est désactivé par défaut, ce qui signifie que l'animation s'exécutera toujours sur le thread principal. S'il est allumé et que le navigateur le prend en charge, l'animation s'exécutera du fil principal afin qu'il ne bloque aucun autre travail que votre page doit faire. L'utilisation de cette option modifiera également le canevas, mais plus à ce sujet directement ci-dessous - lisez-le. S'il n'est pas pris en charge par le navigateur, cette valeur sera ignorée.disableForReducedMotion Boolean (par défaut: false) : désactive les confettis entièrement pour les utilisateurs qui préfèrent le mouvement réduit. Lorsqu'il est défini sur true, l'utilisation de cette instance de confettis respectera toujours la demande d'un utilisateur de mouvement réduit et leur désactiver les confettis. IMPORTANT: Si vous utilisez useWorker: true , je possède votre toile maintenant. C'est à moi maintenant et je peux faire ce que je veux avec (ne vous inquiétez pas ... Je vais juste mettre des confettis à l'intérieur, je le promets). Vous ne devez pas essayer d'utiliser la toile de quelque manière que ce soit (à part je suppose que le retirer du DOM), car il lancera une erreur. Lorsque vous utilisez des travailleurs pour le rendu, le contrôle de la toile doit être transféré au travailleur Web, empêchant toute utilisation de cette toile sur le fil principal. Si vous devez manipuler la toile de quelque manière que ce soit, n'utilisez pas cette option.
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() Arrête l'animation et efface tous les confettis, et résout immédiatement toutes les promesses exceptionnelles. Dans le cas d'une instance de confettis séparée créée avec confetti.create , cette instance aura sa propre méthode 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 ) ; Lancez des confettis la manière par défaut:
confetti ( ) ;Lancez un tas de confettis:
confetti ( {
particleCount : 150
} ) ;Lancez des confettis vraiment larges:
confetti ( {
spread : 180
} ) ;Soyez créatif. Lancez un petit poof de confettis à partir d'une partie aléatoire de la page:
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
}
} ) ; J'ai dit créatif ... nous pouvons faire mieux. Comme cela n'a pas d'importance combien de fois nous appelons confetti (juste le nombre total de confettis dans les airs), nous pouvons faire des choses amusantes, comme lancer en continu de plus en plus de confettis pendant 30 secondes, à partir de plusieurs directions:
// 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 ) ;
}
} ( ) ) ;
