【JavaScript】高機能アニメーションライブラリtween.jsの使い方

tween.jsとは

クリック

四角いdiv要素をクリックしたら、びょんびょんびょーーーんっと、動いたと思います。早速これのサンプルコードはこちら。（jQueryで書いてます。）

js

(function(){
    if(typeof jQuery == 'undefined')return;
    jQuery.noConflict();
    jQuery(function($){
        //対象の要素を取得
        var twObj = $('#obj');
        twObj.text('クリック');
        twObj.click(function(){
            twObj.text('クリック');
            //クリックしたら実行
            init();
        });
        //要素をわかりやすくCSS適応
        twObj.css({
           　'position':'absolute', 
           　'left':'0xp', 
           　'height':'50px', 
           　'width':'50px', 
           　'background-color':'#0FF', 
           　'font-size':'12px'
        });
        function init() {
            //new TWEEN.Tween(引数)に初期座標
            var tween = new TWEEN.Tween( { x: 0 } )
                //２秒後に目的地まで移動。
                //というより、キー「x」のバリューは２秒後に400になる。
                .to( { x: 400 }, 2000 )
                //to()までの数値変化のイージング種類
                .easing( TWEEN.Easing.Elastic.InOut )
                //最初に一回だけonUpdateメソッドで対象要素にCSS,leftを適応。
                .onUpdate( function () {
                    twObj.css('left', this.x + 'px');
                    //console.log(this.x);
                })
                //移動した後に実行するonComplete
                .onComplete(function(){
                    twObj.text('おしまい');
                });
            //tweenを実行
            tween.start();
        }
 
        //setIntervalやsetTimeoutの代わり
        function animate() {
            requestAnimationFrame(animate); 
            TWEEN.update();
        }
        //アニメーション実行
        animate();
    });
})();

tween.jsはJavaScript製のアニメーションライブラリです。jQueryや MooToolsなどを使えば簡単なアニメーションは可能でしたが、このtween.jsを使えば、JavaScriptで複雑なアニメーションを表現する事が可能になります。FlashのTweenerみたいですね。ダウンロードして内容を見てみました。

• twee.js

  • https://github.com/sole/tween.js/

• ドキュメント

  • http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

• demo

  • http://learningthreejs.com/data/tweenjs_for_smooth_animation/tweenjs_for_smooth_animation.html

圧縮したライブラリは、ダウンロードしたフォルダーの中にあるbuildフォルダーにありました。非圧縮は12KBで圧縮は8KBなので、スマートフォンでも使えそうな容量ですね。

Hello World!を見てみましょう

examplesフォルダーにある00_hello_world.htmlファイルのJavaScriptの記述です。

00 _ HELLO WORLD

http://sole.github.com/tween.js/examples/00_hello_world.html

js

<script src="../build/Tween.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script>
    //変数設定
    var position;
    var target;
    var tween, tweenBack;
 
    init();
    animate();
 
    function init() {
        //動かすモノの初期設定
        position = {x: 100, y: 100, rotation: 0};
        //動かすidを取得
        target = document.getElementById('target');
        //new TWEEN.Tween(ここの中身が)トゥイーンして数値が変わる
        tween = new TWEEN.Tween(position)
            //移動する先の座標と回転
            .to({x: 700, y: 200, rotation: 359}, 2000)
            //実行して１秒遅らせてからアニメーション
            .delay(1000)
            //イージングの種類
            .easing(TWEEN.Easing.Elastic.InOut)
            //下のfunction update()を実行
            .onUpdate(update);
     
        //もう１つのトゥイーン設定。戻ってくる動きの方
        tweenBack = new TWEEN.Tween(position)
            .to({x: 100, y: 100, rotation: 0}, 3000)
            .easing(TWEEN.Easing.Elastic.InOut)
            .onUpdate(update);
 
        //メソッドチェーンでアニメーションループができる。
        tween.chain(tweenBack);
        tweenBack.chain(tween);
         
        //アニメーションスタート
        tween.start();
    }
 
    function animate() {
        //setIntervalやsetTimeoutの代わり（後ほど説明）
        requestAnimationFrame( animate );
        //数値を
        TWEEN.update();
    }
 
    function update() {
        //TWEENで変数positionの数値をそれぞれに割り当てる
        target.style.left = position.x + 'px';
        target.style.top = position.y + 'px';
        target.style.webkitTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
        target.style.MozTransform = 'rotate(' + Math.floor(position.rotation) + 'deg)';
 
    }
</script>

少し最初の２行目を見てみます。

js

<script src="../build/Tween.js"></script>
<script src="js/RequestAnimationFrame.js"></script>

これの１行目はtween.jsライブラリを読み込む記述です。２行目は、ブラウザがRequestAnimationFrameに対応しているかどうか判断するためのJavaScriptです。

ちょっと脱線しますが、RequestAnimationFrameについて。

動きのある表現を今までしていたときは、setIntervalやsetTimeoutなどを使っていたと思います。このRequestAnimationFrameは前者の２つに代わるもので、何がメリットかというと、ウィンドウが非アクティブならタイマーが止まって、いつの間にかメモリーがたくさん使われている。といったことを回避できるみたいです。しかしまだベンダードラフトなので、いつ仕様が変わるかわからず、jQueryもバージョン1.6でサポートしましたが、1.6.3では使われなくなり、setIntervalに戻され、1.7でもrequestAnimationFrameは使われてないようです。setIntervalのqueryが衝突してしまうなどの噂もありますので、requestAnimationFrameとsetInterval、setTimeoutを併用して使う場合は、少し注意がいるかもしれません。W3Cからは2012年2月21日時点で、最終草案が発表されたみたいですので、英語サイトですが見ておくといいかもしれません。

Timing control for script-based animations - W3C

http://www.w3.org/TR/2012/WD-animation-timing-20120221/

簡単にRequestAnimationFrame.jsも見ておきます。

RequestAnimationFrame.js

(function() {
    //初期化
    var lastTime = 0;
    //対応しているブラウザのチェックリスト。
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    //ここから下でチェックしています。
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
    //もし、requestAnimationFrameが対応していなかったら、
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            //setTimeouのIDを代入。
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    //もし、cancelAnimationFrameが対応していなかったら、
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            //代入したIDでタイマーを止める
            clearTimeout(id);
        };
}());

つまりこのScriptは、requestAnimationFrameが対応しているブラウザじゃなかったら、setTimeoutを代用していくれるScriptです。

tweenのメソッドチェーン

new TWEENした後に実行メソッドの種類。

• Tween(object);
  トゥイーンさせるobjectを引数に入れる。
• to(object, Number);
  第一引数に目的の値、第二引数に目的までの時間
• easing(object);
  TWEEN.Easing.○○.○○を入力。種類はこの後。
• delay(Number);
  ディレイは遅れるという意味なので何秒遅れて実行するか。
• onUpdate(function(){});
  トゥイーン中に実行する関数を記述する。
• onComplete(function(){});
  トゥイーン完了後に実行する。

イージングの種類

easing(TWEEN.Easing.○○.○○); ここの○○のところに記述できる種類が書かれています。03_graphs.htmlにも書いてます。グラフの曲線があることで、動きの流れがわかりやすくなってますね。

03 _ GRAPHS

http://sole.github.com/tween.js/examples/03_graphs.html

Linear.None

Quadratic.In

Quadratic.Out

Quadratic.InOut

Cubic.In

Cubic.Out

Cubic.InOut

Quartic.In

Quartic.Out

Quartic.InOut

Quintic.In

Quintic.Out

Quintic.InOut

Sinusoidal.In

Sinusoidal.Out

Sinusoidal.InOut

Exponential.In

Exponential.Out

Exponential.InOut

Circular.In

Circular.Out

Circular.InOut

Elastic.In

Elastic.Out

Elastic.InOut

Back.In

Back.Out

Back.InOut

Bounce.In

Bounce.Out

Bounce.InOut