• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

技術情報・Tips

Retina対応の canvas + Javascript による波形アニメーションサンプル

Retina対応の canvas + Javascript による波形アニメーションサンプル

弊社にて現在開発中のWordPressテーマに搭載する機能の候補として、各セクションの境界の形状に、波形の波打つアニメーション要素を表示する仕組みを簡単に作ってみました。

想定は、例えば弊社で提供中のDigiPressテーマに搭載の「パララックススクロール」ウィジェットで表示できるコンテンツの境界デザインとして表示することを考慮し、アニメーションさせる canvas要素は1ページ内に決められた数ではなく複数存在することを前提とします。

セクションの境界は、HTML5 canvas に対して、Javascript にて sin関数で波形を描画し、setTimeout関数で位置をずらしながらキャンバスを移動させます。

境界アニメーション要素の条件

  • 波形を描画するcanvas要素の数は不定のため、すべてのcanvas要素について波形の描画とアニメーションを実行する。
  • canvas の描画は高精細ディスプレイに対応させる。
  • 波形は1つの境界要素(canvas)に最大3つまで重ね合わせることができ、それぞれ波形の色を指定できる(アルファ値有効)。
  • 汎用性の観点から、波形の色はdata属性に指定し、Javascript側でそれを取得して動的に塗りつぶす。
  • 1つの境界要素(canvas)に波形が1つだけの場合は、波形の色のアルファ値は無効にする。

完成イメージがこちら。

See the Pen Wave animation with canvas (Retina ready) by digistate (@digistate) on CodePen.

HTMLの構成

波形の描画だけなら canvas タグのみでできますが、テキストや画像があるコンテンツ要素の境界として扱うため、ラッパー要素(.canvas-wrapper)でセクション全体を括り、その中に canvas(.wave-bar)とメインのコンテンツ(.inner)を配置します。

波形のみを表示する場合

上部境界に波形を表示し、メインコンテンツの背景と同化させる場合

波形は3つまで表示可能で、波形の色は、canvas要素の data-color1, data-color2, data-color3 属性で指定します。
この data-color[n] の数が波形の数に一致します。

境界の波形(canvas)とメインコンテンツ(.inner)が同化して見えるようにするために、メインコンテンツ要素には data-bgcolor背景カラーdata-colorフォントカラーを指定できるようにしておきます。
これらのカラーコードを、Javascript側で取得してメインコンテンツのスタイルに反映させます。

上下の境界に波形アニメーションを表示する場合

上下の境界に波形を表示する場合は、canvas要素を2つ指定し、2つ目のセレクタに .flipped を加えます。
.flipped セレクタがある場合は、単純にCSSで要素を反転させて表示するようにしています。

Javascriptによるcanvasの描画

canvasの波形の描画処理については、今回参考にしたドキュメントに詳しく解説されているため割愛します。
ここでは、今回のサンプルで独自に追加した必要な処理について記載しておきます。

波形用canvas要素の取得、初期化

document.querySelectorAllでセレクタを指定して、波形アニメーションを表示する対象要素をすべて取得し、Array.prototype.forEach.call という書式で、取得した canvasListオブジェクトをforeachのように順番に処理します。

canvasの描画を高精細ディスプレイに対応させる

canvasに幅と高さを表示したいサイズの数値でそのまま指定すると、Retinaディスプレイのような高精細ディスプレイでは、2倍以上の解像度が必要となるため、画像(img)と同じように描画が粗くなります。
これを解決するためには、まずは通常通りcanvasに表示したいサイズをセットします。

そのサイズに devicePixelRatio という、表示されるディスプレイのピクセル比を表すプロパティの数値を掛け、適切な解像度にリサイズ(拡大)します。
最後に、必要な解像度までリサイズ(拡大)したcanvas要素を、devicePixelRatio縮小します。

ここでポイントとなるのが、レスポンシブ表示となるよう、canvasの幅は最後に devicePixelRatio分縮小せず、CSSで常に表示幅が100%でリサイズされるようにしておきます。

ラッパー要素に背景色を指定する

ラッパー要素(.canvas-wrapper)同士が切れ目なく波形の境界で繋がっているように見せれるデザインが構成できるよう、ラッパー要素にも背景カラーを指定できるようにします。
ラッパー要素の背景カラーは、canvas要素の data-bgcolor属性に指定します。

メインコンテンツ部分の配色

メインコンテンツ(.inner)がある場合、境界の波形(canvas)の色と同化させるため、.inner要素にもdata-bgcolordata-color属性を用意してメインコンテンツの背景カラーとフォントカラーを指定できるようにします。

アニメーションの速さや波形の数、形は作り方次第で様々な組み合わせが考えられるので、canvasだけでもかなりWebデザインの表現の幅が広がるのではないでしょうか。

[参考]
Canvasで波のアニメーションを描画する
https://jsfiddle.net/39we73t1/
HTML5 CanvasとWebGLの高解像度対応はどこまで行うべきか

URL
TBURL

COMMENT ON FACEBOOK

Return Top