かんたん操作で
ニュースをチェック!
ダウンロード

ニュースパス

ferret [フェレット]

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

酒井 涼
5/2(水) 16:00

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

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

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

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

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

1. Bonsai.js

1.png

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

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

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

2. Two.js

2.png

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

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

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

3. Raphaël.js

3.png

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

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

4. Snap.svg

4.png

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

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

5. Graphics.js

5.png

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

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

6. D3.js

6.png

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

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

7. Vivus.js

7.png

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

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

8. ProgressBar.js

8.png

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

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

9. Mo.js

9.png

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

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

10. Seen.js

10.png

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

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

11. SVG.js

11.png

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

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

まとめ

ちょっとしたアニメーションを実装する際にも、 CSS ではkeyframeの設定から行わなければいけませんが、 JavaScript を使うことでよりシンプルなコードで実現することが可能です。

それぞれのライブラリにユニークな特徴があるので、自分に合ったものを探して使ってみましょう。

外部サイト

ニュースパスアイコン ニュースパスアイコン

フリーワード設定で最新ニュースを素早くチェック! 気になる話題に誰よりも詳しくなれる! 注目キーワードで「知りたい今」をキャッチ!
フォロー機能
フリーワード設定で
最新ニュースを素早くチェック!
検索機能
気になる話題に
誰よりも詳しくなれる!
急上昇ワード
注目キーワードで
「知りたい今」をキャッチ!