createjs暂停&timeMode

by Yanan Tian

HTML

<div>
  <input type="button" value="pause" onclick="togglePause(event)"/>
  <select id="fpssel" type="text" onchange="toggleFps(event)">
    <option value="10">10</option>
    <option value="30" selected>30</option>
    <option value="40">40</option>
    <option value="60">60</option>
  </select>
</div>
<canvas width="400" height="300" id="mineCanvas"></canvas>
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>

JavaScript

var stage = new createjs.Stage("mineCanvas"),
  circle, txt;

//设置画布
var canvas_w = stage.canvas.width,
  canvas_h = stage.canvas.height;

//圆形
stage.addChild((circle = new createjs.Shape())).set({x: 100, y: 100}).graphics.f('#f60').dc(0, 0, 50);

//文字
stage.addChild((txt = new createjs.Text('内容', '14px monospace', '#000')));
txt.lineHeight = 15;
txt.textBaseline = 'top';
txt.verticalAlign = 'left';
txt.set({x: 10, y: canvas_h - txt.lineHeight * 5 - 10});//距离左下角(10, 10)

//刷新频率
var fps = document.querySelector("#fpssel").value || 60;
createjs.Ticker.setFPS(fps);

//timing mode
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

createjs.Ticker.on('tick', function(evt){
	// 为方便计算，循环体中的所有位移，均认为是 1s 中的位移，只要乘以 delta 参数，即可得到真正的位移
  //  - 「真实时间」相对于 1000ms 「缩放」的倍数
  evt.delta = evt.delta / 1000;

  // 500 表示位移速度为：500px/s，所有的位移均乘以 delta 缩放倍数，换算成「真实时间」的位移
  if(!createjs.Ticker.getPaused()){
    circle.x += 500 * evt.delta;
    if(circle.x > canvas_w + 50){
      circle.x = -50;
    }
	}
  
  txt.text = '\
      getPaused(): ' + createjs.Ticker.getPaused() + '\n\
      getTime(true): ' + ~~createjs.Ticker.getTime(true) + 'ms\n\
      getTime(false): ' + ~~createjs.Ticker.getTime(false) + 'ms\
    ';
  
	stage.update(evt);//不要忘了
});

window.toggleFps = function (evt){
  var sel = evt.target;
  fps = sel.value || fps;
  createjs.Ticker.setFPS(fps);
};
window.togglePause = function (evt){
var btn = evt.target,
    paused = !createjs.Ticker.getPaused();
  createjs.Ticker.setPaused(paused);
  btn.value = paused ? 'unpause' : 'pause';
};