Start/Stop Tweens

by lannymcnie

HTML

<script src="https://code.createjs.com/createjs-2015.11.26.combined.js"></script>
<canvas id="canvas" width="800" height="300"></canvas>
<input type="button" value="Start/Stop Tween 1" id="toggleTween1" />
<input type="button" value="Start/Stop Tween 2" id="toggleTween2" />

JavaScript

var stage = new createjs.Stage("canvas");
createjs.Ticker.on("tick", tick);

var shape = new createjs.Shape().set({x:50,y:50});
shape.graphics.f("red").dc(0,0,25);
stage.addChild(shape);

// Tween left and right
var tween1 = createjs.Tween.get(shape, {loop:true})
	.to({x:550}, 1000, createjs.Ease.quadOut)
	.to({x:50}, 1000, createjs.Ease.quadIn)
    
// Tween up and down
var tween2 = createjs.Tween.get(shape, {loop:true})
	.to({y:250},800,createjs.Ease.quadInOut)
   	.to({y:50},800,createjs.Ease.quadInOut);
    
document.getElementById("toggleTween1").onclick = function() {
	toggleTween(tween1)
};
document.getElementById("toggleTween2").onclick = function() {
	toggleTween(tween2)
};

function toggleTween(tween) {
	if (tween.paused) {
    	tween.paused = false;
        tween.setPaused(false);
    } else {
    	tween.paused = true;
        tween.setPaused(true);
    }
}

function tick(event) {
    stage.update(event);
}