mo.jsは単体で高度なモーションを実現できるJSライブラリです。かなりシンプルな記述でDOM要素をアニメーションさせることができます。
チュートリアルをざっくり読んだかんじでは”気持ちのいいモーション”を作ることに並々ならぬ執念を感じます。あとでちゃんと書きますがSVGでイージングのグラフを自作できるのは衝撃的でした。確かに便利。
用意するもの
まずは公式からプラグイン一式をダウンロードしましょう。
基本的に必要なものは本体のjsのみです。そしてアニメーションさせたい要素にidをふっておきます。
<div class="square" id="js-square"></div> <script src="mo.min.js"></script>
CSSは必要に応じて適当に当ててください。
.square {
width: 50px;
height: 50px;
background: #aaa;
position: absolute;
top: 200px;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
基本的な使い方 CSSアニメーション
上記で作成した四角をmo.jsで動かしていきましょう。
<h1>アニメーションさせたい要素</h1>
//動かす要素の取得
var square = document.querySelector('#js-square');
//イージングのためのsvgパス情報
var bouncyEasing = mojs.easing.path('M0,100 C6.50461245,96.8525391 12.6278439,88.3497543 16.6678547,0 C16.6678547,-1.79459817 31.6478577,115.871587 44.1008572,0 C44.1008572,-0.762447191 54.8688736,57.613472 63.0182497,0 C63.0182497,-0.96434046 70.1500549,29.0348701 76.4643231,0 C76.4643231,0 81.9085007,16.5050125 85.8902733,0 C85.8902733,-0.762447191 89.4362183,8.93311024 92.132216,0 C92.132216,-0.156767385 95.0157166,4.59766248 96.918051,0 C96.918051,-0.156767385 98.7040751,1.93815588 100,0');
//アニメーションを新規作成
new mojs.Tween({
repeat: 1, //アニメーションのリピート回数
delay: 0, //アニメーションの開始タイミング
duration: 1500, //アニメーション全体の時間
onUpdate: function (progress) {
//progressが時間によって0〜1を返す値です。
//事前に定義したイージングパスにprogressをセットし、イージングを反映した値にします。
var bouncyProgress = bouncyEasing(progress);
//イージング反映の値に移動量をかけてCSSアニメーションを行います。
square2.style.transform = 'translateY(' + 200*bouncyProgress + 'px)';
}
}).run();
基本的にはこんな感じです。開始タイミングなど全体の設定部分と、onUpdateのところの要素ごとのアニメーション内容に分かれています。onUpdate内にはstyleで変化させたい要素を指定して、その値部分に生成したイージングを入れることで気持ちのいい動きを実装します。
イージングパスもSVGなのでIllustratorなんかで編集できるのが魅力。SVG情報のd属性から持ってきて入れればそれがそのまま動きに反映されるのが面白いです。注意点としては、d属性の最初は「M0,100 」で固定っぽいところでしょうか。SVGからコピーする時はその頭の情報のあとからコピーすると良いでしょう。
一つの要素の違う動きにそれぞれイージングをかけられる！
異なる動きに対してそれぞれにイージングを当てるとぐっとアニメーションがリッチになります。こちらの例では”円が上昇する”、”縦横幅の変化”それぞれに対してイージングを当てるとても有機的な表現を実現しています。
var square = document.querySelector('#js-square');
//上昇用のイージングパス
var translateCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0');
//変形用のイージングパス
var squashCurve = mojs.easing.path('M0,100.004963 C0,100.004963 25,147.596355 25,100.004961 C25,70.7741867 32.2461944,85.3230873 58.484375,94.8579105 C68.9280825,98.6531013 83.2611815,99.9999999 100,100');
new mojs.Tween({
repeat: 1,
delay: 0,
duration: 1500,
onUpdate: function (progress) {
//上昇と変形させるための値をまとめて定義
var translateProgress = translateCurve(progress),
squashProgress = squashCurve(progress),
scaleX = 1 - 2*squashProgress,
scaleY = 1 + 2*squashProgress;
//上記の値をstyleにセット
square.style.transform =
'translateY(' + -180*translateProgress + 'px) '+
'scaleX(' + scaleX + ') ' + 'scaleY(' + scaleY + ')';
}
}).run();
公式にあるすごいデモは、こういったあらゆる動きを設定して滑らかなアニメーションを実現させています。ひとつひとつの動作を設定していくのはとても地道な作業です。
AEとかで動画作ってても思いますが、どんなにソフトやコードの記述が楽になっても地道であることは変わらないですねー。
（他のデモにあるように円が飛び散るとかシンプルな図形がインタラクティブな動きをする的なものは、すっきり記述できる可能性はありますが）
