TweenLite是一个高效、灵活的开源ActionScript缓动工具包(部分plugin没有开源),对于pure code来说,是个不错的创建动态效果的工具。“缓动”这个词是从网上看来的,按我的解释意思就是实现对象从一个状态到另一个状态转变的过渡效果。我觉得“缓动”并没有清楚的表达出过渡的意思,乍一看还以为是延迟一会儿再动,但我也找不出更好的词来形容,我还是更喜欢用Tween来称呼,不得不承认在科技领域还是英文描述得准确,中文就是稍有欠缺,毕竟现在西方的科技遥遥领先。话题跑偏了,还是接着说TweenLite吧,最近接触到TweenLite,觉得使用挺方便的,不过有时候还是会遇到点使用问题,再加上好奇心的唆使,从而展开了对TweenLite源码的窥视,我想把这个学习的过程记录下来,一方面和大家一起探讨,另一方面也当做一个记录让自己以后可以复习。罗嗦了一大堆,接下来就开始吧!首先如果你想要获得TweenLite以及相关介绍,可以到这里:www.tweenlite.com
还要先说明一下:因为TweenLite工具包中有一个类的名字也同样是TweenLite,为了区分TweenLite工具包和TweenLite类,我在以后会分别把TweenLite工具包叫做TweenLite tool,而TweenLite类就直接称呼TweenLite。我想接下来要讲的内容还是不少,不能一次写完,就分段来吧,也尽量把blog更新:)ok接下来真的开始啦!
TweenLite tool主要包含以下几个用户使用的类:TweenLite、TweenMax、TimelineLite、TimelineMax、OverwriteManager和TweenPlugin,其中:
- TweenLite和TweenMax用于具体操作某个对象,使之进行Tween变换。这个类中会记录被操作的对象、操作对象的哪些属性、持续时间和其它重复、事件等信息。
- TimelineLite和TimelineMax相当于一个容器,可以装入多个TweenLite和TweenMax,也可以装入其它TimelineLite和TimelineMax,并且安排这些被装入的对象在合适的时机执行相关操作,暂且把“执行的相关操作”称为渲染(对应源码中的renderTime方法)。
- OverwriteManager的作用是在多个TweenLite或TweenMax同时操作同一个对象时,协调这些TweenLite和TweenMax执行的渲染,也就是确定哪些Tween的渲染真正起作用,哪些Tween的渲染不起作用。
- TweenPlugin是TweenLite tool中所有插件的基类,TweenLite tool可以操作任何对象的任何属性,包括非纯数字的属性(例如DisplayObject.transform.matrix),但是非纯数字属性的变换过程不是简单的从一个单一值变成另一个值,因此需要有专门处理这种“复杂值”变化的对象,也就是插件。TweenLite tool中内置了一些插件,在使用到插件时需要首先激活这些插件,激活的方法是调用静态方法TweenPlugin.activate方法。
TweenLite tool实现Tween的原理是征听EnterFrame事件,逐步渲染对象从起点到终点变换的过程。这个EnterFrame事件的发出者是Tween. _shape引用的Shape对象,征听函数是TweenLite.updateAll静态方法。要了解整个系统初始化的过程要从TweenCore类说起。TweenCore类是TweenLite、TweenMax、TimelineLite、TimelineMax的基类,因此只要建立这四个类的任意一个对象,就都会调用到TweenCore的构造函数。这个函数中有如下语句:
| TweenCore构造函数片段 | [复制代码] |
- if (!_classInitted) {
- if (isNaN(TweenLite.rootFrame)) {
- TweenLite.initClass();
- _classInitted = true;
- } else {
- return;
- }
- }
其中_classInitted是TweenCore的静态属性,初始值为false表示TweenLite系统还没有初始化,因此第一次建立TweenLite、TweenMax、TimelineLite或TimelineMax对象时就会执行系统初始化(执行完成后_classInitted被设为true,则以后再建立Tween对象时就不会再初始化),进入TweenLite.initClass方法中:
| TweenLite.initClass方法 | [复制代码] |
- rootFrame = 0;
- rootTimeline = new SimpleTimeline(null);
- rootFramesTimeline = new SimpleTimeline(null);
- rootTimeline.cachedStartTime = getTimer() * 0.001;
- rootTimeline.autoRemoveChildren = true;
- rootFramesTimeline.autoRemoveChildren = true;
- _shape.addEventListener(Event.ENTER_FRAME, updateAll, false, 0, true);
- if (overwriteManager == null) {
- overwriteManager = {mode:1, enabled:false};
- }
在TweenLite.initClass中即进行系统初始化,这里建立了两条时间线rootTimeline和rootFramesTimeline,并设置两条root时间线的起始时间和autoRemoveChildren属性(后面会说明起始时间和这个属性的用途),然后添加EnterFrame的征听函数updateAll(注意_shape引用的对象是在定义_shape时创建的,所以这里没有new Shape),这个征听函数就是前面提到的“逐步渲染”的起点。