TweenMax

这是由Tweenlite扩展来的。增加了一些有用的特性，比如repeat(),repeatDelay(),yoyo().而且它还默认包括了许多额外的插件。 让它具有更多功能。而且所有的插件都能在Tweenlite中使用。但是TweenMax可以帮助你节省时间加载CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin 以及 EasePack, TimelineLite, 和 TimelineMax.

因为它是由Tweenlite扩展来的，因此它能做任何Tweenlite能做的事情而且更多。你可以混合它们在同一个项目中工具。但是因为文件大小问题，如果你加载TweenMax那么最好是因为你需要它独有的特性，否则还是尽量用Tweenlite。

如同Tweenlite,TweenMax也能随着时间推移处理多个tween的多个属性。

它可以和 TimelineLite 与 TimelineMax一起构建复杂的任务。

用法

用TweenMax.to() 构建基础：

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

当TweenMax被加载，你可以很轻松的让目标动起来，像这样：

//tween the element with ID of "myID"
TweenMax.to("#myID", 2, {backgroundColor:"#ff0000", width:"50%", top:"100px", ease:Power2.easeInOut});

//or you can do more advanced selecting like all the elements with the class "myClass" like this:
TweenMax.to(".myClass", 2, {boxShadow:"0px 0px 20px red", color:"#FC0"});

我们可以通过特定的属性delay延迟执行或者paused 来暂停。

处理的目标可以是一个对象数组。像这样用：

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

简单的应用css插件:

TweenMax.to(element, 1, {css:{left:"100px", top:"50px"}});

除了to(),from(),fromTo(),你可以用更加面向对象的方式：

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

或者这样:

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

特殊的属性,回调函数和Ease

你可以自由的配置不同的选项:

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

由于TweenMax是TimeLite的扩展，因此一些TimeLite的特殊属性我将不再重复，而是挑出TweenMax特有的。

repeat:接受一个数值

重复动画次数=原来的+接受的数值。比如，当repeat=1，那么将重复2次，如果repaet=-1 那么将无限循环。

repeatDelay:接受一个数值

重复之前delay的时间。比如当repeatDelay为1,repeat为2.那么在第一次重复之前会暂停一秒。在第二次重复前暂停一秒。

yoyo:接受一个boolean

如果为true,每一个 repeat循环将运行相反的方向。也就是能够回返。这对reversed没有作用。如果repeat为2,yoyo为false，那么顺序如下：

 start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end

如果repeat为2,yoyotrue，那么顺序如下：

  start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end

startAt:接受一个对象

允许你定义开始的tween属性的值。通常情况下，TweenMax用当前值作为开始值。

但是startAt允许你覆盖这种行为.

举个例子，比如mc.x当前值为100，你想从0开始到500，那么你应该这么写：

TweenMax.to(mc, 2, {x:500, startAt:{x:0}});

插件

这些是TweenMax自带的插件：

css

可以控制如下属性

backgroundColor, width, height, fontSize, color, top, left, marginTop, rotation, scaleX, scaleY, skewX, skewY, x, y, xPercent, yPercent,directionalRotation, autoAlpha.

Transformations属性只工作在ie7或者更新版本。

TweenMax.to(myElement, 1, {width:"50%", height:"300px", backgroundColor:"#ff0000", delay:1});

roundProps:String

TweenMax.to(mc, 2, {x:300, y:200, opacity:0.5, roundProps:"x,y"});

bezier:Object

公共属性

重复的将不再提