canvas confetti
1.9.3
catdad.github.io/canvas-confetti
このモジュールは、NPMからコンポーネントとしてインストールできます。
npm install --save canvas-confettiその後、 require('canvas-confetti');プロジェクトビルドで使用します。注：これはクライアントコンポーネントであり、ノードで実行されません。これを使用するには、Webpackのようなものでプロジェクトを構築する必要があります。
このライブラリをCDNから直接HTMLページに含めることもできます。
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js " > </ script >注：プロジェクトを含める時点で最新バージョンを使用する必要があります。リリースページですべてのバージョンを確認できます。
あなたのウェブサイトでの動きについてのこの非常に重要なメッセージに参加してくれてありがとう。誰もがそれを好むわけではなく、実際には動きを好まない人もいます。彼らはそれについて私たちに話す方法を持っています、そして私たちは聞くべきです。私はあなたのページにまだ紙吹雪を持っていないように言ってもらいたくありませんが、私はあなたのユーザーが望むものを尊重することを簡単にしたいと思っています。使用できるdisableForReducedMotionオプションがあり、カオスアニメーションに問題があるユーザーがWebサイトで苦労する必要がないようにします。これはデフォルトで無効になっていますが、将来の主要なリリースでそれを変更することを検討しています。あなたがこれについて強い感情を持っているなら、私に知らせてください。とりあえず、責任を持って告白してください。
npmからインストールすると、このライブラリはプロジェクトビルドのクライアントコンポーネントとして必要になります。 CDNバージョンを使用する場合、 windowでconfetti機能として公開されます。
confetti([options {Object}]) → Promise|null confetti 、単一のオプションのオブジェクトを取ります。 window.Promiseが利用可能になると、いつ行われたかをお知らせするという約束が返されます。約束が利用できない場合（IEのように）、 nullを返します。人気のあるポリフィルを使用して、約束をポリフィルすることができます。また、以下を介してconfettiに約束の実装を提供することもできます。
const MyPromise = require ( 'some-promise-lib' ) ;
const confetti = require ( 'canvas-confetti' ) ;
confetti . Promise = MyPromise ; confettiが完了する前に複数回電話すると、毎回同じ約束を返します。内部的には、同じキャンバス要素が再利用され、新しい紙吹雪が追加された既存のアニメーションが継続されます。 confettiへの各呼び出しによって返される約束は、すべてのアニメーションが完了すると解決します。
options confettiパラメーターは、次のプロパティを備えた単一のオプションoptionsオブジェクトです。
particleCount Integer（デフォルト：50） ：起動する紙吹雪の数。もっと楽しいです...しかし、かっこいい、たくさんの数学が関係しています。angle番号（デフォルト：90） ：紙吹雪を発射する角度、程度で。 90はまっすぐです。spread番号（デフォルト：45） ：紙吹雪がどのくらい離れているのか、程度に行くことができます。 45は、紙吹雪が定義されたangleプラスまたはマイナス22.5度で打ち上げられることを意味します。startVelocity Number（デフォルト：45） ：ピクセルで紙吹雪がどれだけ速く進むか。decay番号（デフォルト：0.9） ：紙吹雪が速度を失う速さ。この数値を0〜1の間に保持します。そうしないと、紙吹雪が速度を上げます。さらに良いことに、決して変更しないでください。gravity数（デフォルト：1） ：粒子がどれだけ速く引き下げられるか。 1は完全な重力、0.5は半分重力などですが、制限はありません。必要に応じて、粒子を上げることもできます。drift番号（デフォルト：0） ：紙吹雪がドリフトする側にいくら。デフォルトは0です。つまり、それらはまっすぐに落ちることを意味します。左に負の数と右に正の数を使用します。flatブール（デフォルト：false） ：オプションで、3次元の紙吹雪が現実の世界に持つ傾向とぐらつきをオフにします。ええ、彼らは少し悲しそうに見えますが、すべてを求めたので、私を責めないでください。ticks数（デフォルト：200） ：紙吹雪の数。これは抽象的です...しかし、紙吹雪があなたのためにあまりにも早く消えてしまうならば、それで遊んでください。origin Object ：紙吹雪の発射場所から。必要に応じて、お気軽に画面を起動してください。origin.x番号（デフォルト：0.5） ：ページ上のx位置、 0は左端、 1右端です。origin.y番号（デフォルト：0.5） ：ページ上のy位置、 0は最上端、 1ボトムエッジです。colors array <string> ：16進形式の色文字列の配列... #bada55のように。shapes Array <String | Shape> ：紙吹雪の形状の配列。 square 、 circle 、 starの3つの組み込み値があります。デフォルトは、均一なミックスで正方形と円の両方を使用することです。単一の形状を使用するには、 ['star']など、配列に1つの形状だけを提供できます。 ['circle', 'circle', 'square']などの値を提供して、2つの3番目の円と3つの正方形を使用することで、ミックスを変更することもできます。また、 confetti.shapeFromPathまたはconfetti.shapeFromTextヘルパーメソッドを使用して、独自の形状を作成することもできます。scalar番号（デフォルト：1） ：各紙吹雪粒子のスケール係数。デシマルを使用して、紙吹雪を小さくします。続けて、小さな紙吹雪を試してみてください、彼らは愛らしいです！zIndex Integer（デフォルト：100） ：結局のところ、紙吹雪はトップになります。しかし、クレイジーなハイページがある場合は、さらに高く設定できます。disableForReducedMotion Boolean（デフォルト：FALSE） ：モーションの減少を好むユーザーのために紙吹雪を完全に無効にします。この場合、 confetti()約束はすぐに解決します。confetti.shapeFromPath({ path, matrix? }) → Shapeこのヘルパーメソッドを使用すると、SVGパス文字列を使用してカスタム紙吹雪形を作成できます。有効なパスは機能するはずですが、いくつかの注意事項があります。
canvas-confettiライブラリを更新する場合、マトリックスを再生成して再キャッシュすることをお勧めします。Path2Dをサポートするブラウザに限定されています。これは、この時点で実際にすべて主要なブラウザになるはずです。この方法はShapeを返します - それは本当にいくつかのプロパティを備えた単なるオブジェクトですが、shhh ...私たちはそれが形のふりをします。このShapeオブジェクトを直接shapesアレイに渡します。
例として、これがあなたが三角紙吹雪を行う方法です：
var triangle = confetti . shapeFromPath ( { path : 'M0 10 L5 0 L10 10z' } ) ;
confetti ( {
shapes : [ triangle ]
} ) ;confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → Shapeこれは、絵文字の紙吹雪をレンダリングするための非常に期待される機能です！標準のユニコード絵文字を使用します。または他のテキストですが、...他のテキストを使用しないでください。
どんなテキストでも機能するはずですが、いくつかの注意事項があります。
scalar値を使用して紙吹雪をスケーリングする場合は、形状を作成するときに同じscalar値をここで使用します。これにより、紙吹雪がぼやけていないことを確認します。この方法のオプションは次のとおりです。
options Object ：text String ：紙吹雪としてレンダリングされるテキスト。決心できない場合は、「？」を提案します。scalar Number, optional, default: 1 ：デフォルトサイズに対するスケール値。紙吹雪オプションのscalar値と一致します。color String, optional, default: #000000 ：テキストのレンダリングに使用される色。fontFamily String, optional, default: native emoji ：テキストをレンダリングするときに使用するフォントファミリ名。デフォルトは、デバイスのネイティブOS絵文字をsans-serifに戻すためのベストプラクティスに従います。 Webフォントを使用する場合は、紙吹雪をレンダリングする前に、このフォントがロードされていることを確認してください。 var scalar = 2 ;
var pineapple = confetti . shapeFromText ( { text : '?' , scalar } ) ;
confetti ( {
shapes : [ pineapple ] ,
scalar
} ) ;confetti.create(canvas, [globalOptions]) → functionこの方法は、カスタムキャンバスを使用するconfetti関数のインスタンスを作成します。これは、紙吹雪が表示されるページ上の領域を制限する場合に役立ちます。デフォルトでは、この方法では、キャンバスをどのような方法でも変更しません（描画以外）。
キャンバスは少し誤解される可能性があるので、モジュールにキャンバスを少し変更させたい理由を説明させてください。デフォルトでは、 canvasは比較的小さな画像です。ブラウザに応じて、約300x150です。 CSSを使用してサイズを変更すると、キャンバスの表示サイズが設定されますが、そのキャンバスで表される画像は設定されません。 imgタグに300x150 JPEG画像をロードし、そのタグのCSSを1500x600に設定すると考えてください。画像は伸びてぼやけます。キャンバスの場合、キャンバス画像自体の幅と高さも設定する必要があります。あなたがそれをしたくない場合は、 confettiあなたのためにそれを設定できるようにすることができます。
また、カスタムインスタンスを維持し、同じキャンバス要素を使用して紙吹雪のインスタンスの初期化を避ける必要があることに注意してください。
次のグローバルオプションが利用可能です。
resize BOOLEAN（デフォルト：FALSE） ：キャンバスの画像サイズの設定を許可するかどうか、ウィンドウがサイズが変更された場合（たとえば、ウィンドウのサイズ変更、モバイルデバイスの回転など）、正しくサイズに保つかどうか。デフォルトでは、キャンバスサイズは変更されません。useWorker Boolean（デフォルト：FALSE） ：非同期Webワーカーを使用して、可能な限り紙吹雪アニメーションをレンダリングするかどうか。これはデフォルトでオフになります。つまり、アニメーションは常にメインスレッドで実行されます。オンになってブラウザがサポートすると、アニメーションはメインスレッドから実行され、ページが必要な他の作業をブロックしないようにします。このオプションを使用すると、キャンバスも変更されますが、その詳細については、読んでください。ブラウザによってサポートされていない場合、この値は無視されます。disableForReducedMotion Boolean（デフォルト：FALSE） ：モーションの減少を好むユーザーのために紙吹雪を完全に無効にします。 Trueに設定すると、この紙吹雪インスタンスの使用は、常に動きの減少に対するユーザーの要求を尊重し、紙吹雪を無効にします。重要： useWorker: true 、私はあなたのキャンバスを今所有しています。それは今私のものであり、私はそれでやりたいことは何でもできます（心配しないでください...私はただその中に紙吹雪を入れます、私は約束します）。エラーが発生するため、キャンバスをどのような方法でも使用しようとしてはいけません（DOMから削除することを除いて）。レンダリングにワーカーを使用する場合、キャンバスの制御をWebワーカーに転送し、メインスレッドでそのキャンバスの使用を防ぐ必要があります。キャンバスを何らかの形で操作する必要がある場合は、このオプションを使用しないでください。
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()アニメーションを停止し、すべての紙吹雪をクリアし、顕著な約束をすぐに解決します。 confetti.createで作成された別の紙吹雪インスタンスの場合、そのインスタンスには独自の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 ) ; いくつかの紙吹雪を起動しますデフォルトの方法：
confetti ( ) ;紙吹雪の束を立ち上げる：
confetti ( {
particleCount : 150
} ) ;いくつかの紙吹雪を本当に広く発射します：
confetti ( {
spread : 180
} ) ;創造的になりましょう。ページのランダムな部分から紙吹雪の小さなプーフを起動します。
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
}
} ) ;私はクリエイティブと言いました...私たちはより良いことができます。 confetti （空中の紙吹雪の総数）と何回呼ぶかは関係ないので、複数の方向から30秒間紙吹雪を継続的に発射するなど、いくつかの楽しいことをすることができます。
// 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 ) ;
}
} ( ) ) ;
