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)のように、動きの特徴を連想する文字列で指定することができます。モバイルでのサポートも明記されており、ほとんどのモバイルブラウザでも作動します。
まとめ
ちょっとしたアニメーションを実装する際にも、CSSではkeyframeの設定から行わなければいけませんが、JavaScriptを使うことでよりシンプルなコードで実現することが可能です。
それぞれのライブラリにユニークな特徴があるので、自分に合ったものを探して使ってみましょう。
- ディスプレイ
- ディスプレイ(display)とは、文字や図形を表示する装置のことを言います。 テレビと同じ原理のCRTディスプレイや、設置面積が小さく消費電力の少ない液晶ディスプレイや、ガス放電を利用したプラズマディスプレイなど、種類も多くあります。
- ディスプレイ
- ディスプレイ(display)とは、文字や図形を表示する装置のことを言います。 テレビと同じ原理のCRTディスプレイや、設置面積が小さく消費電力の少ない液晶ディスプレイや、ガス放電を利用したプラズマディスプレイなど、種類も多くあります。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング