CreateJS Bitmapクラスで画像描画→ボタンクリックでTween #CreateJS

ご縁がありCreateJS勉強中。

下記、gifのように
丸を描画して、それをクリックすると
イカ画像がTweenするコードです。

Bitmapクラス、Tweenの扱いの参考メモです。

sample

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>イカがTween</title>
</head>
<body>

    <canvas id="canvas" width="1920" height="1140" style="background:aqua;"></canvas>
    <script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>

    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function(){
            create();
        }, false);

        function create(){

            // stage生成
            var stageElm = document.querySelector('#canvas');
            var stage = new createjs.Stage(stageElm);
            // フレームレート設定
            createjs.Ticker.setFPS(30);
            // 1フレームごとに実行
            createjs.Ticker.addEventListener('tick', function(){
                stage.update();
            });


            // Bitmapクラスを使ってイカ画像をステージに表示する
            var ika = new createjs.Bitmap('ika.gif');
            //イカ画像の位置を設定
            ika.set({x:100, y:100});
            // スケールも変更できるみたいす
            ika.scaleX = 0.5;
            ika.scaleY = 0.5;
            // イカ画像をステージに追加
            stage.addChild(ika);


            // イカ動かすようのボタン描画
            var graphic = new createjs.Graphics();
            graphic.beginFill('deeppink') // 色
            .drawCircle(50, 50, 30); // 円の位置とサイズ (x1,y1,size)
            var btnShape = new createjs.Shape(graphic);
            stage.addChild(btnShape);


            // ボタンにmousedownイベント
            btnShape.addEventListener('mousedown', function(evt){
                ikaTween();
            });

            // イカのtween
            function ikaTween(){
                 createjs.Tween.get(ika).to({x: 500, scaleX: 1, scaleY: 1}, 1000)
                                        .to({x: 100, scaleX: 2, scaleY: 2}, 1000)
                                        .to({x: 100, scaleX: 0.5, scaleY: 0.5}, 1000)
                                        .to({alpha: 0}, 500)
                                        .to({alpha: 1}, 500);
            }

        }
    </script>
</body>
</html>