createjs Ticker性能

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"),
    fps,
    circle, text;

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

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

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

//动画基于时间，而不是fps
var global_delta = 1 / fps;

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

  stage.update(evt);
});

//圆形
stage.addChild((circle = new createjs.Shape())).set({x: 100, y: 100}).graphics.f('#f60').dc(0, 0, 50);
circle.on('tick', function () {
  // 500表示位移速度为：500px/s，所有的位移均乘以_delta，换算成「真实时间」的位移
  if (!createjs.Ticker.getPaused()) {
    this.x += 500 * global_delta;
    if (this.x > canvas_w + 50) {
      this.x = -50;
    }
  }
});

//文字
stage.addChild((text = new createjs.Text('内容', '14px monospace', '#000')));
text.lineHeight = 15;
text.textBaseline = 'top';
text.verticalAlign = 'left';
text.set({x: 10, y: canvas_h - text.lineHeight * 5 - 10});//距离左下角(10, 10)
text.on('tick', function () {
  this.text = '\
getPaused(): ' + createjs.Ticker.getPaused() + '\n\
getTime(true): ' + ~~createjs.Ticker.getTime(true) + 'ms\n\
getTime(false): ' + ~~createjs.Ticker.getTime(false) + 'ms\n\
getMeasuredFPS(): ' + ~~createjs.Ticker.getMeasuredFPS() + 'fps\n\
getMeasuredTickTime(): ' + createjs.Ticker.getMeasuredTickTime() + 'ms\
';
});

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';
};