ajike switch

css3とjQueryで柔軟に実装できるSVG線画アニメーション

アジケでフロントエンドエンジニアを始めて10か月の小松です。

今回はSVGを用いた線画アニメーションの簡単な実装方法をお伝えします。
実はこの技術は最近リニューアルした弊社ホームページでも利用しました(こちらです)。
画像がリアルタイムで描かれているような表現が可能になり、まさにSVGならではの表現方法と言えます。

目次

・SVGとは?
・線画アニメーションを実装するために必要な技術
・サンプル実装

 

1. SVGとは?

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。」(wikipediaより引用)

なんだかよくわかりませんが凄くざっくり言うと
「.pngとか.jpg的な感じで画像を表示できるやつ」です。
さらにSVGの特徴としては下記になります。

・Illustrator で書き出すことができる画像形式
・いくら拡大してもぼやけない
・テキストベースで編集ができる
・cssやjsで操作することができる

このようにSVGは決め打ちで書き出される他の画像形式と異なり、柔軟にカスタマイズが可能になります。
また、ベクター形式なので拡大してもぼやけないため、スマホサイトでは重宝します。

 

2. 線画アニメーションを実装するために必要な技術

今回SVGで実装する線画アニメーションを他の技術で実装しようとするとgifや動画の埋め込みになるかと思います。
ブラウザ対応などを考えるとそれらも良い方法かと思いますが、クライアントの希望に柔軟に対応するためにはやはりフロントエンドでの対応が望ましいです。
プラグインもありますが、プラグインが使えない状況もあるかと思います。
というわけで、今回はjQueryとcss3でSVGを制御する方法をご紹介します。

この実装方法のメリットは、線描画アニメーションと他のアニメーションを組み合わせる時に制御しやすいという点です。
気になるIE対応ですが、現状IEが対応していないのでSVG線画アニメーションを実装するのはなかなか難しそうです。
IEのみユーザーエージェントで判別して代替画像を表示するなどで対応するのが良いかと思います。

 

3. サンプル実装

今回はこのような線画アニメーションを実装してみます。
サンプルはこちら(jsfiddleが開きますので「show」というボタンを押して下さい)。
アニメーションのセンス的な部分は今回は忘れていてください…笑

この線画アニメーションの考え方は下記のような流れで実装されています。

・初期状態はSVGのpathとfillをtransparentにして透明にしておく
・addClassでcss3のanimationを用いて描画開始
・setTimeoutで追加アニメーション
・終了

では早速見ていきましょう。

インラインでSVGを表示

SVGはインラインでHTMLに記述する方法と他の画像と同様にimgタグで呼び出す方法があります。
今回はjQueryで制御するため、インラインで記述します。
imgタグで呼び出したSVGをjQueryで制御するためにはjQueryが認識できる形にする必要があるのです…

さて、Illuetratorで書き出したSVGはこんな感じになります。
安心して下さい、これがSVGです。
スクリーンショット 2016-02-12 17.35.51

ちなみに、Illustratorから書き出したSVGのソースで必要なのは<svg>タグの中だけですので、その他は消しても構いません。

ブラウザで表示確認できたら、svg内の要素に対してcssで透明表示にするための記述を行います。
SVGは様々な要素で構成されており、今回は「path/rect/circle」の3種類で構成されています。
これらはstroke(線)とfill(塗りつぶし)プロパティで表示を制御ができます。
初めは透明なので、strokeとfillに対してtransparentを設定します。
スクリーンショット 2016-02-12 17.40.50

 描画アニメーション実装

透明なSVGに対して描画アニメーションと塗りつぶしアニメーションを付け加えていきます。
描画アニメーションですが、stroke-dasharray(線の間隔)とstroke-dashoffset(線の位置)という2つのプロパティをaniamtionで制御して実装します。
仕組みを砕いて説明すると下記のような流れです(厳密には少し解釈が異なります)。

  • 2000pxのstroke-dasharrayがある(2000pxの長さの線があると思って下さい)
  • stroke-dashoffsetが2000pxに設定されている(↑の線が可視領域の2000px後ろに配置されている。0pxになると完全に見えるようになる)
  • animationでstroke-dashoffsetの値を時間の経過と共に0に近づけることで、可視領域に線が徐々に進入してきて描画されているように見える

という感じです
今回は追加のアニメーションも含めて下記のようになります。

(1)startクラスがaddClassされてanimationが開始
スクリーンショット 2016-02-12 18.39.10
(2)4秒間かけてstroke-dashoffsetの値が2000から0に変化する(これが描画する動きです)

スクリーンショット 2016-02-12 18.39.33

(3)4.5秒後にロゴが回転するaniamtionに必要なクラスをaddClassして、
完成
スクリーンショット 2016-02-12 18.42.23

※jsの記述はこんな感じです。今回はsetTimeoutで追加アニメーションを制御しています。
スクリーンショット 2016-02-12 18.53.02

詳細なソースはjsfiddleの方でご確認頂ければと思います。
addClassでのcss制御なので全く違うアニメーションの要望が出てきてもある程度柔軟に対応できます。

 

SVGの線画アニメーションを実装して思ったこと

仕組みを理解すると色々と応用ができそうで面白いなぁと感じます。
例えばstroke-dasharrayの値を100とか短く設定して動かしてみるとSVG要素の外周をグルグルと短い線が回るような動きが実装できます。
他にもanimationで線の色を変えてみたり、大きさを変えたり…遊び始めると時間を忘れます笑

IEなどまだまだブラウザ対応が難しいというデメリットもありますが、リッチなサイト制作にはもってこいの技術で今後も注目が必要です。
アニメーションしなくてもSVGを使うことで恩恵は得られるので、ぜひお試し下さい!
それでは。

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×