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

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

阅读量：6457 次

发布时间：2019-06-23

本文共 1413 字，大约阅读时间需要 4 分钟。

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