TweenMax

TweenMax扩展自TweenLite，添加了很多比较有用的特性，例如：repeat(),repeatDelay(),yoyo(),等等。

TweenMax构造函数

TweenMax ( target:Object, duration:Number, vars:Object );

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

最常用的方法是TweenMax.to(),它允许你定义对象的目标值。

var photo = document.getElementById('photo');   

TweenMax.to(photo,2,{width:"200px",height:"150px"});

上述代码将会使ID为photo的DOM元素从width和height的当前值在2秒钟内分别逐渐变成200px和150px，注意width和height属性是被定义在一个普通对象里（花括号里面）。你可以随意定义更多的属性进里面，你需要的话。
如果你的target传入的是一个字符串。例如：

TweenMax.to("#myID", 1, {left:"100px"})) 

TweenMax会将其匹配到$(即典型的jQuery)，或者如果没有匹配到，则默认匹配成document.querySelectorAll() 或者document.getElementById()(自动删除“#”符号)，或者你也可以定义你自己的选择器，像TweenLite.selector = YOUR_SELECTOR_ENGINE；
所以一旦TweenMax加载，你就可以轻松地处理这样的动画：

TweenMax.to("#div1",2{backgroundColor:"#ff0000",width:"50%",top:"100px",ease:Power2.easeInOut});  

//或者你可以使用更多先进的选择器，例如所有具有myClass类的元素：
TweenMax.to(".myClass",2,{boxShadow:"0px 0px 20px red",color:"#fc0"});

tweens默认立刻执行，但是你可以使其延迟或者暂停执行，通过使用特殊属性delay和
pause；
target还可以是对象数组，例如，下面的代码会使obj1,obj2,obj3的opacity变成0.5，transform的rotation属性变成45：

TweenMax.to([obj1, obj2, obj3], 1, {opacity:0.5, rotation:45});

你还可以使用TweenMax.from()，如果你想定义开始值，而不是目标值的话。这时，目标对象将会从定义的开始值逐渐运动变为当前值。另外，TweenMax.fromTo()可以定义开始值以及目标值。
虽然to(), from(), 和 fromTo()这三个静态方法非常流行，因为他们快速，可以避免垃圾收集的繁琐程序，但其实你还可以使用更多的面向对象的语法，例如：

var tween = new TweenMax(myObject, 2, {width:200, height:150});

//甚至是：
var tween = TweenMax.to(myObject, 2, {width:200, height:150});

专有属性，回调函数和缓动

除了处理tween的目标值，vars对象允许你使用各种选项来配置你的tween。

TweenMax.to(element, 1, {opacity:0, onComplete:completeHandler, ease:Back.easeOut, useFrames:true});

TweenMax vars对象的所有属性列表如下：

1. delay 数值 表示动画开始前的延迟时间（或者是帧），单位是秒

2. ease 方法或字符串 表示缓动方式 它的值有很多种：
   Elastic.easeOut
   Strong.easeInOut
   Power0.easeIn
   a.控制加减速
   easeOut:减速运动
   easeIn：加速运动
   easeInOut：先加速后减速运动
   easeNone：匀速运动
   b.控制运动方式
   Elastic 弹性运动
   Linear 线性运动
   Power0 力度比较小的
   Power1
   Power2
   Power3
   Power4
   Power5
   Quad
   Cubic
   Quart
   Quint
   Strong
   Back
   Bounce
   SlowMo
   SteppedEase
   Circ
   Expo
   Sine

3. repeat 数值（整数） 继第一次动画循环后，动画应该重复的次数，假如repeat为1，那么动画将总共执行两次

4. repeatDelay 数值 动画每次重复之间延迟的时间，单位是秒

5. yoyo 布尔值 如果值为true，每隔一个重复周期对象以相反方向运行一次，使补间来回走动，尽管这样，但它不会影响到“reversed”属性。所以，如果repeat为2，yoyo为false，这将看起来像 “start-1-2-3-1-2-3-1-2-3-end”但如果yoyo值为true，这将看起来像是：”start-1-2-3-3-2-1-1-2-3-end”。
6. paused 布尔值 如果为true，补间动画将立即停止
7. overwrite 字符串或整数值 控制怎么（或者是否）覆盖其他同一目标值的补间动画，这里有几种模式可提供选择：
   none（0）（or false） 不会出现覆盖
   all （1）（or true） 立刻覆盖所有存在相同目标对象的补间动画，即使是还没开始运动的或者是没有冲突属性的。
   auto (2)（默认值） 当补间动画第一次呈现时，它会分析活动着或者正在运动的具有相同目标对象的补间动画，并且只会覆盖个别属性重叠或者冲突的。并且忽略还未开始的补间动画。比如说，如果另外一个活动着的补间动画有3个属性，并且只有一个属性是与新的补间动画相同冲突的，那么另外两个属性将会被忽略，只有冲突的那个属性会被覆盖或者杀死。
   concurrent (3) 当补间动画第一次呈现，将只会杀死相同目标对象并且活动着的补间动画，而不管它们是否存在冲突的属性。像是“all”与“auto”的混合。适合用在你每次只需要一个补间动画来控制目标对象的情况。
   allOnStart (4)
   preexisting (5)

8.onComplete 函数 动画完成时调用的函数
9.onCompleteParams 数组 传入动画完成函数的参数
10.onCompleteScope 对象 定义动画完成函数的作用域 如：“this”

11.onRepeat 函数 每次动画重复时调用
12.onRepeatParams
13.onRepeatScope

14.onReverseComplete 函数 当动画从相反方向回到重新开始的地方时调用，例如，一旦reverse()方法被调用，补间动画将回到起点时，并且时间归0时，onReverseComple()会被调用。
15.onReverseCompleteParams
16.onReverseCompleteScope

17.onStart 在补间动画开始时被调用（当时间从0改变为其他值，他可以发生多次如果补间动画重复启动多次）
18.onStartParams
19.onStartScope

20.onUpdate 函数 - 每次动画更新（动画被激活的每一帧上）时被调用。
21.onUpdateParams
22.onUpdateScope

23.startAt 对象-允许您定义补间属性的初始值。通常情况下，TweenMax使用当前值（不管它发生是否在补间开始的时间）作为初始值，但startAt可以覆盖该行为。
只需补间开始之前在你想设置的属性中传递一个对象。例如，如果mc.x目前是100，你想使其从0变到500，执行：
TweenMax.to(mc, 2, {x:500, startAt:{x:0}});

24.useFrames 布尔值 - 如果useFrames为true，则补间的时间将基于帧而不是秒，因为它是intially添加到基于帧的根时间轴。这导致它们两个的持续时间和延迟是基于帧的。一个动画的定时模式总是由其父时间表确定。

25.lazy 布尔值 - 当补间第一次呈现和读取其初始值，默认情况下，GSAP会自动“懒渲染”，，这意味着它会尽量拖延渲染（值写入），直到尽头的“勾选“循环，可以提高性能，因为它避免了读/写/读/写布局颠簸，有些浏览器做的。如果您想关闭延迟渲染特定补间，您可以设置懒：假的。或者，因为零时间补间不懒渲染默认情况下，可以专门给它的权限设置懒渲染：真像TweenLite.set（元，{不透明度：0，懒：真}）;.在大多数情况下，你不会需要设置懒惰。
26.onOverwrite 函数 - 当补间被另一补间动画 覆盖，应该调用的函数。以下参数将被传递到该函数：
1.overwrittenTween :动画 - 刚覆盖补间
2.overwritingTween :动画-做了覆盖的补间
3.target
4.overwrittenProperties
27.autoCSS 布尔值 - 与动画相关的DOM元素属性需要CSSPlugin。
CSSPlugin-正常情况下，你需要把css相关属性放进一个css:{}对象中，例如： TweenLite.to(element,2,{css:{left:”200px”,top:”100px”},ease:Linear.easeNone})，
用来表明你的意图（告诉GSAP以提供这些值给CSSPlugin），但是由于动画与css相关的属性是很常见的，GSAP实现了一些内部逻辑，允许您忽略css:{}的包裹（意味着你可以这样写上面的例子：
TweenLite.to(element,2,{left:”200px”,top:”100px”,ease:Linear.easeNone})），默认情况下，它会检测目标对象是否是DOM元素，如果是，并且您没有定义一个css:{}对象，它就会创建该对象并填充属性。若要禁止该功能，可以设置autoCSS:false

28.callbackScope 对象 - 范围用于所有的回调（onStart，onUpdate，onComplete等）。该范围是什么“this”指向的所以内部回调函数。旧的特定回调范围的属性（onStartScope，onUpdateScope，onCompleteScope，onReverseComplete等）已被弃用，但仍然可以工作。