3 Circle with pause
<script> var stage, timeCircle; function init() { stage = new createjs.Stage("demoCanvas"); timeCircle = new createjs.Shape(); timeCircle.graphics.beginFill("red").drawCircle(0, 0, 40); timeCircle.y = 50; stage.addChild(timeCircle); // Paused based on tick tickCircle = new createjs.Shape(); tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40); tickCircle.y = 160; stage.addChild(tickCircle); // Paused based on time pauseCircle = new createjs.Shape(); pauseCircle.graphics.beginFill("green").drawCircle(0, 0, 40); pauseCircle.y = 270; stage.addChild(pauseCircle); // UI code: output = stage.addChild(new createjs.Text("", "14px monospace", "#000")); output.lineHeight = 15; output.textBaseline = "top"; output.x = 10; output.y = stage.canvas.height-output.lineHeight*3-10; createjs.Ticker.addEventListener("tick", tick); createjs.Ticker.setFPS(60); } function tick(event) { // time based timeCircle.x = timeCircle.x + (event.delta)/1000*100; if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0;} // pausing tick based if (!event.paused) { tickCircle.x = tickCircle.x + 2.1; tickCircle.alpha = 1.0; if (tickCircle.x > stage.canvas.width) { tickCircle.x = 0;} }else{ tickCircle.alpha = 0.4; } // pausing time based if (!event.paused) { pauseCircle.x = pauseCircle.x + (event.delta)/1000*100; pauseCircle.alpha = 1.0; if (pauseCircle.x > stage.canvas.width) { pauseCircle.x = 0;} }else{ pauseCircle.alpha = 0.4; } output.text = "getPaused() = "+event.paused+"\n"+ "getTime(true) = "+createjs.Ticker.getTime(true)+"\n"+ "getTime(false) = "+createjs.Ticker.getTime(false); stage.update(); } function togglePause() { var paused = !createjs.Ticker.paused; createjs.Ticker.paused = paused; document.getElementById("pauseBtn").value = paused ? "resume" : "pause"; } </script> <input type="button" value="pause" id="pauseBtn" onclick="togglePause();"><br> <canvas id="demoCanvas" width="500" height="360"> alternate content </canvas> <script> init(); </script>
1 Comment
Choy Sze Tsan Clifford
Victor Cheung: according to http://www.createjs.com/Docs/EaselJS/classes/Ticker.html#method_getTime, getPaused() is deprecated. Hence, please update this example by using "paused" property as suggested.