生き生きとしたモーションを作れるJSライブラリ、mo.jsがすごい

生き生きとしたモーションを作れるJSライブラリ、mo.jsがすごい

2016.04.19
eyecatch
やってみた

こんにちは、デザイナーのサリーです。

相変わらずJSに対する苦手意識が拭えない私ですが、自分で動きまでつけられるになりたいですよね。私でも扱えそうなライブラリないかな〜と探していたら、「mo.js」というアニメーションライブラリのDEMOが素敵だったので、チュートリアルを見つつ使い方を勉強してみました。

今回は「mo.js」の紹介をしたいと思います。

mo.jsとは?

mojs_img00
mo · js – Motion Graphics For The Web
去年リリースされた、滑らかなモーションを実現できるJSライブラリです。
モーションが感動するほど軽快なので、ぜひDEMOをご覧ください。


DEMO

mojs_img01
motion graphics for the web
公式DEMOその1、ロゴのアニメーションです。美しいです。
軽快にはずむボールが、ちゃんと楕円になっているところに注目・・・!

mojs_img02
bubble layout
公式DEMOその2です。

集合した円は、地球儀のような球体の面を表してるようで、ドラッグでぐりぐり動かすことができます。円をクリックしたときのウインドウが開く動きが気持ちいいですね〜、弾けるように出てくるバツボタンも素敵です。

mojs_img03
sleepy mole
公式DEMOその3、就寝前のモグラのアニメーション。

ロウソクを吹き消すモグラの、とても細かく丁寧に設定された動きが、反則的なまでにかわいいです(ツバ飛ばしてる・・・)。

mojs_img04
http://tympanus.net/Development/Animocons/
こちらは公式のDEMOではありませんが、codropsさんがmo.jsを使用して作った、アニメーションするいいね!ボタンです。

何回も押したくなる気持ちよさ。ソースを拝見したところ、上の公式DEMOよりもずっと簡単に作れそうです。


対応ブラウザ

  • Chrome 4+
  • Firefox 4+
  • Opera 11.5+
  • Safari 4+
  • IE 9+

ライセンスはMIT Licenseです。

mo.jsを使うための準備

mo.jsを読み込むだけで使えます。
jQueryには依存していません。

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

CDNの他、NPMBower、からも読み込みが可能です。

チュートリアルをやってみた

チュートリアルが用意されていますが、現状Path Easingの項目以外「soon」ですね。
というわけでPath Easingを試してみます。
Easing / Path Easing
公式では赤い正方形が飛び跳ねていますが、せっかくなのでこのブログのシンボルでのテレビちゃんを動かしてみました。


その1

See the Pen mo.js Path Easing TEST01 by sally (@sanshiki) on CodePen.

ごく基本の動きです。
repeatで繰り返しの回数を、delayで遅延時間を設定できます。
translateYを150pxに設定し、下に動かしています。


その2

See the Pen mo.js Path Easing TEST02 by sally (@sanshiki) on CodePen.

その1の動きに、easingbounce.outを設定しました。
back.outelastic.inなどに変更すると、全然違った動きになります。


その3

See the Pen mo.js Path Easing TEST03 by sally (@sanshiki) on CodePen.

easing01オリジナルのeasingを使用したサンプルです。ベジェ曲線をSVGにしてjs側で設定することで、望み通りのeasingを設定することができます。このサンプルで使用しているベジェ曲線は右図の通りです。

その2の跳ね方と比べると軽くていきいきとしていますね。CSSのtransitionではなかなか難しい表現です。曲線にこだわりだすとすごく時間がかかりそうですが、キャラクターに自然な動きをつけることが出来て良いですね。


その4

See the Pen mo.js Path Easing TEST04 by sally (@sanshiki) on CodePen.

scaleで縮小の動きをつけた例です。
easingはbounce.outを設定していますが、もちろんオリジナルのベジェ曲線を用いることも出来ます。


その5

See the Pen mo.js Path Easing TEST06 by sally (@sanshiki) on CodePen.

easing02translatescaleをそれぞれ設定しているサンプルです。
右図の青い曲線が位置、緑の曲線が大きさです。
いきいきと跳ねてますね。形の変化がとても綺麗です。


その6

See the Pen mo.js Path Easing TEST07 by sally (@sanshiki) on CodePen.

easing03今度は上から落ちてきたときの表現のサンプルです。こちらも青い曲線が位置、緑の曲線が大きさです。ピンポン玉を落としたときのような跳ね方ですね。もしバスケットボールだったらもっとゆるやかで大きな跳ね方でしょうか。

動かす物体の重さや素材も考えながら動きを付けていく必要がありますね、奥が深いです…


このあとは応用編で、DEMOにあったモグラのキャラクターを使ったチュートリアルを見ることができます。長くなるのでこの記事では省略いたしますが、興味のある方はそちらもじっくりご覧ください。

吹き消すときの舌の動きまで細かく設定されていて、一見の価値ありです!!
Easing / Path Easing

ロゴを動かしてみた

学んだ動きを使って dwango creatoers’ blog のロゴを動かしてみました。
チュートリアルで使ったTweenと、今回は紹介していませんが、玉が弾けて飛び散る動きのBurstを使っています。
今回はチュートリアルのベジェ曲線を利用して簡単に作りましたが、それっぽくなって良い感じです。

See the Pen mo.js Path Easing DCB by sally (@sanshiki) on CodePen.

でもPath Easingの本領発揮は、モグラのDEMOのようにキャラクターを動かすときですね。
パーツを細かく分けてひとつひとつ動きを調整していく作業は、かなり根気がいりそうではありますが、やり始めるとすごく楽しそうです。

感想

JS初心者のわたしでも動かすことが出来たので、中級者上級者の方ならもっといろいろなことが出来そうです。とはいえ、DEMOくらい凝った動きを作るのは相当難易度とコスト高そう・・・。あと、動画制作に慣れていないと動かし方に悩みそうです。

このあたりは経験を積んでセンスを磨いていくしかないですね。他のチュートリアルもOPENしたら挑戦してみようと思います。

それでは。

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

sally

サリー

Designer

静岡出身です。すごくよく寝ます。甘いもの好きです。

ドワンゴデザイナー メンバー募集 ! !