JavaScriptはブラウザに組み込むだけで、複雑かつダイナミックな動きや機能を実装することができる非常に便利で汎用性のある言語です。
ただデメリットとしては、JavaScript単体でそのような表現をするには、複雑なコーディングを行う必要となることです。

その現実を目の前に諦めてしまう方も少なくないはずです。
しかし、そうした方にぜひお伝えしたい情報があります。

実は、JavaScriptの便利な機能をシンプルなコードで呼び出すことのできるライブラリを使うことで、先に述べたようなデメリットは一掃できます。非常に簡潔にダイナミックな動きを実装することが可能になります。

そこで今回は、JavaScriptライブラリの中でも、まるでFlashを使っているかのようになめらかな動きを実装することができる「mo.js」をご紹介します。
　　

「mo.js」とは？

mo.jsは「Motion for the web」というキャッチコピーが付いた、なめらかな動きを実現可能にするJavaScriptライブラリです。
数行のシンプルなコードで、本格的なモーショングラフィックを作成することができます。

mojs.jpeg
　　

「mo.js」の特徴

feature.jpeg

アニメーションに関するJavaScriptライブラリはいくつかありますが、「mo.js」にはどんな特徴があるのでしょうか。
　　

1. 軽量・高速・シンプル

シルクのようになめらかなアニメーションやエフェクト(Silky Smooth Animations and Effects)をシンプルなAPIで操作することができます。
　　

2. Ratina対応

どんな高画質のスクリーンでも綺麗に表示することができるので、デバイスのスクリーンサイズに依存しません。
　　

3. カスタマイズしやすい

モジュールと呼ばれる部品を、必要な時に必要なだけ組み合わせることができます。また、オープンソースプロジェクトを採用しているので、都度最新の状態でAPIを利用することができます。
　　

まずはデモを見てみよう

それではまず、公式ホームページで公開されているデモの中から3つのデモをご紹介していきます。
その他のデモもこちらのデモ一覧で確認することができます。
　　

1. MOTION for the Web

綺麗なベルの音とともにボールが降ってきて、MOTIONの文字になります。
これだけでもmo.jsの「なめらかさ」が実感できるのではないでしょうか。

See the Pen ·● MOTION for the web ●· by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

　　 ### 2. Sleepy Mole 立方体が降ってきて、やがて地面からもぐらが眠そうにしながら起き上がってきます。 これも全部コードで実装されているというのは驚きですよ。

See the Pen Mole :: property curves example by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

　　 ### 3. Mograph 様々な幾何学模様がアニメーションとともに現れ、最後にMOJSのタイトルが現れます。

See the Pen mograph by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.