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

效果演示：

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

标签：

原文地址：http://my.oschina.net/leipeng/blog/530840