前三个都是api中的例子。加入了一些自己的理解。
动画无非就是定时改变现实对象，或者改变现实对象的状态。第一个例子学会了在舞台上呈现一个显示对象—Shape类型的圆；第二个例子学会了定时做一些事情tick，以及鼠标交互。
结合起来就可以做动画了。还是直接上代码：
//创建stage，参数为canvas的id
var stage=new createjs.Stage("gameMain");
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
function tick(event){
stage.update();//需要tick，然后自己update,才能刷新显示。
//stage.tick();//官方API说：A stage is the root level Container for a display list. Each time its tick method is called, it will render its display list to its target canvas.我居然信了，试了试不对，看源码也不是调用tick就能刷新显示。不知道是不是因为我英文太差理解错了。或者这句只是针对它下边给出的例子的，而他给出的例子里边，每次tick的时候都update了。
//console.log(stage.mouseX);//mouseX属性还是一直有值的，不错。
}
//创建一个shape
var circle=new createjs.Shape();
circle.graphics.beginFill("#00ff00");
circle.graphics.drawCircle(0,0,40);
//设置显示元件的位置
circle.x=-50;
circle.y=100;
//添加到显示列表
stage.addChild(circle);
//必须点到有东西的地方才会发送click,这点和as不一样，所以给stage一个透明的背景；或者有其他方法。
var bg=new createjs.Shape();
bg.graphics.beginFill("#ff0000");
bg.graphics.drawRect(0,0,stage.canvas.width,stage.canvas.height);//p.drawRect = p.rect;为了适应as和canvas原生，源码里边是这么处理的。
stage.addChildAt(bg,0);
bg.alpha=0.01;//完全透明的话，不响应鼠标点击事件。或者有其他方法。
var move=true;
var SPEED=5;
stage.addEventListener("click",handlerClick);
function handlerClick(event){
move=!move;
}
stage.addEventListener("tick",handlerTick);//tick相当于as里边的enterFrame
function handlerTick(event){
if(move){
circle.x+=SPEED;
if(circle.x>stage.stage.canvas.width){
circle.x-=stage.canvas.width;
}
}
}
圆自己在动，点击舞台，圆就会停止运动，再点击，圆又会开始运动。
想象力不够，就只能做出这么简单的例子，方法都一样，能做什么，在于自己了。
canvas本身有一套画图功能，为了封装成和as类似的，有时候会很纠结，毕竟思路差别挺大的，所以不要太介意。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。