【JavaScript】Canvas Confettiを使って紙吹雪アニメーションを表示する

　今回はCanvas Confettiを使って紙吹雪アニメーションを表示するサンプルコードを解説していきます。

GitHub - catdad/canvas-confetti: 🎉 performant confetti animation in the browser

🎉 performant confetti animation in the browser. Contribute to catdad/canvas-confetti development by creating an account ...

　完成しているコードは下記にあります。

JavaScript-sample/confetti at main · tsuneken5/JavaScript-sample

Contribute to tsuneken5/JavaScript-sample development by creating an account on GitHub.

基本
オプション一覧
両サイドからクラッカーのように
紙吹雪を上から降らせる
花火っぽく
カスタム紙吹雪

基本

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>

function fire(confettiOption) {
  confetti(confettiOption);
}

function onBase() {
  fire({});
}

　confetti() で紙吹雪のアニメーションを表示します。オプションを指定するとアニメーションに変化を加えられます。

オプション一覧

particleCount (default: 50) ・・・紙吹雪の枚数。多くしすぎると計算量も多くなります。
angle (default: 90) ・・・紙吹雪を発射する角度。90°が真上になります。
spread (default: 45) ・・・紙吹雪の広がり具合の角度。
startVelocity (default: 45) ・・・初速（ピクセル単位）。
decay (default: 0.9) ・・・紙吹雪の速度が減衰する割合。0 ～ 1 で設定。
gravity (default: 1) ・・・重力。0 だと無重力になります。
drift (default: 0) ・・・紙吹雪の流される方向と流され具合。0 だと真下へ落下し、マイナスだと左へ、プラスだと右に紙吹雪が流されます。
ticks (default: 200) ・・・紙吹雪が動く長さ。
origin ・・・紙吹雪の発射位置。x ： 0が左端、1が右端。y : 0が上端、1が下端。
colors ・・・紙吹雪の色(HEX形式)の配列。
shapes ・・・紙吹雪の形状の配列。デフォルトだと「square」「circle」「star」が設定できますが、自分で形状を作成することも可能です。

両サイドからクラッカーのように

function fire(confettiOption) {
  confetti(confettiOption);
}

function onCracker() {
  let confettiOption = {
    particleCount: 200,
    spread: 30,
    startVelocity: 70,
    colors: ['#bb0000', '#ffffff'],
    origin: {
      x: 0,
      y: 0.9
    },
    angle: 45
  }
  fire(confettiOption);

  confettiOption.origin.x = 1;
  confettiOption.angle = 135;
  fire(confettiOption);
}

　両サイドの低い位置から angle を45° (135°) で発射しているだけです。 spread や startVelocity を調整するともっとそれっぽくなるかもしれません。

紙吹雪を上から降らせる

function fire(confettiOption) {
  confetti(confettiOption);
}

let isfalling = false
function onFall() {
  if (isfalling) {
    return;
  }
  isfalling = true;

  let confettiOption = {
    ticks: 800,
    angle: 90,
    spread: 90,
    origin: {
      y: 0
    }
  }
  const intervalId = setInterval(() => {
    confettiOption.origin.x = Math.random();
    fire(confettiOption);
  }, 100);

  setTimeout(() => {
    isfalling = false;
    clearInterval(intervalId)
  }, 5000);
}

　上端から上に紙吹雪を発射させて振らせているだけです。 tick が短いと途中で紙吹雪が消えてしまうので長めにしています。あまり多くの紙吹雪を描画させると画面が重くなるので注意してください。

花火っぽく

function fire(confettiOption) {
  confetti(confettiOption);
}

function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

function onFirework() {
  let confettiOption = {
    particleCount: 100,
    startVelocity: 30,
    spread: 360,
    ticks: 60,
    shapes: ['circle'],
    origin: {
      x: randomInRange(0.2, 0.8),
      y: randomInRange(0.2, 0.5)
    }
  }
  fire(confettiOption);
}

　spread を360°にして全方向に紙吹雪を発射させるだけで花火っぽくなります。

カスタム紙吹雪

function fire(confettiOption) {
  confetti(confettiOption);
}

function onCustom() {
  const triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' });
  const pineapple = confetti.shapeFromText({ text: '🍍' });
  let confettiOption = ({
    shapes: [triangle, pineapple],
    scalar: 2,
  });
  fire(confettiOption);
}

　confetti.shapeFromPath() は SVG の形式で紙吹雪を作成することができます。

　confetti.shapeFromText() は絵文字などを指定すると、その絵文字を紙吹雪として利用できます。