SVG(エスブイジー)とはHTMLでベクターグラフィックスを扱えるテクノロジーです。JPEGやPNGなどのラスターデータに対し、SVGはベクターデータのため拡大縮小に強いことが利点です。本記事ではこのSVGを使ってHTMLでアニメーションを実現する方法を紹介します。

まず前提として抑えておきたいのは、SVGでアニメーションやインタラクションを実装するには比較的低レベルのAPIの理解が必要となるということです。SVG 1.1 仕様が低レベルということもあり学習コストがかかったり、コンテンツ開発時の生産効率が上がらないといった課題が考えられます。そのためアニメーションやインタラクション用途のSVGコンテンツの開発にはJSライブラリを使う方が効率的です。

SVGを手軽に扱えるJSライブラリ「Snap.svg」とは

Snap.svg」(スナップ・エスブイジー)とはJavaScriptでHTML内のSVG要素を制御するJSライブラリです。Snap.svgはAdobeが開発していることや(参照記事「アドビ、Snap.svgオープンソース プロジェクトをGitHubに公開」)、一世代前の人気SVG用JSライブラリ「Raphaël」の開発者も参加していることから、SVGを扱うJSライブラリの中では最も有力であると言えます。Snap.svgを学びたい方はPixelGridさんの記事「Snap.svgで快適SVGアニメーション – Snap.svgとは | CodeGrid」で利点や使い方をわかりやすく解説されているので、参考にするといいでしょう。

Snap.svg 公式サイト

アニメーションソフトからSVGを書き出す

前置きが長くなりましたが、ここからが本題です。今まではSnap.svgの開発にはコードを書くしか制作方法がありませんでしたが、2015年8月にAdobe Animate CC(当時の名称はAdobe Flash Professional CC)の拡張機能(アドオン)「Snap.svg Animator」が公開されました。このアドオンを使うことでAnimate CCで作成したタイムラインアニメーションをSnap.svgのアニメーション素材として書き出すことができます。次のサンプルはAnimate CCで作成したFlashアニメーションをSnap.svg Animatorを使って出力したものです。


▲ 光の筋が交差するシンプルなモーション。Snap.svg Animatorではブレンドモードが利用できないようだが、イージングなどの再現には問題がない。(ソースコード : 2_motion_flash)


▲ パーティクルのシンプルなモーション。ビットマップベースのモーションでも支障なく表現されている。(ソースコード : 3_particles)

SVGコンテンツの制作ワークフロー

この拡張機能を使えば、プログラマだけでなく、アニメーターもSnap.svg(HTML5のSVG)コンテンツの制作に参加できるようになります。本記事では「Snap.svg Animator」のインストールの手順から使い方と活用方法を紹介します。

150814_snapsvg_workflow

次のページでは、拡張機能のインストール方法を解説します。