『mo.js』 – 高度なモーションを作れる JSライブラリ

mo.jsは「Motion Graphics For The Web」というキャッチコピーの、JavaScriptライブラリ。非常に簡単なコードで、本格的なモーショングラフィックを作成することができます。

使い方は次の通り

まずは、HTMLを準備して

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

CSSで整え、

.square {
  width:      50px;
  height:     50px;
  background: #F64040;
  position:   absolute;
  top:        10px;
  left:       50%;
  margin-left: -25px;
  margin-top:  -25px;
}

ライブラリを読み込みます。

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

スクリプトを組み込みます。

var square = document.querySelector('#js-square');
  new mojs.Tween({
    repeat: 999,
    delay: 2000,
    onUpdate: function(progress) {
      square.style.transform = 'translateY(' + 200 * progress + 'px)';
    }
  }).run();

これでアニメーションができあがります。ただ、これだけなら jQueryでも同じようなことができますが、ここに1行加えるだけで…

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

弾むようなアニメーションが作れます。この他、デモサイトには数多くの高度なモーションが掲載されています。Flash並のアニメーションが JavaScriptで動作しています。

使いこなすには、かなりのセンスが問われそうですが、非常に可能性を感じるライブラリですね。

Comments

comments