im007boy/gist:3959027

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>TweenJS: Canvas Tweening Example</title>

    <link rel="stylesheet" href="assets/demoStyles.css" />

    <!-- We also provide hosted minified versions of all CreateJS libraries.
      http://code.createjs.com -->

    <script>
    function init() {
        stage = new createjs.Stage("canvas1");

        var circle = new createjs.Shape();
        circle.graphics.beginFill("#FF0000").drawCircle(0,0,50);

        stage.addChild(circle);

        // set up a tween that tweens between scale 0.3 and 1 every second.
        circle.x = 0;
        circle.y = 0;
        tw = createjs.Tween.get(circle,{loop:false, onChange: function(){
            console.log(tw.position);
        }}).to({x:300,y:0},1000,createjs.Ease.bounceOut) // tween to scaleX/Y of 1 with ease bounce out
                .call(function(){
                    setTimeout(function(){
                        tw.to({y: 100}, 0).setPaused(false).call(function(){
                            alert('finish 0')
                        });
                    },500);
                });

        createjs.Ticker.setFPS(20);
        // in order for the stage to continue to redraw when the Ticker is paused we need to add it with
        // the second ("pauseable") param set to false.
        createjs.Ticker.addListener(stage,false);

    }
    </script>
</head>

<body onload="init();">

    <header id="header" class="TweenJS">

    </header>

    <canvas id="canvas1" width="960" height="350"></canvas><br/>
    <input type="button" value="toggle paused" onclick="Ticker.setPaused(!Ticker.getPaused());"
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>TweenJS: Canvas Tweening Example</title>

	<link rel="stylesheet" href="assets/demoStyles.css" />

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	http://code.createjs.com -->

	<script>
	function init() {
	stage = new createjs.Stage("canvas1");

	var circle = new createjs.Shape();
	circle.graphics.beginFill("#FF0000").drawCircle(0,0,50);

	stage.addChild(circle);

	// set up a tween that tweens between scale 0.3 and 1 every second.
	circle.x = 0;
	circle.y = 0;
	tw = createjs.Tween.get(circle,{loop:false, onChange: function(){
	console.log(tw.position);
	}}).to({x:300,y:0},1000,createjs.Ease.bounceOut) // tween to scaleX/Y of 1 with ease bounce out
	.call(function(){
	setTimeout(function(){
	tw.to({y: 100}, 0).setPaused(false).call(function(){
	alert('finish 0')
	});
	},500);
	});

	createjs.Ticker.setFPS(20);
	// in order for the stage to continue to redraw when the Ticker is paused we need to add it with
	// the second ("pauseable") param set to false.
	createjs.Ticker.addListener(stage,false);

	}
	</script>
	</head>

	<body onload="init();">

	<header id="header" class="TweenJS">

	</header>

	<canvas id="canvas1" width="960" height="350"></canvas><br/>
	<input type="button" value="toggle paused" onclick="Ticker.setPaused(!Ticker.getPaused());"
	</body>
	</html>