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

效果演示：