ニュースパス
iPhone Xには「Super Retina HD ディスプレイ 」が搭載されており、今後のスマートフォンの主流が「超高画素」になることは間違いないでしょう。
これらの ディスプレイ でJPEGやGIF画像を見ると画像が荒れて見えることがありますが、その対処法としての画像が劣化しないSVGの使用の拡大は、Webデザイン界では急務となっています。
ベクターデータは、単に静止画像で活用されるだけでなく、アニメーションでの利用もしやすいのが特徴です。しかし、SVGなどをそのままアニメーションに利用するのは難しいので、モーションライブラリと呼ばれるアニメーション用ライブラリを導入するのが手っ取り早いでしょう。このようなライブラリを使えば、 JavaScript 側で、関数などを使ってアニメーションを実装できるようになるからです。
今回は、滑らかな動きを実現する JavaScript モーションライブラリ11選をご紹介していきます。アニメーションは冗長なコードになりやすいですが、これらのライブラリを使うことで、シンプルに扱うことができるようになります。
Bonsai.jsは、Web ページ にグラフィカルなSVGを JavaScript の構文を使って書くことができるモーションライブラリです。
通常、SVGを描画するには、 HTML5 のSVG タグ を使って描くのが一般的でしょう。Bonsaiでは、 JavaScript を使って非常にシンプルなコードで描画を行うことができます。
また、オーディオやビデオ、 フォント などを埋め込むことも可能なので、リッチなインタラクティブ表現も簡単に実装できます。
Two.jsは、Web ブラウザ 上でオープンソースの2次元の描画を可能にするモーションライブラリです。
モーショングラフィックに特化しており、アニメーションループにも対応しています。また、3Dライブラリのthree.jsなど、他のアニメーションライブラリと組み合わせて利用することも可能です。
SVGを作成して外部で読み込むこともできますが、Bonsaiと同様に JavaScript 上でもシンプルな図形を短いコードで表示することができます。グラデーションやクリッピングマスクなど、高度な描画も可能です。
Raphaël.jsは、レガシーブラウザでも描画可能なモーションライブラリです。SVGがサポートされていない環境では、SVGの元となったVML(Vector Markup Language)と呼ばれる言語で描画されるフォールバックが用意されています。
GZIPで使えば、最終的に約20KBとなる極めてコンパクトなサイズです。ちなみに、Raphaëlは「ラファエル」ではなく「ラフェイエル」(['ræfeɪəl])と発音します。
Raphaëlを元に同じ作者によって作られたのが、Snap.svgです。Snap.svgは、Adobeが提供しているオープンソースライブラリで、クリッピングマスクやモーフィングなど、さまざまなアニメーションに対応しています。
Adobeが作成しているだけあり、IllustratorやInkscape、Sketchのようなベクターツールで作成したSVGとも相性がよいです。Raphaëlと違ってレガシーブラウザには対応していませんが、モダン ブラウザ に照準を合わせることで、よりリッチな表現が実装できるようになっています。
Graphics.jsはAnyChart社がリリースしている、SVG・VMLに基づいた JavaScript の描画ライブラリです。
残念ながらGraphic.js自体にアニメーション機能は付いていませんが、他のライブラリと組み合わせることでアニメーションの実装も可能です。仮想DOMに対応しており、レイヤーを使って重ね合わせたり、重ね合わせの順番を変えることもできるので、パラパラ漫画のような見せ方も可能になっています。
D3.jsは、チャートを含むさまざまなデータを可視化するのに役立つ描画ライブラリです。基本的にはSVGで描画されますが、 HTML 要素の描画や、バージョン4からはCanvasレンダリングもサポートしています。
構文はjQueryに似ているので、初心者でも敷居が低いのが特徴ですが、一方で非常に高度な描画も可能です。要素をDOMによってバインドすることもできるので、for文を書かずに反復処理を行うこともできます。
Vivus.jsは、線画に特化した、他のライブラリに依存しないSVGのアニメーションライブラリです。
基本的には既存のSVGのパスに対してアニメーション設定を行うため、複雑な図形には対応していません。しかしながら、タイミングの設定を自由に行うことができるので、部分的な使用に向いているでしょう。
ProgressBar.jsは、ベクターアニメーションの中でも、プログレスバーに特化したモーションライブラリです。
最近ではページを完全に読み込むまでにプログレスバーを表示するケースも多くなってきましたが、こちらのライブラリを利用することで、 ページ の読み込み率もプログレスバーで実装できます。そのほか、ファイルアップローダー、パスワードの安全性を表示するリングなども作成できます。
Mo.jsは、高度なアニメーションにも対応したオープンソースの高機能なモーションライブラリです。
Mo.jsを使えば、非常に短いコードでインタラクティブな表現が可能になります。構文はBabel.jsに依拠した形になっていますが、すぐに使うのに慣れてしまうでしょう。
Seen.jsは、インタラクティブな3Dオブジェクトを描画できるライブラリです。SVG・Canvasのどちらにも対応していますが、同じように見せることができます。
できることはD3.jsにも似ていますが、Seen.jsのほうが若干できることは限られます。構文はCoffeeScriptに依拠しているので、CoffeeScriptに慣れているひとはこちらを活用してみてもよいでしょう。
SVG.jsは、 JavaScript 側でピュアなSVGを描画することができるライブラリです。
描画自体はもちろん、アニメーションもたった数行で実装することができます。アニメーションのイージング処理を「>」(ease out)や「ー」(linear)のように、動きの特徴を連想する文字列で指定することができます。モバイルでのサポートも明記されており、ほとんどのモバイル ブラウザ でも作動します。
ちょっとしたアニメーションを実装する際にも、 CSS ではkeyframeの設定から行わなければいけませんが、 JavaScript を使うことでよりシンプルなコードで実現することが可能です。
それぞれのライブラリにユニークな特徴があるので、自分に合ったものを探して使ってみましょう。