Tween.js学習(1)

HTML

<script src="http://pyro.jp/dev/lib/js/easel.js"></script>
<script src="http://pyro.jp/dev/lib/js/tween.js"></script>
<div id="container">
    <canvas id="canvas" width="300" height="300"></canvas>
</div>

CSS

#container {
    background: #fff100;
    height: 300px;
    margin:0 auto;
    text-align: center;
}

JavaScript

var container, canvas, stage;

window.onload = init;
window.onresize = reisize;

function init() {
    var img;
    
    container = document.getElementById("container");
    canvas = document.getElementById("canvas");
    reisize();
    
    stage = new Stage( canvas );
    
    img = new Image();
    img.onload = imgLoaded;
    img.src = "http://jsfiddle.net/img/logo.png";
}

function imgLoaded(e) { 
    var initX;
    var img = e.target;
    var data = { "animations": {"off":0, "on":1}, 
                    "frames": {"regY": 0, "regX": 0, "count": 2, "width": 110, "height": 187}, 
                    "images": [img]
                   };
    var spriteSheet  = new SpriteSheet(data);
    var bmp = new BitmapAnimation(spriteSheet);
    bmp.x = initX = canvas.clientWidth - data.frames.width - 100;
    bmp.y = canvas.clientHeight * 0.5 - data.frames.height * 0.5;
    bmp.gotoAndStop("off");
    stage.addChild( bmp );
    
    Tween.get( bmp , { loop : true } )
        .wait( 1000 )
        .to( { x : 100 } , 1000 , Ease.quartIn )
        .call( bmp.gotoAndStop, [ "on" ], bmp )
        .to( { x : 50 } , 2000 )
        .call( bmp.gotoAndStop, [ "off" ], bmp )
        .to( { x : initX } , 1000 , Ease.sineOut )
        .wait( 1000 );
        
    Ticker.setInterval( 20 );
    Ticker.addListener( stage, false );
}

function reisize() {
    stageWidth = container.clientWidth;
    stageHeight = container.clientHeight;
    canvas.width = stageWidth;
    halfX = stageWidth * 0.5;
    halfY = stageHeight * 0.5;
}