createjs之Easeljs

Easeljs是什么

easeljs是在HTML5构建高性能2D交互的库，它提供了功能丰富的显示列表去允许你操作以及设置动画于图形。同时它对于鼠标以及移动端触摸交互提供了强劲的交互模型。
它在构建游戏，广告，数据可视化，以及其他高度图形化方面表象优秀，他可以独立工作，也可以配合createjs其他模块如：soundjs，preloadjs，tweenjs一起工作。
此外，它没有外部依赖，可以与几乎任何框架保持兼容。
CDN URL： https://code.createjs.com/1.0...

常见的类

Easeljs定义的类，或者说API，参考了Flash的API，对于JS或者Flash开发者都比较好上手，如果是前端同学转去做H5动画，对于Flash还是要了解一下，因为这种框架不是从前端的眼界去出发的，有很多概念就是来自于视频的制作，动画的制作，比如什么是舞台，什么是精灵元素，什么是摄像机，这些都不是我们前端学习了解的范畴，但是如果涉入到动画这一板块，这些知识不了解，可是不行的。

DisplayObject
Easeljs中所有显示元素的抽象基类，DisplayObject有点JS中Object的味道，定义了所有显示对象的共同显示属性，比如x,y rotation, scaleX, skewX, alpha, shadow等。
Stage
显示元素的根级别容器，我们所有元素最后的显示都是依靠stage这个大容器实现的。如果有简单读过文档的同学应该知道，stage是绑定在canvas上的，也就是说，stage其实是canvas在Easeljs中的代理人，我们在Easeljs中不会直接操作canvas，而是操作舞台stage，stage与canvas之间的操作完全交给Easeljs层面去处理。只有我们更新舞台stage，才会触发舞台上所有显示元素各种属性的更新，最后依托canvas呈现。
container
如果将stage比作一个舞台，我们整个动画都是在舞台上进行的，动画就像是一出话剧。加入舞台上现在出演的话剧是A帮派 Vs B帮派，每个帮派都有很多人，如果我们为每一个人都规定相应的剧本，那就太麻烦了，我们可以将A.B分为两个组，定义好组的属性，我们在舞台上直接操纵组，就可以实现效果。同理container就是这样的作用，可以用来聚合显示对象并将其归为一个组进行操作。通过对组的操作，实现多个显示对象的统一动画行为。他和stage空间上是一样的，都是容器。
Bitmap
比如操作图片，视频或者canvas都可以使用这个方法，可以将画布的显示属性将图像，视频或者画布绘制到画布上。
这个没啥说的，用图片必然要用Bitmap类实例对象之后，才能在stage中使用这张图，不然图片是不能使用的。
Sprite
精灵，用来制作动画通过显示单个帧或者由spritesheet提供动画素材。一般来讲，用这个sprite，动画需要的素材，是设计师将动画每一帧的图都给出来，我们放在spritesheets中实例化数据后，在通过sprite进行动画的播放，sprite提供的API主要是控制动画播放的控制。所以，用这个类，目的就是实现动画效果，它原理是控制每一帧图像进行操作，所以得提供每一帧的图像。
Ticker
tick本意是水滴滴答的意思，ticker是钟摆的意思。先将一个概念，createjs采用canvas渲染，那么canvas想做动画，根本的原理就是不断的刷新画布来造成一个视觉残留，进而让人眼感觉是在播放视频，其实就是快速的切换图片造成了这种错觉。那么这个概念了解之后，我们在回到ticker，钟摆是有方向有频率的，Ticker就是监测每次stage的变化进而控制stage
stageGL
现在createjs已经支持webGL渲染，我们stage使用的是canvas渲染，感兴趣的可以了解一下。

大概总结了一下stage的常见的几个类，包括涉及到空间的类比如stage，container，这几个类关乎我们的动画整体设计，非常重要。其次还介绍了几个动画制作相关的几个类，比如sprite，bitmap，这些类都是用来创建我们的显示对象。最后介绍了一下Ticker，这种类用来定义动画执行过程中的一些事件。通过上面的分析，大家应该对这些类有了自己的认识，这些类大体分为三类，第一个是与空间相关的，第二个是定义显示对象相关的，第三个是动画执行过程相关的。文章后面附上官方对这些API的介绍，以及官方文档的定义。

参考链接
API介绍：https://github.com/CreateJS/E...
Easeljs文档：https://createjs.com/docs/eas...