ホームページにダイナミックな動きを！JavaScriptフレームワーク「mo.js」の特徴と使い方

2018年05月29日

プログラミング言語

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

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

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

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

「mo.js」とは？

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

「mo.js」の特徴

アニメーションに関する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.

使い方

デモを確認しただけでも、本当に様々な動きが実装できるということを理解していただけたと思います。
シンプルなアニメーションであれば、それほど複雑なコードは必要ありません。
ここでは、小さなボールが跳ねるようなアニメーションを実装しながら、「mo.js」の使い方を確認していきましょう。
　　

1. HTMLを準備＆CSSで整形

まず、小さな円を描くために次のようなHTMLを記述します。

<div class="circle" id="js-circle"></div>

次に、このエリアに小さなボールを描くために、CSSで整形していきます。

.circle {
　　width: 50px;
　　height: 50px;
　　background: navy;
　　position: absolute;
　　top: 10px;
　　left: 50%;
　　margin-left: -25px;
　　margin-top:  -25px;
　　border-radius: 50%;
}

すると、このような感じで青いボールを表示することができます。

absolute属性を必ず指定して、自由に配置することができるようにしましょう。
　　

2. 「mo.js」ライブラリの読み込み

mo.jsを読み込みます。jQueryや他のライブラリには依存していないので、下記のコード(cdn)を読み込むだけでOKです。

<script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>

また、npmなら

npm install mo-js

bowerなら

bower install mojs

でmo.jsをインストールすることもできます。
　　

3. スクリプトの記述

次に、実際にどのように動くかを、スクリプトで記述していきます。

var circle = document.querySelector('#js-circle');
new mojs.Tween({
　　repeat: 999,
　　delay: 500,
　　speed: 0.3,
　　onUpdate: function(progress) {
　　　　var bounceProgress = mojs.easing.bounce.out(progress);
　　　　circle.style.transform = 'translateY(' + 200 * bounceProgress + 'px)';
　　}
}).play();

コードの解説

- var circle = … で円のオブジェクトを定義しています
- repeat・delay・speedはそれぞれ繰り返し回数・遅延時間・再生スピードを設定しています
- bounceProgressという変数は、mo.js特有のバウンスアウト(mojs.easing.bounce.out)を設定しています
- circle.style.transformの部分で、円のY座標にバウンス処理を加えた座標のアニメーションを実装しています