搜索
第19章高级缓动类在第十三章曾经介绍过Flash自带的Tween缓动类。但是，很多开发人员发现Tween类无法满足他们对“缓动”的要求。因为在实际应用中，对于缓对的控制要求非常具体且严格。一些情况下，开发者需要“缓动”类必须能够精确控制动画动画效果以及与之联系的各种逻辑函数。另外一些情况，则需要对“缓动”进行抽象，还原为数学模型。在极端情况下，一个数值的变化也可以归纳入“缓动”的范围内。第19章高级缓动类在原有语言的基础上，一些开发人员使用ActionScript3.0开发了更为强大的缓动类，其中较有代表性的包括Tweener、gTween、TweenLite等。本章我们将以经典的Tweener为例详细介绍高级缓动类。说到“高级”，并不是上述第三方类库有技术上的突破和进步，事实上它们还是基于ActionScript3.0的。只不过他们在实现方式和复杂程度上都更加贴近用户，更便于实现和控制，因此爱到了很多开发人员的青睐。19.1.1Tweener的下载和配置Tweener的介绍页面可以在googlecode（）上找到。其SVN下载地址为：下载后的在按下快捷键【Ctrl】+【U】打开首选参数面板，选择类别“ActionScript”，点击按钮添加Tweener的地址即可。例如笔者的Tweener类库位置为C:\myClass\Tweener\as3。19.1.2Tweener的添加语法Tweener类中包含很多静态方法，使用缓动主要通过addTween方法来实现，其基本用法如下。Tweener.addTween(对象,{参数值对});在参数值对中最重要的一个参数是time，它指定缓动效果的时长。Time参数以秒为单位计算，如果希望动画持续10秒钟，可以设置time值为10。…{…,time:10,…}…19.1.2Tweener的添加语法如果没有指定time的值，其默认值为0，则Tweener会不经过缓动，马上指定对象为其最终值。参数值对中另一个重要参数为onComplete，它指定当缓动计算结束后将要调用的函数，比如当缓动效果结束时需要调用函数myFunc，则可以按如下方式指定该参数。…{…,onComplete:myFunc,…}…19.1.3Tweener的暂停与重新开始Tweener可以通过方法pauseTweens来暂停其指定对象的缓动计算，其语法如下。Tweener.pauseTweens(对象);要恢复被暂停的缓动动画，则可以使用resumeTweens来重新开始缓动动画。Tweener.resumeTweens(对象);19.1.4Tweener的长度基准在前面介绍了Tweener的时间参数单位为秒，其参数对象的time键中所指定的值即为缓动动画进行的时间。在此之外，Tweener也提供了以帧为基准的动画长度指定方式。其方式为在指定time的同时，同时指定useFrames键值为true，代码如下。…{…,time:10,useFrames:true…}…19.1.5Tweener的延迟Tweener允许通过设置参数值对中的delay值，设置缓动动画的启动延迟时间。同样，这个时间也允许使用useFrames参数指定使用帧数作为时间长度的基准。使用delay参数往往能够展示出非常有规律的动画效果。19.1.6原型参数base在参数值对中，可以指定一个参数base作为动画参数的原型，这样几个Tweener动画可以共用一个原型，并根据各自的情况调整必要参数即可。使用base可以很方便地在Tweener动画中进行必要的判断，并根据判断结果来确定采用哪种动画方式。例如，可事先定义两套动画参数，代码如下。varbs1:Object={y:-100,time:1,transition:easeInOutCubic};varbs2:Object={y:100,time:1,transition:easeInOutCubic};然后根据某参数的判断结果来确定使用哪套动画参数。19.1.7缓动模型transitionTweener内置了一组缓动模型，通过transition参数指定特定字符串。此外，如前文介绍，transition参数也可指定为线性（linear）。包括上图中的30种缓动模型函数，Tweener共支持31种预设的缓动效果。读者可尝试修改“指定原型参数.fla”中transition的参数，例如修改为如下形式。varbs1:Object={y:-100,time:1,transition:linear};varbs2:Object={y:100,time:1,transition:linear};19.1.7缓动模型transition观查指定不同参数对动画效果的影响。Tweener的参数除自定义的31种外，也与Flash自带的缓动模型函数兼容，可以直接指定相应的函数，例如按以下方式直接使用Flash自带的函数。importfl.transitions.easing.*;varbs1:Object={y:-100,time:1,transition:Back.easeIn};varbs2:Object={y:100,time:1,transition:Back.easeIn};19.1.7缓动模型transition作为终极手段，transition参数也允许使用自定义的缓动函数。这些函数的需要提供5个参数，并返回1个数值型变量，其一般写法如下。function缓动函数(t:Number,b:Number,c:Number,d:Number,p_params:Object=null):Number{return返回值;}其中，t为当前时间，b为缓动的初始值，c为变动值（相当于目标值减去初始值），d为缓动总时长。19.2Tweener特殊参数配置Tweener内置了一系统特殊参数，用于访问一些普通情况下不是非常方便便可以访问到的属性。这些参数需要经过初始化过程才能够使用。例如，一个MovieClip实例可以通过_frame参数指定其当前帧的播放缓动效果。19.2.1特殊颜色参数的设置与使用要使用关于颜色的特殊参数时需要导入必要的类caurina.transitions.properties.ColorShortcuts，同时运行初始化函数，语法如下。importcaurina.transitions.properties.ColorShortcuts;ColorShortcuts.init();完成初始化之后便可以象正常参数一样使用Tweener，ColorShortcuts包括的主要参数如下。（1）通道参数：_color_redMultiplier、_color_redOffset、_color_greenMultiplier、_color_greenOffset、_color_blueMultiplier、_color_blueOffset、_color_alphaMultiplier、_color_alphaOffset，分别对应各颜色通道的增益值和偏移值19.2.1特殊颜色参数的设置与使用（2）合成参数：_color：将显示对象按数值渐变为特定色彩。_colorTransform：分成4个通道8个参数，对ColorTransform分别进行缓动渐变。_brightness：渐变亮度，参数变动范围由-2.55（纯黑）～+2.55（纯白）。_tintBrightness：渐变色彩亮度，参数变动范围由-1（纯黑）～+1（纯白）。_19.2.1特殊颜色参数的设置与使用contrast：对比度，一般取值范围在-1～+1之间，0为正常状态。_hue：色调值，一般取值范围在-180～+180之间，0为正常状态。_saturation：饱和度，0时为纯灰度、1为正常、2为高饱和度。_dumbSaturation：简单饱和度，不考虑对发光度影响，将RGB三个通道平均分配的饱和度调整方式，0时为纯灰度、1为正常、2为高饱和度。注意：由于_dumbSaturation的计算方式比较粗糙，其灰度图与原图的发光度不同。19.2.2特殊显示参数特殊显示参数用于为显示对象（如MovieClip）的属性执行缓动动画而设，须导入相应的类，并运行初始化函数，语法如下。importcaurina.transitions.properties.DisplayShortcuts;DisplayShortcuts.init();DisplayShortcuts包括的主要参数如下。_frame：可对MovieClip的播放头位置执行缓动动画。_autoAlpha：与设置显示对象的alpha属性类似，但会在缓动渐变为0时自动隐藏对象（visible属性设置为false），当alpha值大于0时自动显示对象（visible属性设置为true）。19.2.2特殊显示参数_scale：同时设置显示对象的横纵比例。_scrollRect：对显示对象的滚动显示矩形进行缓动渐变。以上各属性中，较为常用的是_frame属性，它可以很方便地对MovieClip的播放头位置进行缓动处理，本章开篇时的例子即使用了这一参数。19.2.3特殊曲线参数特殊曲线参数只有一个：_bezier，通过简单的设置便可以实现贝赛尔曲线的插值运算。使用_bezier参数前须运行初始化函数，代码如下。importcaurina.transitions.properties.CurveModifiers;CurveModifiers.init();19.2.3特殊曲线参数_bezier参数是一个数组类型的参数，完成初始化之后可指定各个插值。例如，一个MovieClip对象mc的初始位置为（0，0），目标位置为（550，400），以（550，0）为控制点进行曲线移动，可以指定_bezier参数为[{x:550,y:0}]。同样，当有两个控制点时，例如除（550，0）之外再增加一个控制点（0，400），则可以指定_bezier为[{x:550,y:0},{x:0,y:400}]。以上过程的完整代码如下。