tween.jsとは

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

(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 } )
                //2秒後に目的地まで移動。
                //というより、キー「x」のバリューは2秒後に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

<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)
			//実行して1秒遅らせてからアニメーション
			.delay(1000)
			//イージングの種類
			.easing(TWEEN.Easing.Elastic.InOut)
			//下のfunction update()を実行
			.onUpdate(update);
	
		//もう1つのトゥイーン設定。戻ってくる動きの方
		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>

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

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

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

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

動きのある表現を今までしていたときは、setIntervalsetTimeoutなどを使っていたと思います。このRequestAnimationFrameは前者の2つに代わるもので、何がメリットかというと、ウィンドウが非アクティブならタイマーが止まって、いつの間にかメモリーがたくさん使われている。といったことを回避できるみたいです。しかしまだベンダードラフトなので、いつ仕様が変わるかわからず、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も見ておきます。

(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
【JavaScript】高機能アニメーションライブラリtween.jsの使い方
Pocket

Tagged on:     

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です