便利なフロントエンド向け confetti アニメーションライブラリ

 (github.com/catdad)
5 ポイント 投稿者 GN⁺ 2024-04-26 | 1件のコメント | WhatsAppで共有

  • インストール方法

    • NPM 経由でモジュールとしてインストール可能 
      npm install --save canvas-confetti
    • require('canvas-confetti') でプロジェクト内で利用可能
    • クライアントコンポーネントのため Node では動作しない。webpack などを使ってプロジェクトをビルドする必要がある
    • CDN 経由で HTML ページに直接含めることも可能 
      <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/…;
    • プロジェクトに含める際は releases ページの最新版を使うことを推奨

  • アニメーション削減モード

    • 一部のユーザーはモーションを好まないため、その点を考慮する必要がある
    • disableForReducedMotion オプションにより、気が散るアニメーションを望まないユーザーに配慮できる
    • デフォルトでは無効だが、今後のメジャーリリースで既定値が変更される予定

API

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

    • 単一のオプションオブジェクトを引数に取る
    • window.Promise が利用できる場合は Promise を返し、利用できない場合（IE など）は null を返す
    • Polyfill や confetti.Promise を通じて Promise 実装を提供可能
    • 完了前に confetti を複数回呼び出すと同じ Promise を返す。内部的には同じ canvas 要素を再利用する
    • すべてのアニメーションが完了すると、各呼び出しで返された Promise が resolve される
    • options オブジェクトの主なプロパティ
      • particleCount, angle, spread, startVelocity, decay, gravity, drift, ticks, origin, colors, shapes, scalar, zIndex など

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

    • SVG Path 文字列を使ってカスタム confetti 形状を生成
    • 単色のみ対応で、Stroke は未実装
    • 変換行列が必要。直接渡すか helper を使って計算可能
    • Path2D をサポートするブラウザに限定される
    • Shape オブジェクトを返す

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

    • 絵文字 confetti をレンダリングするための機能
    • 単一文字、特に絵文字の使用を推奨
    • テキストはラスタライズされるため、生成後のサイズ変更には向かない
    • scalar でサイズ変更する場合は、ここでも同じ値を使う必要がある
    • text, scalar, color, fontFamily オプション

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

    • カスタム canvas を使う confetti 関数のインスタンスを作成
    • canvas のサイズ制限が可能
    • グローバルオプション
      • resize : canvas の画像サイズを設定し、ウィンドウサイズ変更時にも維持するかどうか
      • useWorker : 可能な場合に非同期 Web Worker を使ってレンダリングするかどうか
      • disableForReducedMotion : アニメーション削減モードのユーザー向けに confetti を完全に無効化するかどうか
    • useWorker: true 使用時の注意事項
      • canvas を直接操作してはいけない。制御権が Web Worker に移される

  • confetti.reset()

    • アニメーションを停止し、すべての confetti を削除
    • 未解決の Promise を即座に resolve する
    • confetti.create で作成したインスタンスは独自の reset メソッドを持つ

使用例

  • 基本的な使い方

    confetti();

  • 大量の confetti を使う

    confetti({
  particleCount: 150
});

  • 大きく拡散させる

    confetti({
  spread: 180
});

  • ランダムな位置から少量を発射

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

  • 30 秒間、複数方向から連続発射

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

GN⁺ の意見

  • canvas-confetti は、Web ページに手軽にコンフェッティ効果を適用できる軽量ライブラリのようです。NPM によるインストールと CDN 方式の両方に対応しており、開発者にとって使いやすそうです。

  • コンフェッティ効果に関するさまざまな設定をサポートしており、柔軟性が高いです。コンフェッティの数、拡散具合、サイズ、形状、色などを自由に調整できるため、さまざまな雰囲気を演出できそうです。

  • テキストや SVG パスを使ってカスタム形状のコンフェッティも作れる点が興味深いです。特に絵文字を活用したコンフェッティは面白いアイデアだと思います。

  • Web Worker を活用してメインスレッドをブロックせずにアニメーションを実行できる点も利点です。ただしこの場合、canvas を直接制御できなくなるため、trade-off があります。

  • アニメーションに敏感な一部のユーザーに配慮してモーション削減モードをサポートしているのは、Web アクセシビリティの観点から好ましいです。今後のバージョンではこのモードがデフォルトで有効になる予定とのことで、確認しておくとよさそうです。

  • 全体として、使いやすく多彩なオプションを備えたライブラリのようです。軽快な雰囲気の演出が必要な祝賀ページやゲームなどに適していそうです。ただし使いすぎるとユーザー体験を損なう可能性があるため、適度な範囲で活用するのが望ましいでしょう。

関連記事

1件のコメント

 
GN⁺ 2024-04-26
Hacker Newsの意見
  • 高性能なアニメーションのコツは、canvas に描画してその canvas を他のすべての要素の前面に置きつつ、canvas 上のポインターイベントを無効化してページと相互作用できるようにすること
  • 2015年に高校生としてWeb開発をしていた頃、楽しい時間を過ごした記憶がある。ホームカミングパーティーに女の子を誘うために、小さなWebサイトに紙吹雪アニメーションを作ったことがある（今思うとオタクっぽい）。子どもの頃は、Webサイトを作ることが超能力のように感じられた時期があった
  • 純粋に楽しむための小さなプロジェクトが大好き。それがプログラミングを始めた理由で、今でも原動力になっている
  • デモページで粒子数を400個ほどに変更すると、紙吹雪が均一な「平たい円錐」の形に見えるという、がっかりする光景を目にできる。あまりに完璧に見えてしまい、幻想が壊れる
  • 統計の可視化、映画の小道具、Webサイトの紙吹雪など、この種のディテールへの関心は世の中では珍しいが、どこかで見つけると大切に思う
  • 実際の分布はガウス分布に近似するのではないかと推測しており、解決策としては乱数分布そのものを変更するのがよさそう
  • クールで便利なライブラリであるだけでなく、John Ousterhout が『A Philosophy of Software Design』で述べている「ディープモジュール」の良い例でもある
  • 最も基本的なバージョンのライブラリ（紙吹雪の呼び出し）は非常に使いやすいが、用意されたオプション（雪、特定の色、さまざまな紙吹雪効果など）を掘り下げていくと多くのものが得られる
  • 営業担当者向けの管理ダッシュボードに、販売時の紙吹雪効果を追加したところ、驚くほど楽しく、やる気を引き出してくれた
  • 印象的でクールではあるが、自分が使うWebサイトで実行されるのは見たくない。特にニュースレターのポップアップやカートに商品を追加したときに紙吹雪が出るのは望まない
  • リセット関数の名前は confetti.resetti() にしてほしい
  • 数年前、製品の一部として似たようなアニメーションを作った。新規ユーザーが登録し、初めてその製品を使って特定の成果物を作成すると、紙吹雪アニメーションが表示されるフローだった。プロダクトマネージャーたちはこれを楽しく新鮮だと感じ、役員たちに自慢していたが、その後のUXレビューとアクセシビリティテストを経て、最終的には製品から削除された。デモで見せるには楽しかったが、ユーザーには煩わしくなり得る
  • Party.js というライブラリもある: https://party.js.org/
  • 2005年ごろ、ECサイトに雪が降る効果を入れたときの驚きを覚えている。私たちがどれほど遠くまで来たかを示している（ある意味では！）