tween.jsでアニメーション - DOM要素を落下させてみる。

tween.js

githubのreadmeに、

Javascript Tweening Engine

とあるとおり、トゥイーンとするライブラリで、DOMオブジェクトのアニメーションが簡単に作れるっぽい。以前、three.jsでカレンダーを3Dにしてみた。で作ったページでも使っているけど、その時はtween.jsで何ができるか詳しく調べていなかったので、今回tween.jsに注目してちょっと試してみた。

DOM要素を順番に落下させる。

↓のようなサンプルを作ってみた。

ページ上にいくつかある青いのは<span>要素なんだけど、これを並べておいて、左から順番に落下させるというアニメーション。 実際に動くページは、こちら。

ソース

htmlは(bootsrap2.3を使ってる)、

  

    01
  
  

    02
  
  

    03
  
  :

で、横並びの数字バッヂを作った。

Javascriptは、

function init() {
  var boxes = $('box');
  for (var i = 0; i < boxes.length; i++) {
    var box = $(boxes[i]);
    box.css('position', 'relative');
    var elem = { y: 0, box: box };
    var clallback = function () {
      this.box.css('top', this.y + 'px');
    };
    var tween = new TWEEN.Tween(elem)
          .to({ y: 400 }, 2000)            // 2000msかけてyを400まで持っていく。
          .easing(TWEEN.Easing.Bounce.Out) // Bounce.Outを使ってバウンドさせる。
          .onUpdate(callback)              // アップデート時のコールバックを指定。
          .delay(1000 + i * 200)           // となりの要素よりも200ms遅れて動き出す。
          .start();
  }
};

function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
};

$(function() {
  init();
  animate();
});

のようにした。あ、jQueryも使ってます。対象の動かし方を決めるTWEEN.Easingにはたくさん種類があって、今ひとつどれがどれなのか把握できていないので、別の機会に全部試してみようと思ってる。あと、TWEEN.Tweenはチェーンが組めるので、いろいろなアニメーションをつなげることで、結構複雑なアニメーションが実現できる。チェーンを使ったサンプルは、本家の例にもある。