文章

www.jianshu.com/p/ca2fe032c…

  www.jianshu.com/p/fc9474cbd…

  //制作动画或小游戏——CreateJS事件（二）

yq.aliyun.com/articles/56…

概念

regx,regy (segmentfault.com/a/119000001…)

regX：The left offset for this display object's registration point

regY：The y offset for this display object's registration point

作用类似css 中的transform-origin,默认注册点在左上角

shape.regX = 100 shape.regY = 100

var graphics = new createjs.Graphics().beginFill('#000').drawRect(0, 0, 50, 50);
var shape = new createjs.Shape(graphics);

var canvas = document.querySelector('#canvas');
var stage = new createjs.Stage(canvas)
var count = 0;

// 将容器shape向右向下移动50，此时注册点也移动到了标准坐标系(50, -50)处
shape.x = 50;
shape.y = 50;
// 通过regX再给容器移动到原来的位置，此时“身体“进行了移动，但是注册点并没有移动
shape.regX = 50;
shape.regY = 50;

createjs.Ticker.addEventListener('tick', e => {
    shape.rotation = 1*count++;
  stage.update();
})

createjs.Ticker.timingMode = createjs.Ticker.RAF;

stage.addChild(shape);
stage.update();

代码段

// time based 每秒100px (两帧之间的时间是不确定的)
timeCircle.x = timeCircle.x + (event.delta)/1000*100;
if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; }
			
// not time based: 没帧5px
tickCircle.x = tickCircle.x + 5; // 100 / 20 = 5
if (tickCircle.x > stage.canvas.width) { tickCircle.x = 0; }

createjs.Tween.removeTweens(shapeExpoInOut);
		shapeExpoInOut.x = 150;
		createjs.Tween.get(shapeExpoInOut).wait(100).to({x:450}, 800, createjs.Ease.expoInOut);

使用户easeljs . sprite来创建sprite动画

www.createjs.cc/src/docs/ea… www.h5anli.com/demo/runjum… 一个案例