SVGにも対応！滑らかな動きを実現するモーションライブラリ11選

iPhone Xには「Super Retina HDディスプレイ」が搭載されており、今後のスマートフォンの主流が「超高画素」になることは間違いないでしょう。

これらのディスプレイでJPEGやGIF画像を見ると画像が荒れて見えることがありますが、その対処法としての画像が劣化しないSVGの使用の拡大は、Webデザイン界では急務となっています。

ベクターデータは、単に静止画像で活用されるだけでなく、アニメーションでの利用もしやすいのが特徴です。しかし、SVGなどをそのままアニメーションに利用するのは難しいので、モーションライブラリと呼ばれるアニメーション用ライブラリを導入するのが手っ取り早いでしょう。このようなライブラリを使えば、JavaScript側で、関数などを使ってアニメーションを実装できるようになるからです。

今回は、滑らかな動きを実現するJavaScriptモーションライブラリ11選をご紹介していきます。アニメーションは冗長なコードになりやすいですが、これらのライブラリを使うことで、シンプルに扱うことができるようになります。

滑らかな動きを実現するJavaScriptモーションライブラリ11選

1. Bonsai.js

Bonsai.jsは、WebページにグラフィカルなSVGをJavaScriptの構文を使って書くことができるモーションライブラリです。

通常、SVGを描画するには、HTML5のSVGタグを使って描くのが一般的でしょう。Bonsaiでは、JavaScriptを使って非常にシンプルなコードで描画を行うことができます。

また、オーディオやビデオ、フォントなどを埋め込むことも可能なので、リッチなインタラクティブ表現も簡単に実装できます。

2. Two.js

Two.jsは、Webブラウザ上でオープンソースの2次元の描画を可能にするモーションライブラリです。

モーショングラフィックに特化しており、アニメーションループにも対応しています。また、3Dライブラリのthree.jsなど、他のアニメーションライブラリと組み合わせて利用することも可能です。

SVGを作成して外部で読み込むこともできますが、Bonsaiと同様にJavaScript上でもシンプルな図形を短いコードで表示することができます。グラデーションやクリッピングマスクなど、高度な描画も可能です。

3. Raphaël.js

Raphaël.jsは、レガシーブラウザでも描画可能なモーションライブラリです。SVGがサポートされていない環境では、SVGの元となったVML(Vector Markup Language)と呼ばれる言語で描画されるフォールバックが用意されています。

GZIPで使えば、最終的に約20KBとなる極めてコンパクトなサイズです。ちなみに、Raphaëlは「ラファエル」ではなく「ラフェイエル」(['ræfeɪəl])と発音します。

4. Snap.svg

Raphaëlを元に同じ作者によって作られたのが、Snap.svgです。Snap.svgは、Adobeが提供しているオープンソースライブラリで、クリッピングマスクやモーフィングなど、さまざまなアニメーションに対応しています。

Adobeが作成しているだけあり、IllustratorやInkscape、Sketchのようなベクターツールで作成したSVGとも相性がよいです。Raphaëlと違ってレガシーブラウザには対応していませんが、モダンブラウザに照準を合わせることで、よりリッチな表現が実装できるようになっています。

5. Graphics.js

Graphics.jsはAnyChart社がリリースしている、SVG・VMLに基づいたJavaScriptの描画ライブラリです。

残念ながらGraphic.js自体にアニメーション機能は付いていませんが、他のライブラリと組み合わせることでアニメーションの実装も可能です。仮想DOMに対応しており、レイヤーを使って重ね合わせたり、重ね合わせの順番を変えることもできるので、パラパラ漫画のような見せ方も可能になっています。

6. D3.js

D3.jsは、チャートを含むさまざまなデータを可視化するのに役立つ描画ライブラリです。基本的にはSVGで描画されますが、HTML要素の描画や、バージョン4からはCanvasレンダリングもサポートしています。

構文はjQueryに似ているので、初心者でも敷居が低いのが特徴ですが、一方で非常に高度な描画も可能です。要素をDOMによってバインドすることもできるので、for文を書かずに反復処理を行うこともできます。

7. Vivus.js

Vivus.jsは、線画に特化した、他のライブラリに依存しないSVGのアニメーションライブラリです。

基本的には既存のSVGのパスに対してアニメーション設定を行うため、複雑な図形には対応していません。しかしながら、タイミングの設定を自由に行うことができるので、部分的な使用に向いているでしょう。

8. ProgressBar.js

ProgressBar.jsは、ベクターアニメーションの中でも、プログレスバーに特化したモーションライブラリです。

最近ではページを完全に読み込むまでにプログレスバーを表示するケースも多くなってきましたが、こちらのライブラリを利用することで、ページの読み込み率もプログレスバーで実装できます。そのほか、ファイルアップローダー、パスワードの安全性を表示するリングなども作成できます。

9. Mo.js

[Mo.js]は、高度なアニメーションにも対応したオープンソースの高機能なモーションライブラリです。

Mo.jsを使えば、非常に短いコードでインタラクティブな表現が可能になります。構文はBabel.jsに依拠した形になっていますが、すぐに使うのに慣れてしまうでしょう。

10. Seen.js

Seen.jsは、インタラクティブな3Dオブジェクトを描画できるライブラリです。SVG・Canvasのどちらにも対応していますが、同じように見せることができます。

できることはD3.jsにも似ていますが、Seen.jsのほうが若干できることは限られます。構文はCoffeeScriptに依拠しているので、CoffeeScriptに慣れているひとはこちらを活用してみてもよいでしょう。

11. SVG.js

[SVG.js]は、JavaScript側でピュアなSVGを描画することができるライブラリです。

描画自体はもちろん、アニメーションもたった数行で実装することができます。アニメーションのイージング処理を「＞」(ease out)や「ー」(linear)のように、動きの特徴を連想する文字列で指定することができます。モバイルでのサポートも明記されており、ほとんどのモバイルブラウザでも作動します。