createjs基于时间的Ticker

by Yanan Tian

HTML

<div>
  <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;

//设置画布
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);

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

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

  // 500 表示位移速度为：500px/s，所有的位移均乘以 delta 缩放倍数，换算成「真实时间」的位移
  circle.x += 500 * evt.delta;
    
  if(circle.x > canvas_w + 50){
  	circle.x = -50;
  }
	stage.update(evt);//不要忘了
});

window.toggleFps = function (evt){
  var sel = evt.target;
  fps = sel.value || fps;
  createjs.Ticker.setFPS(fps);
};