TweenMax 高性能 JavaScript 动画框架

Question

TweenMax 建立在 TweenLite 核心类以及它的大哥 TweenFilterLite 基础之上，它为 Tween 家族增加了新的受欢迎的功能（尽管只是锦上添花），从而使家族更加的壮大，比如贝赛尔缓动、暂停/继续能力，简便的连续缓、16进制颜色缓动、以及更多的内容。

TweenMax 采用了与它的兄弟相似的易于学习的语法结构。实事上，因为它扩展自它们，TweenMax 可以做任何 TweenLite 和/或者 TweenFilterLite 能做的事，还加上了更多的特色。

特点

TweenMax 创造了一种全新的功能，叫做 "bezierThrough"（暂译为 贝塞尔通路），这个功能允许你定义一些点，通过贝塞尔曲线连接这些点，（通常的控制点只是用来拉近曲线，这里的点直接在曲线的路径上）。当然如果你愿意，你可以用更正规的贝塞尔曲线。目前，TweenMax 增加了下列功能（相对于 TweenFilterLite 而言)：

• 进行贝塞尔缓动（包括指定通路 THROUGH 点 和 运动对象的自动方位导航(在贝塞尔曲线中移动时，对象的旋转角度是自动控制的，译者注))
• 连续的缓动 或称为 序列化的缓动
• 对对象数组(数组中存放了不同的对象，译者注) 中的对象进行统一的缓动，使用 allTo() 和 allFrom()
• 缓动中的 暂停/继续 功能，使用 pause() 和 resume() 方法，或者 "paused" 属性 (比如 myTween.paused = true)
• isTweening 静态方法，用来判断一个对象是否正在进行缓动(比如 TweenMax.isTweening(my_mc))
• 跳转至缓动的任何时段，使用 "progress" 属性。输入一个 0 到 1 之间的数值。 progress 值为零，将会把缓动的进程跳转到初始阶段，值为 1 时，跳转至 100% 完成状态，值为 0.5 时，将转至缓动过程的半山腰位置。
  例如: myTween.progress = 0.5;
• 对 16 进制的颜色进行缓动，使用 hexColors 属性
• 获取缓动效果的实例数组，该数组中包括了加在一个指定的目标对象上的所有的缓动效果的实例，该数组可以容纳 TweenMax 和 TweenLite 和 TweenFilterLite 三种类型的缓动实例。
• 例如: TweenMax.getTweensOf(my_mc); // (如果 my_mc 上使用了不止一个的缓动效果，那么这里将返回一个数组，数组中是不同的缓动效果的实例，可以用来对每个缓动进行实时的控制，译者注)
• 获取 TweenMax (和 TweenLite 和 TweenFilterLite) 的实例数组，使用用静态函数 getAllTweens()
• 中止（杀死）所有的缓动(以及可选的完成部分缓动)
• 暂停/继续 全部的缓动

可选参数

• $ target : Object - 目标 MovieClip (或其它对象)，对它的属性进行缓动
• $ duration : Number - 动画的时间长度（单位：秒）
• $ vars : Object - 一个包含了多种属性的对象，用来存贮缓动结束时的各种属性值（如果你使用 TweenLite.from() 方法，这里的参数表示缓动的初始值）。

例如

alpha：目标对象在缓动结束时的 alpha 不透明度的级别值。当使用 TweenMax.from()时，表示开始缓动时的 alpha 值，举个例子，如果 target_obj.alpha 是 1，当这个缓动代码被执行时，将 alpha 参数设成 0.5 ，它将实现从 1 到 0.5 的渐变缓动。

x: 想要改变 MovieClip 的 x 位置，只需要将这个参数值设成你希望的缓动结束时的值即可。（如果使用 TweenMax.from()，则表示缓动开始时的 x 值）

专有属性

delay : Number - 延迟缓动 (以秒为单位)

ease : Function - 缓动函数. 例如，fl.motion.easing.Elastic.easeOut 函数。默认的是 Regular.easeOut函数

easeParams : Array - 用来存贮缓动公式所需要的额外数据. 当使用 Elastic 公式并且希望控制一些额外的参数，比如振幅和周期。大多数的缓动公式是不需要参数的，因此，你不需要给其它的缓动公式传递参数。

autoAlpha : Number - 用它来代替 alpha 属性，可以获得一些副加的效果，比如当 alpha 值缓动到 0时，自动将 visible 属性改为false。当缓动开始前，autoAlpha 大于 0时，它将会自动把 visible 属性变成 true 。

volume : Number - 改变 MovieClip 或者 SoundChannel 的音量，将缓动结束时的音量值写在这里即可。(如果使用 TweenMax.from()，这里的值表示缓动开始时的音量).

tint : Number - 改变可显示对象(DisplayObject)的色调/颜色，将缓动结束时的16进制值颜色值（比如 0xFF0000）写在这里即可。(如果使用 TweenMax.from()，这里的值表示缓动开始时的颜色值).如果想要移除颜色，传一个 null 做为颜色值即可。

frame : Number - 将 MovieClip 缓动到指定的帧频

bezier : Array - Bezier 缓动，允许你以非线性的方式进行缓动。例如，将一个 MovieClip 从原始的 (0,0) 的位置，向右移动500像素，到(500,0)，在缓动的中间向下弯曲。只需要向贝赛尔数组中传递多个对象，每一个都是一个控制点（关于控制点是如何工作的请参考 Flash 的 curveTo() 绘图方法相关说明）。在这个例子中，假设我们的控制点是 x/y 坐标250,50。把 my_mc 放到 0,0 位置，然后执行下面的代码:TweenMax.to(my_mc, 3, {_x:500, _y:0, bezier:[{_x:250, _y:50}]});

bezierThrough : Array - 与上面的贝赛尔数组相似，但是它接收的不是控制点，而是贝赛尔曲线要经过的位置点。与控制点相比，这样的用法更加直观。

orientToBezier : Array (或者 Boolean 类型) - 设计师/开发人员经常用到的一个效果，让 MovieClip/Sprite 自动调整自身的方向（改变 rotation ），使之符合贝赛尔路径的方向（就像是汽车在曲折的道路上需要不断调整方向一样----译者注）。orientToBezier 使得这一切变得简单。为了更精确的调整 rotation 属性，TweenMax 需要 4 方面的信息:

• 位置属性 1 (通常为 "x")
• 位置属性 2 (通常为 "y")
• 旋转属性 (通常为 "rotation")
• 旋转的度数(可选的 - 让它更容易的正确瞄准 MovieClip )

当 orientToBezier 属性为数组时，该（容器）数组中的每个元素是包含了一组数据的数组（形如 [[x1,y1,rota1,ang1],[x2,y2,rota2,ang2]]----译者注）。

为了获得最大的灵活性，你可以向容器数组中传递任意数量的数组，逐个的指定旋转属性。这在进行 3D 工作进会很方便，因为你可以旋转多个坐标轴。如果进行的是标准的 2D x/y 坐标系贝赛尔缓动，只需要传递一个布尔值 true ，然后  TweenMax 将会使用一个典型的数组设置 [["x", "y", "rotation", 0]]。

提示：不要忘了这里存在着容器数组（注意：数组前后有两层方括号）

hexColors : Object - 尽管 16 进制颜色是一种技术上使用的数字，但当你试途按照数字增减的老办法来缓动时，你会发现颜色的变化并不平滑。为了更恰当的进行颜色缓动，通常需要独立的对红、绿、蓝的成分进行缓动。TweenMax 把这一切变得简单。将一个 16 进制颜色值缓动到另一个 16 进制颜色值，只需要使用这个 TweenMax 中专用的 hexColors 属性即可。 这个属性必须是一个对象，该对象具有相关的颜色属性，属性名称与目标对象中使用的 16 进制颜色属性的名称相同。比如，如果 my_obj 对象具有一个“myHexColor”属性，想让它在两秒种内缓动为红色 (0xFF0000)，需要这样:TweenMax.to(my_obj, 2, {hexColors:{myHexColor:0xFF0000}}); (内层花括号括起来的部分，表示的就是一个包含有 myHexColor 属性的对象----译者注)

可以传递任意数量的 hexColor 属性。

onStart : Function - 在缓动开始时想要执行某个函数，就将函数的引用（通常是函数名）放到这里。当缓动是带延迟的，这一点会非常有用。

onStartParams : Array - 为缓动开始时要执行的函数传递参数。(可选的)

onUpdate : Function - 缓动过程中，每次更新属性值时，会执行这里指定的函数(缓动开始后，每一帧被触发一次)。

onUpdateParams : Array - 给 onUpdate 参数指定的函数传递参数 (可选的)

onComplete : Function - 缓动结束时执行的函数。

onCompleteParams : Array - 给 onComplete 参数所指定的函数传递参数 (可选的)

renderOnStart : Boolean - 当使用带有延迟缓动的 TweenFilterLite.from() ，并且希望阻止缓动的渲染（rendering ）效果，直到缓动真正开始，将这个值设为 true.默认情况下该值为 false ，这会让 TweenMax.from() 渲染效果立即被执行，甚至是在延迟尚未结束之前。

overwrite : Boolean - 如果 不 希望当前的缓动效果自动覆盖到其它的影响同一属性的缓动，请确保这个值设为 false。

blurFilter : Object - 应用模糊滤镜，需要传递一个具有下列（一个或多个）属性的对象做为参数：blurX（横向的模糊度）, blurY（纵向的模糊度）, quality（品质,默认值为2）

glowFilter : Object - 应用发光滤镜，需要传递一个具有下列（一个或多个）属性的对象做为参数：alpha（通明度），blurX , blurY , color（颜色），strength（强度）, quality ，inner（内侧发光），knockout（挖空）

colorMatrixFilter : Object - 应用颜色矩阵滤镜，需要传递一个具有下列（一个或多个）属性的对象做为参数：colorize（色调），amount（总量），contrast（对比度），brightness（亮度），saturation（饱和度），hue（色相），threshold（阀值），relative（相关性），matrix（颜色矩阵）

dropShadowFilter : Object - 应用阴影滤镜，需要传递一个具有下列（一个或多个）属性的对象做为参数：alpha, angle（角度）, blurX, blurY, color, distance（距离）, strength, quality

bevelFilter : Object - 应用斜角滤镜，需要传递一个具有下列（一个或多个）属性的对象做为参数：angle, blurX, blurY, distance, highlightAlpha（高亮区的透明度）, highlightColor（高亮区的颜色），shadowAlpha（阴影区的透明度）, shadowColor（阴影区的颜色）, strength（强度）, quality

关键属性

• progress : Number (范围0 1，为 0 表示缓还未开始，0.5 缓动进行了一半，1 缓动结束)
• paused : Boolean （逻辑值）

关键方法

• TweenMax.to(target:Object, duration:Number, vars:Object):TweenMax
• TweenMax.from(target:Object, duration:Number, vars:Object):TweenMax
• TweenMax.allTo(targets:Array, duration:Number, vars:Object):Array
• TweenMax.allFrom(targets:Array, duration:Number, vars:Object):Array
• TweenMax.sequence(target:Object, tweens:Array):Array
• TweenMax.getTweensOf(target:Object):Array
• TweenMax.isTweening(target:Object):Boolean
• TweenMax.getAllTweens():Array
• TweenMax.killAllTweens(complete:Boolean):void
• TweenMax.killAllDelayedCalls(complete:Boolean):void
• TweenMax.pauseAll(tweens:Boolean, delayedCalls:Boolean):void
• TweenMax.resumeAll(tweens:Boolean, delayedCalls:Boolean):void
• pause():void
• resume():void

示例

对 MovieClip 进行连续的缓动，先用2秒钟时间让透明度降到 50%，然后用1秒钟时间滑落到 y 坐标为300的位置，使用如下的代码：

import gs.TweenMax;
TweenMax.sequence(clip_mc, [{time:2, alpha:0.5}, {time:1, y:300}]);

项目地址：https://greensock.com/tweenmax