CreateJs系列教程之 EaselJs_6_绘制动画走秀（spriteSheet）

核心JS代码：

var cjs = createjs,
canvas,
stage,
container,
w = window.innerWidth,
h = window.innerHeight;

function init() {
//设置canvas属性
canvas = document.getElementById('game');
canvas.width = w;
canvas.height = h;
//创建舞台
stage = new cjs.Stage(canvas);
container = new cjs.Container();//绘制外部容器
stage.addChild(container);

var data = {
images: ["imgs/dance.png"],
frames: {
width: 320,
height: 504,
count: 12
},
animations: {
dance: [0, 11]
}
};
var spriteSheet = new cjs.SpriteSheet(data),
animation = new cjs.Sprite(spriteSheet, "dance");

animation.set({x:0,y:0,scaleX: w/320,scaleY:h/504 });//缩放到全屏
container.addChild(animation);

cjs.Ticker.setFPS(15);//设置游戏帧率
cjs.Ticker.on("tick", stage);
}

说明讲解：

1：sprite数据构造

var data = {
images: ["imgs/dance.png"],
frames: {
width: 320, //每帧的宽度
height: 504, //每帧的高度
count: 12 //总的帧数
},
animations: {
dance: [0, 11]  //自定义动画名称
}
};

动画数据构造的形式有多种，分每一帧尺寸大小相同和不同的；这里采用的是相同的方法；

2：全频show

var spriteSheet = new cjs.SpriteSheet(data),
animation = new cjs.Sprite(spriteSheet, "dance");//开始就执行 定义的dance动画

animation.set({x:0,y:0,scaleX: w/320,scaleY:h/504 });//缩放到全屏
container.addChild(animation);

效果演示：