createjs入门

createjs是一个轻量级的框架，稍微有点时间和耐心，就可以把全部源代码都看一遍，毕竟只有三十几个js文件。地址：http://www.createjs.com/

开发createjs的动画或游戏，没有重型的IDE或什么工具支持，我们只能从零开始写js。一方面，这样对于jser来说，足够灵活；另外一方面，createjs因此足够精简足够小。

createjs由几个库组成：

l easeljs，这个是核心，包括了显示列表、事件机制；

l preloadjs，用于预加载图片等；

l tweenjs，用于控制元件的缓动；

l soundjs，用于播放声音。

 

easeljs 81k，preloadjs 31k，soundjs 34k，tweenjs 18k，对于手机小动画或小游戏，其实只需要加载easeljs即可，因为核心库已经涵盖了简单图片的预加载功能。

 

开发步骤：

1、 下载类库，可以使用源代码，也可以使用压缩过的min.js，就好像平时写网页一样。

2、 建立html和canvas标签，onload后再执行createjs相关逻辑。

3、 编写createjs逻辑。这个非常简单，因为createjs只提供了最简单的基础功能，我们理解了基础功能后就可以叠积木了。

 

关于createjs，最关键是要理解类结构

上图列出了createjs的主要类结构，所有舞台上的内容都是元件，元件的基类是DisplayObject。Container可以包含子元 件，舞台Stage本身也是Container。另外Sprite用于表现SpriteSheet帧动画人物、Bitmap用于展示纯静态的人物。

而Filter和Shadow则是滤镜分支，可以针对任意元件实现颜色变换、模糊、阴影等效果。使用滤镜的方式跟Flash一致，需要新建Filter实例，添加到目标元件的FilterList中，Createjs框架在下一帧就会把该元件加上滤镜效果。

 

下边以一个例子概要学习一下Createjs的使用：