canvas confetti
1.9.3
catdad.github.io/canvas-confetti
Sie können dieses Modul als Komponente von NPM installieren:
npm install --save canvas-confetti Sie können dann require('canvas-confetti'); Um es in Ihrem Projektbau zu verwenden. Hinweis: Dies ist eine Client -Komponente und wird nicht im Knoten ausgeführt. Sie müssen Ihr Projekt mit so etwas wie Webpack erstellen, um dies zu verwenden.
Sie können diese Bibliothek auch direkt von einem CDN in Ihre HTML -Seite einbeziehen:
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js " > </ script >Hinweis: Sie sollten die neueste Version zum Zeitpunkt der Einbeziehung Ihres Projekts verwenden. Sie können alle Versionen auf der Seite "Releases" sehen.
Vielen Dank, dass Sie sich mir in dieser sehr wichtigen Nachricht über Bewegung auf Ihrer Website angeschlossen haben. Sehen Sie, nicht jeder mag es, und einige bevorzugen tatsächlich keine Bewegung. Sie haben Möglichkeiten, uns davon zu erzählen, und wir sollten zuhören. Obwohl ich nicht so weit gehen möchte, dass Sie Ihnen noch keine Konfetti auf Ihrer Seite haben, möchte ich es Ihnen leicht erleichtern, zu respektieren, was Ihre Benutzer wollen. Es gibt eine disableForReducedMotion Option, die Sie verwenden können, damit Benutzer, die Probleme mit chaotischen Animationen haben, auf Ihrer Website nicht kämpfen müssen. Dies ist standardmäßig deaktiviert, aber ich überlege, dies in einer zukünftigen großen Veröffentlichung zu ändern. Wenn Sie starke Gefühle dazu haben, lassen Sie es mich bitte wissen. Fürs Erste bitte Confetti verantwortungsbewusst.
Bei der Installation von npm kann diese Bibliothek als Client -Komponente in Ihrem Projektbau erforderlich sein. Bei Verwendung der CDN -Version wird sie als confetti -Funktion im window freigelegt.
confetti([options {Object}]) → Promise|null confetti nimmt ein einzelnes optionales Objekt. Wenn window.Promise verfügbar ist, wird ein Versprechen zurückgegeben, Sie wissen zu lassen, wann dies erledigt ist. Wenn Versprechungen nicht verfügbar sind (wie im IE), wird null zurückgegeben. Sie können Versprechen mit einer der beliebten Polyfills mit Polyfillungen versprechen. Sie können confetti auch eine Implementierung für Versprechen geben:
const MyPromise = require ( 'some-promise-lib' ) ;
const confetti = require ( 'canvas-confetti' ) ;
confetti . Promise = MyPromise ; Wenn Sie confetti mehrmals anrufen, bevor es fertig ist, wird dies jedes Mal das gleiche Versprechen zurückgeben. Intern wird das gleiche Canvas -Element wiederverwendet und setzt die vorhandene Animation mit dem neuen Konfetti fort. Das durch jeden Anruf an confetti zurückgegebene Versprechen wird sich lösen, sobald alle Animationen durchgeführt werden.
options Der confetti -Parameter ist ein einzelnes optionales options , das die folgenden Eigenschaften enthält:
particleCount Integer (Standard: 50) : Die Anzahl der Konfetti -Startungen. Mehr macht immer Spaß ... aber sei cool, es ist viel Mathematik beteiligt.angle (Standard: 90) : Der Winkel, um die Konfetti in Grad zu starten. 90 ist gerade hoch.spread (Standard: 45) : Wie weit von der Mitte von der Konfetti in Grad gehen kann. 45 bedeutet, dass der Konfetti im definierten angle plus oder minus 22,5 Grad startet.startVelocity -Nummer (Standard: 45) : Wie schnell wird der Konfetti in Pixel beginnen.decay (Standard: 0,9) : Wie schnell wird der Konfetti die Geschwindigkeit verlieren. Halten Sie diese Zahl zwischen 0 und 1, andernfalls erhält der Konfetti die Geschwindigkeit. Besser noch, ändere es einfach nie.gravity (Standard: 1) : Wie schnell die Partikel heruntergezogen werden. 1 ist die volle Schwerkraft, 0,5 ist eine halbe Schwerkraft usw., aber es gibt keine Grenzen. Sie können sogar Partikel aufsteigen lassen, wenn Sie möchten.drift (Standard: 0) : Wie viel an der Seite wird der Konfetti driften. Die Standardeinstellung ist 0, was bedeutet, dass sie direkt nach unten fallen. Verwenden Sie eine negative Zahl für die linke und positive Zahl für rechts.flat Boolean (Standard: Falsch) : Optional schalten Sie die Neigung aus und wackeln, dass dreidimensionale Konfetti in der realen Welt hätten. Ja, sie sehen ein bisschen traurig aus, aber Sie haben nach ihnen gefragt, also beschuldigen Sie mich nicht.ticks (Standard: 200) : Wie oft wird sich die Konfetti bewegen. Dies ist abstrakt ... aber spielen Sie damit, wenn die Konfetti für Sie zu schnell verschwinden.origin -Objekt : Woher Sie anfangen, Konfetti abzufeuern. Fühlen Sie sich frei, außerhalb des Bildschirms zu starten, wenn Sie möchten.origin.x -Nummer (Standard: 0,5) : Die x -Position auf der Seite, wobei 0 die linke Kante und 1 die rechte Kante ist.origin.y -Nummer (Standard: 0,5) : Die y -Position auf der Seite, wobei 0 die obere Kante und 1 die untere Kante ist.colors Array <Sking> : Ein Array von Farbketten im Hex -Format ... Sie wissen, wie #bada55 .shapes <String | Form> : Ein Array von Formen für die Konfetti. Es gibt 3 eingebaute Werte von square , circle und star . Die Standardeinstellung besteht darin, sowohl Quadrate als auch Kreise in einer gleichmäßigen Mischung zu verwenden. Um eine einzelne Form zu verwenden, können Sie nur eine Form im Array bereitstellen, wie z. B. ['star'] . Sie können den Mix auch ändern, indem Sie einen Wert wie ['circle', 'circle', 'square'] bereitstellen, um zwei dritte Kreise und ein drittes Quadrate zu verwenden. Sie können auch Ihre eigenen Formen mit den Methoden confetti.shapeFromPath oder confetti.shapeFromText -Helfer erstellen.scalar (Standard: 1) : Skalierungsfaktor für jedes Konfetti -Partikel. Verwenden Sie Dezimalstellen, um die Konfetti kleiner zu machen. Fahren Sie weiter, probieren Sie Teeny Tiny Confetti, sie sind bezaubernd!zIndex Integer (Standard: 100) : Der Konfetti sollte schließlich oben sein. Aber wenn Sie eine verrückte hohe Seite haben, können Sie sie noch höher einstellen.disableForReducedMotion boolean (Standard: Falsch) : Deaktiviert Konfetti vollständig für Benutzer, die reduzierte Bewegungen bevorzugen. Das Versprechen von confetti() wird in diesem Fall sofort entschlossen.confetti.shapeFromPath({ path, matrix? }) → ShapeMit dieser Helfer -Methode können Sie mit einer SVG -Pfadzeichenfolge eine benutzerdefinierte Konfetti -Form erstellen. Jeder gültige Pfad sollte funktionieren, obwohl es einige Einschränkungen gibt:
canvas-confetti -Bibliothek aktualisieren.Path2D unterstützen, was zu diesem Zeitpunkt wirklich ein großer Browser sein sollte. Diese Methode gibt eine Shape zurück - es ist wirklich nur ein einfaches Objekt mit einigen Eigenschaften, aber Shhh ... wir werden so tun, als wäre es eine Form. Geben Sie dieses Shape direkt in das shapes -Array.
Als Beispiel können Sie ein Triangle Confetti machen:
var triangle = confetti . shapeFromPath ( { path : 'M0 10 L5 0 L10 10z' } ) ;
confetti ( {
shapes : [ triangle ]
} ) ;confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → ShapeDies ist das mit Spannung erwartete Merkmal, um Emoji Confetti zu rendern! Verwenden Sie alle Standard -Unicode -Emoji. Oder einen anderen Text, aber ... vielleicht keinen anderen Text verwenden.
Während ein Text funktionieren sollte, gibt es einige Vorbehalte:
scalar Wert zu verwenden, um Ihre Konfetti zu skalieren, verwenden Sie hier denselben scalar Wert beim Erstellen der Form. Dies wird sicherstellen, dass die Konfetti nicht verschwommen sind.Die Optionen für diese Methode sind:
options Objecttext : Der Text, String als Konfetti gerendert wird. Wenn Sie sich nicht entscheiden können, schlage ich vor "?".scalar Number, optional, default: 1 : Ein Skalierungswert relativ zur Standardgröße. Es entspricht dem scalar Wert in den Konfetti -Optionen.color String, optional, default: #000000 : Die Farbe, die zum Rendern des Textes verwendet wird.fontFamily String, optional, default: native emoji : Der Schriftfamilienname, der beim Rendern des Textes verwendet wird. Die Standardeinstellung folgt den Best Practices für die Wiedergabe des nativen Betriebssystem-Emoji des Geräts und fällt auf sans-serif zurück. Wenn Sie eine Web -Schriftart verwenden, stellen Sie sicher, dass diese Schriftart geladen wird, bevor Sie Ihre Konfetti rendern. var scalar = 2 ;
var pineapple = confetti . shapeFromText ( { text : '?' , scalar } ) ;
confetti ( {
shapes : [ pineapple ] ,
scalar
} ) ;confetti.create(canvas, [globalOptions]) → function Diese Methode erstellt eine Instanz der confetti -Funktion, die eine benutzerdefinierte Leinwand verwendet. Dies ist nützlich, wenn Sie den Bereich auf Ihrer Seite begrenzen möchten, in dem Confetti erscheinen. Standardmäßig ändert diese Methode die Leinwand in keiner Weise (abgesehen davon, als sie zu zeichnen).
Leinwand kann jedoch ein wenig missverstanden werden. Lassen Sie mich also erklären, warum Sie das Modul möglicherweise nur ein wenig verändern möchten. Standardmäßig ist eine canvas ein relativ kleines Bild - je nach Browser etwa 300 x 1550. Wenn Sie es mit CSS ändern, wird die Anzeigegröße der Leinwand festgelegt, aber nicht das Bild, das auf dieser Leinwand dargestellt wird. Betrachten Sie es als das Laden eines 300x150 -JPEG -Bildes in einem img -Tag und setzen Sie das CSS für dieses Tag auf 1500x600 ein - Ihr Bild wird gestreckt und verschwommen. Bei einer Leinwand müssen Sie auch die Breite und Höhe des Leinwandbildes selbst einstellen. Wenn Sie das nicht tun möchten, können Sie es confetti für Sie einstellen.
Beachten Sie auch, dass Sie die benutzerdefinierte Instanz bestehen und vermeiden sollten, eine Instanz von Konfetti mit demselben Canvas -Element mehr als einmal zu initialisieren.
Die folgenden globalen Optionen sind verfügbar:
resize (Standard: Falsch) : Ob das Einstellen der Canvas -Bildgröße zulässt und die Größe des Fensters korrekt ist (z. B. die Größe des Fensters, das Drehen eines mobilen Geräts usw.). Standardmäßig wird die Leinwandgröße nicht geändert.useWorker Boolean (Standard: Falsch) : Ob Sie einen asynchronen Webarbeiter verwenden möchten, um die Konfetti -Animation nach Möglichkeit zu rendern. Dies wird standardmäßig deaktiviert, was bedeutet, dass die Animation immer im Haupt Thread ausgeführt wird. Wenn eingeschaltet und der Browser es unterstützt, wird die Animation aus dem Haupt -Thread ausgeführt, sodass sie keine andere Arbeit blockiert, die Ihre Seite erledigen muss. Wenn Sie diese Option verwenden, wird auch die Leinwand geändert, aber mehr dazu direkt unten - lesen Sie sie. Wenn der Browser nicht unterstützt wird, wird dieser Wert ignoriert.disableForReducedMotion boolean (Standard: Falsch) : Deaktiviert Konfetti vollständig für Benutzer, die reduzierte Bewegungen bevorzugen. Wenn Sie auf True gesetzt sind, wird die Verwendung dieser Konfetti -Instanz die Anfrage eines Benutzers nach reduziertem Bewegungsantrag immer respektieren und Konfetti für sie deaktivieren. WICHTIG: Wenn Sie useWorker: true , ich besitze jetzt Ihre Leinwand. Es ist jetzt meins und ich kann damit tun, was ich will (keine Sorge ... ich werde nur Konfetti hineinlegen, das verspreche ich). Sie dürfen nicht versuchen, die Leinwand in irgendeiner Weise zu verwenden (abgesehen davon, dass sie sie aus dem DOM entfernen), da es einen Fehler macht. Bei der Verwendung von Arbeitern zum Rendern muss die Kontrolle über die Leinwand an den Webarbeiter übertragen werden, wodurch die Verwendung dieser Leinwand auf dem Hauptfaden verhindern wird. Wenn Sie die Leinwand in irgendeiner Weise manipulieren müssen, verwenden Sie diese Option nicht.
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() Stoppt die Animation und löscht alle Konfetti sowie sofort alle herausragenden Versprechen. Bei einer separaten Konfetti -Instanz, die mit confetti.create erstellt wurde, wird diese Instanz eine eigene reset -Methode haben.
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 ) ; Starten Sie einige Konfetti auf die Standardweise:
confetti ( ) ;Starten Sie ein paar Konfetti:
confetti ( {
particleCount : 150
} ) ;Starten Sie einige Konfetti wirklich breit:
confetti ( {
spread : 180
} ) ;Kreativ werden. Starten Sie einen kleinen Poof von Konfetti von einem zufälligen Teil der Seite:
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
}
} ) ; Ich sagte kreativ ... wir können es besser machen. Da es keine Rolle spielt, wie oft wir confetti (nur die Gesamtzahl der Konfetti in der Luft) nennen, können wir einige lustige Dinge tun, wie kontinuierlich mehr und mehr Konfetti für 30 Sekunden aus mehreren Richtungen:
// 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 ) ;
}
} ( ) ) ;
