【JavaScript】高機能アニメーションライブラリtween.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();
    });
})();

<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>

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