【Canvasの使い方】泡が下から浮き上がるアニメーション

2024/05/25

記事にプロモーションを含みます。

今回の記事では、Canvasを利用して泡が浮き上がるウェブデザインを実装する方法について紹介したいと思います。

以下のウェブページを参考にしていますので、必要に応じて見てみてください。

Canvas2Dアニメーション基本のキ

泡が浮き上がるアニメーション

まず、冒頭に述べた参考記事の中にあるコードをほぼそのままコピペしたものが以下のような挙動になります。

See the Pen Untitled by Lios (@lionooil) on CodePen.

背景は私の方で変更していますが、それ以外の動きは参考記事通りに正しく動いているようです。

しかし実際にウェブデザインとして自身のサイト上に実装したい場合は、すでにあるデザインに合わせて泡の色や動きを変更する必要が出てくると思います。

この泡が浮き上がる動作はおもにJavaScriptで実装されていますが、全てのコードの意味や役割を理解するのには時間がかかりますが、変数名や関数の一部の役割を読み取れるだけでも、変更するべき場所がある程度予測ができます。

以下に私が実際にコードを少し改変して、この泡のデザインを変更することに成功したので、以下にいくつか共有させていただきます。

泡の出現数を減らす

泡の出現数の制御はJavaScript内上部の「NUM」というconst変数で設定されています。

See the Pen bubble-amount-reduced by Lios (@lionooil) on CodePen.

以下に「NUM」変数が設定されている部分のコードを抜粋して表示しています。

デフォルトは100ですが、これを30にまで減らすと、以下のように泡の出現数が減ります。

/*JavaScript*/
.
.
function (cb) {
  setTimeout(cb, 17);
};

/*泡の数を変更*/
const NUM = 30;
const particles = [];
.
.

泡の色を変更

これはJavaScript内のコードを眺めているとよくわかりますが、カラーコードが設定されている箇所が3行あります。

See the Pen bubble-color-changed by Lios (@lionooil) on CodePen.

以下に泡の色を決定しているコードの一部を抜粋して表示しています。

/*JavaScript*/
.
.
render() {
  if (this.index % 3 === 0) {
    ctx.fillStyle = '#fff'; /*白の塗りつぶし円*/
    ctx.fill();
  } else if (this.index % 3 === 1) {
    ctx.strokeStyle = '#006F73'; /*青の中抜き円*/
    ctx.lineWidth = 1;
    ctx.stroke();
  } else {
    ctx.globalAlpha = 0.5;
    ctx.fillStyle = '#5CE1E6'; /*水色の半透明塗りつぶし円*/
    ctx.fill();
  }

  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
}
.
.

それぞれ「白い円」「白い輪っか」「紫の半透明な円」を実装していますが、実際にカラーコードを変更してみて、どの泡の色が変わっているのかを確認するのが良いと思います。

泡の出現範囲を変更

これは少し難しいですが、出現座標を決定する数式を少し変更することによって実装できます。

See the Pen bubble-half by Lios (@lionooil) on CodePen.

JavaScriptコードの末尾の方でinit()関数を定義していますが、ここに泡の出現位置を決める数式がありますので、ここを少し改変します。

/*JavaScript*/
.
.
function init() {
  for (let i = 0; i < NUM; i++) {
    const x = Math.random() * canvas.width / 2; /*画面幅の半分の値を乗ずる*/
    const y = Math.floor(Math.random() * canvas.height);
    const radius = Math.floor(Math.random() * 40);
    const directionX = Math.random() * 2 - 1;
    const directionY = Math.random() * 2;
    const particle = new Particle(x, y, radius, directionX, directionY,i);
    particles.push(particle);
  }
}
.
.

変数xに泡の出現位置のx座標を代入していますので、ここを変更します。

random()関数で0から1の乱数を発生させ、それにcanvas.widthで取得した表示幅を乗じています。

なのでcanva.width/2と式を変えることでx座標の最大範囲が画面の半分になるので、画面左側半分までしか泡が出現しなくなります。

もう少し工夫すると、以下のように両端だけ泡が出ないように描画できます。

See the Pen bubble-range-narrowed by Lios (@lionooil) on CodePen.

先ほどと同様にJavaScriptコードのinit()関数内で定義している式をもう少し改変します。

/*JavaScript*/
.
.
function init() {
  for (let i = 0; i < NUM; i++) {
    const x = Math.random() * canvas.width / 2 + canvas.width / 4; /*画面幅の四分の一の値をx座標に加算する*/
    const y = Math.floor(Math.random() * canvas.height);
    const radius = Math.floor(Math.random() * 40);
    const directionX = Math.random() * 2 - 1;
    const directionY = Math.random() * 2;
    const particle = new Particle(x, y, radius, directionX, directionY,i);
    particles.push(particle);
  }
}
.
.

実装のやり方自体は簡単で、先ほど改変した変数xに代入する値を決定する式の末尾に「+ canvas.width / 4」を追記するだけです。

これにより、全ての泡の発生場所が画面の四分の一の幅だけx座標の製の方向にスライドするため、左側四分の一の領域に泡が発生しなくなり、その分泡の発生範囲が画面右側四分の一だけ拡大するため、画面中央部から泡が発生するように描画することが可能になります。

Canvasを用いてウェブサイト画面上で泡を浮き上がらせるアニメーションを実装する方法は以上になります。

一種類のコードからでも、正しく改変することで、さまざまなデザインのバリエーションが引き出せます。

是非、実際に実装して自分好みにアレンジして遊んでみてください。

以上、最後までご覧いただきありがとうございました！

タグクラウド :

javascript

canvas