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...

你可能感兴趣的:(动画,createjs)