var stage = new createjs.Stage("view"); container = new createjs.Container(); var data = { // 源图像的数组。图像可以是一个html image实例，或URI图片。前者是建议控制堆载预压 images:["imgs/easeljs-preloadjs-animation/moveGuy.png"], frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0}, animations:{ run:[0,3] } } var spriteSheet = new createjs.SpriteSheet(data) var instance = new createjs.Sprite(spriteSheet,"run") container.addChild(instance); stage.addChild(container); createjs.Ticker.setFPS(5); //设置帧 createjs.Ticker.addEventListener("tick",stage); stage.update();

这样，简单走路的效果就出来了（源码见 easeljs-sprite-01.html）：

如果想通过按钮控制动画的变换的话使用 gotoAndPlay(action) 方法调用对应的动画效果就行了。

我们修改HTML文档代码如下：

然后修改JS代码如下：

var stage = new createjs.Stage("view"); container = new createjs.Container(); var data = { images:["imgs/easeljs-preloadjs-animation/moveGuy.png"], frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0}, animations:{ stand:0, run1:[0,3], run2:[4,7], run3:[8,11], run4:[12,15] } } var spriteSheet = new createjs.SpriteSheet(data) var instance = new createjs.Sprite(spriteSheet,"run1") container.addChild(instance); stage.addChild(container); createjs.Ticker.setFPS(5); createjs.Ticker.addEventListener("tick",stage); stage.update(); document.getElementById('goStraight').onclick = function goStraight() { instance.gotoAndPlay("run1"); } document.getElementById('goLeft').onclick = function goLeft() { instance.gotoAndPlay("run2"); } document.getElementById('goRight').onclick = function goRight() { instance.gotoAndPlay("run3"); } document.getElementById('goBack').onclick = function goBack() { instance.gotoAndPlay("run4"); }

效果就出来了（源码见 easeljs-sprite-02.html）：

4.使用 Text 创建简单的文本

这个就比较简单了，直接看代码：

); ); stage.addChild(theText); stage.update();

这里有设置背景色为粉红：

#View { background-color: #fddfdf;}

显示效果为：

5.使用 Container 创建保存其他显示对象的容器

其实这个在前面已经用过了。不过还是单独写个例子，这个比较简单：

使用 Container 创建保存其他显示对象的容器); container = new createjs.Container(); createjs.Shape(); square.graphics.beginFill(); container.addChild(square); createjs.Shape(); square2.graphics.beginFill(); container.addChild(square2); createjs.Shape(); circle.graphics.beginFill(); container.addChild(circle); createjs.Shape(); circle2.graphics.beginFill(); container.addChild(circle2); stage.addChild(container); stage.update();

效果如下：

相关源码地址：Demo4CreateJS