tweenMax是一款緩動插件，能實現很多牛逼的效果，在網上看了些demo，確實很吊，雖說很多用CSS3也能做出來，但是技多不壓身，學之。
網上的demo還是很多的，但是資料不多，唯一能夠讓我有思緒的就是tweenMax的官網（http://greensock.com/tweenmax）
講到這個Greensock，我還特意去了下它的gihub（https://github.com/greensock/GreenSock-JS），發現不止是tweenMax，還有一些諸如tweenLite這樣的插件，貌似tweenMax是整合了tweenLite這些插件最后的綜合插件。
始終無從下手，就到官網上看了一個demo，copy到本地看看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>Demo</title> <style type="text/css"> body { background-color:#1d1d1d; font-family: "Asap", sans-serif; color:#989898; margin:10px; font-size:16px; } #demo { height:100%; position:relative; overflow:hidden; } .box { width:100px; height:100px; position:relative; border-radius:6px; margin-top:4px; text-align:center; line-height:100px; color:black; font-size:80px; } .green{ background-color:#6fb936; } </style> </head> <body> <div id="demo"> <div class="box green" id="greenBox">0</div> </div> <script type="text/javascript" src="./lib/greenSock/TweenMax.min.js"></script> <script type="text/javascript"> //basic illustration of TweenMax's repeat, repeatDelay, yoyo and onRepeat var box = document.getElementById("greenBox"), count = 0, tween; tween = TweenMax.to(box, 2, {left:"740px", repeat:10, yoyo:true, onRepeat:onRepeat, repeatDelay:0.5, ease:Linear.easeNone}); function onRepeat() { count++; box.innerHTML = count; TweenLite.set(box, {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"}); } </script> </body> </html>
發現代碼結構並不難，但是不知道那個TweenMax.to()和TweenLite.set()怎么玩，於是我到網上查到了一些信息，但是還是雜亂無章，現在自己做個整理，整理如下。
TweenMax要分成幾個大塊來介紹，分別是：第三個參數特有屬性（29個），PlugIn（17個），公共屬性（10個），公共方法（20個）。
1，第三個參數特有屬性（29個）：
這29個參數可以直接傳入第三個OBJECT參數中，不會增加文件的大小。
delay : Number：延遲開始，在TweenMax動畫開始前延遲的秒數。
useFrames : Boolean：當設置為True時，對這個TweenMax Object的時間計算方式就是基於幀frame的。
ease : Function：緩動方式。可以使用com.greensock.easing包下的緩動函數。
easeParams : Array：緩動函數參數。某些緩動函數需要傳入一些參數來進行額外的控制。
onInit : Function：初始化函數。在TweenMax開始前，所有參數還沒被傳入TweenMax Object時觸發。可以用來初始化運動對象的狀態。
onInitParams : Array：初始化函數參數。
onStart : Function：開始函數。跟初始化函數不同，開始函數在TweenMax Object的值改變之后才觸發，而且不同於初始化函數。開始函數可以被觸發多次。
onStartParams : Array：開始函數參數。
onUpdate : Function：更新函數。當每次TweenMax Object數值更新的時候觸發。
onUpdateParams : Array：更新函數參數。
onComplete : Function：完成函數。當TweenMax Object完成緩動后觸發。
onCompleteParams : Array：完成函數參數。 {x:333,y:333,onComplete:onCompleteHander,onCompleteParam:["wn","334"]}
function onCompletHandler(value1:Object,value2:objet)
onReverseComplete : Function：回放完成函數。當TweenMax Object處於回放狀態，並且回到起點時觸發。
onReverseCompleteParams : Array：回放完成函數參數。
onRepeat : Function：重放函數。當TweenMax Object每次重放的時候觸發。
onRepeatParams : Array：重放函數參數。
immediateRender : Boolean：立即渲染。一般來說，TweenMax Object會在下一個渲染周期（也就是下一幀）被渲染到場景中。如果想強制立即渲染，可以把這個參數設為true。另外如果想阻止一個運動周期為0的運動物體被渲染，也可以把這個參數設為false。
paused : Boolean：暫停。這個很好理解，設為true時TweenMax Object就會暫停緩動。
reversed : Boolean：反轉。不知道為什么跟說明文檔里的不同。我的理解是將TweenMax Object的緩動反過來播放。
overwrite : int：覆蓋處理。定義了當對同一個物體使用TweenMax時發生沖突的處理方法。有6種模式。
模式0：NONE。不做任何處理。性能Excellent。
模式1：ALL_IMMEDIATE。設為該模式的TweenMax Object運動具有最高的優先級，會覆蓋掉運動物體之前所有的緩動。新的TweenMax Object創建時覆蓋舊的TweenMax Object。性能Excellent。
模式2：AUTO。是TweenMax的默認模式。在新的TweenMax Object第一次渲染時覆蓋重復的屬性（模式1是覆蓋掉全部屬性）。只要不是具有太多的屬性需要覆蓋，性能還是不錯的。
模式3：CONCURRENT。這個單詞的意思是“同時發生”。跟模式1很相似。唯一的不同是他只覆蓋掉正在運行的TweenMax Object。而放過其他的沒有啟動的TweenMax Object。性能Very Good。
模式4：ALL_ONSTART。也是跟模式1非常像。兩點不同是他是在TweenMax Object第一次渲染時才覆蓋掉其他所有的TweenMax Object，而且這個會把在他之后創建的TweenMax Object也覆蓋掉。性能Very Good。
模式5：PREEXISTING。這個單詞一看上去很迷糊，其實是pre-existing，囧。唯一的不同是他是在TweenMax Object第一次渲染時才覆蓋掉其他所有的TweenMax Object。性能Very Good。
如果想改變全局的TweenMax Object默認overwrite屬性，可以調用哪個OverWriteManager類的全局方法init()，即：OverwriteManager.init(OverwriteManager.XXXX);
repeat : int：循環次數。設置為-1為無限循環。
repeatDelay : Number：循環延遲的時間。
yoyo : Boolean：YOYO球。另外一種循環的方式。像我們玩的YOYO球一樣，從頭到尾，再從尾到頭的往返運動。PS:要與repeat同時設置。
onStartListener : Function：注冊一個TweenEvent的監聽，跟開始函數在同一時刻派發。
onUpdateListener : Function：注冊一個TweenEvent的監聽，跟更新函數在同一時刻派發。
onCompleteListener : Function：注冊一個TweenEvent的監聽，跟完成函數在同一時刻派發。
onReverseCompleteListener : Function：注冊一個TweenEvent的監聽，跟回放完成函數在同一時刻派發。
onRepeatListener : Function：注冊一個TweenEvent的監聽，跟重放函數在同一時刻派發。
startAt : Object：重設初始值。一般TweenMax Object使用運動物體的當前狀態來做初始值。但是可以使用這個參數重新設置運動物體的初始狀態。
2，PlugIn(17個)
PlugIn 與"第三個參數特有屬性"其實是同一樣東西。所不同的是他會顯著增加生成文件的大小。所有PlugIn 都關閉的情況下TweenMax的大小為8.8k（TweenLite為4k）。當所有的PlugIn都使用后（包括收費的）TweenMax會膨脹到 25.9k。（話說回來怎么關閉我也不清楚，求指教）
這里介紹的是TweenMax文檔里提到的17個PlugIn（我看了包里面竟然有30個，囧···不管他）。
autoAlpha : Number：跟alpha幾乎一樣，不同的是他在alpha==0時會自動將visible也設為false，而在alpha>0時將visible設為true。
visible : Boolean：在TweenMax Object的最后設置物體的visible屬性。
volume : Number：緩動音量的。需要運動物體有soundTransform屬性，例如MovieClip，SoundChannel，NetStream等。
tint : Number：顏色。將整個運動物體變成對應的顏色。可以使用十六進制值。
removeTint : Boolean：設為true時，去掉已經使用的tint屬性。
frame : Number：當運動物體是MovieClip時，緩動內部的時間軸。
bezier : Array：貝塞爾曲線。這個有點不清楚，好像數組里的奇數個點（Object{x:xxx,y:xxx}）為貝塞爾曲線的控制點，偶數個點為運動的終點。
bezierThrough : Array：比貝塞爾曲線更直觀，數組里奇數的點為曲線中要穿過的點。
orientToBezier : Array (or Boolean)：指向運動。一個比較常用的功能是在進行曲線運動時，物體的朝向一般要對應運動的方向（例如汽車之類的運動）。對於2D可以簡單的傳值 true。對於3D或者需要更多的靈活性，可以傳入數組4個參數，x，y，rotation，需要增加的度數，注：頭3個參數不是具體的數值，而是需要變化的參數，頭兩個是位置屬性，第三個是旋轉參數，第四個參數為可選。
hexColors : Object：16 進制緩動。 TweenMax在對16進制數進行緩動時會有不平滑的現象出現，這是就需要使用hexColors參數進行緩動。hexColors參數是一個對象，所 以需要把要進行緩動的參數傳入其中，即：TweenMax.to(target,2,{hexColors:{mcParas:newColor}});其中mcParas是target的屬性，newColor是要緩動到的新的16進值。
shortRotation : Object：短旋轉。用這個代替rotation的話，TweenMax會自動按最短的旋轉方向來進行旋轉，而不是按照AS3默認的以逆時針方向進行旋轉。記得要按Object的方式傳入。
roundProps : Array：取整數。對於想要在變化中始終取整的值，可以把屬性的字符形式放到這個數組中。例:TweenMax.to(target,2,{x:200,y:200,roundProps:["x","y"]});
blurFilter:Object：模糊濾鏡。用法：TweenMax.to(target,2,{blurFilter:{blurX:xxx,blurY:xxx}});
glowFilter:Object：發光濾鏡。用法：TweenMax.to(target,2,{glowFilter:{color:0xFFFFFF,blurX:xxx,blurY:xxx}});
colorMatrixFilter:Object：顏色矩陣濾鏡。用法：TweenMax.to(target,2,{colorMatrixFilter:{colorize:0xff0000, amount:1, contrast:1, saturation:1, hue:0}});
dropShadowFilter:Object：投影濾鏡。用法：TweenMax.to(target,2,{dropShadowFilter:{color:0xff0000, alpha:1, blurX:12, blurY:12, distance:12}});
bevelFilter:Object：斜角濾鏡。用法：TweenMax.to(target,2,{bevelFilter:{blurX:10, blurY:10, strength:1, distance:10}});
3，公共屬性
TweenMax有10個公共屬性。
（1）動畫進度
currentProgress : Number
緩動動畫的進度，從0～1。
（2）動畫時間
currentTime : Number
與totalDuartion不同，currentTime只表示了一個TweenMax周期的時間。
（3）全局緩動速度倍數
globalTimeScale : Number
類似與按XX倍速播放緩動動畫，用法：TweenMax.globalTimeScale = XXX;
（4）取消作用在運動物體上的所有TweenMax動畫
killTweensOf : Function
這是一個對TweenLite中killTweensOf函數的引用，可以直接使用。
（5）重放次數
repeat : int
跟直接在TweenMax的構造函數中傳入效果一樣。
（6）重放延遲時間
repeatDelay : Number
跟直接在TweenMax的構造函數中傳入效果一樣。
（7）個體緩動速度倍數
timeScale : Number
與globalTimeScale用法一樣，只是這個是對單個TweenMax Object調用的。
（8）總緩動進度
totalProgress : Number
這個計算的是總的緩動時間，包含了重放和重放延遲的時間。從0～1。
（9）總緩動時間
totalDuration : Number
這個計算的是總的緩動時間，包含了重放和重放延遲的時間。
（10）yoyo
yoyo : Boolean
跟直接在TweenMax的構造函數中傳入效果一樣。
4，公共方法（20個）：
（1）構造方法。
TweenMax(target:Object, duration:Number, vars:Object)
三個參數分別是運動物體，周期，參數。
（2）allTo（靜態方法）
allTo(targets:Array, duration:Number, vars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null):Array
頭三個參數分別是：1個數組保存了多個要進行緩動的對象，周期，參數；
后三個參數為可選，分別是：間隔時間，完成調用的函數，函數參數。
返回的是一個數組保存了創建的所有TweenMax Object。
（3）allFromTo（靜態方法）
allFromTo(targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number = 0, onCompleteAll:Function = null,
onCompleteAllParams:Array = null):Array
跟allTo一樣，只是多了一個參數對象可以用與定義起始狀態。
（4）allFrom（靜態方法）
allFrom(targets:Array, duration:Number, vars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null):Array
跟allTo一樣，只是定義的是運動對象的初始狀態，運動到當前狀態。
（5）to（靜態方法）
to(target:Object, duration:Number, vars:Object):TweenMax
是allTo的簡化版，也是很多人用TweenMax的主要目的，定義了運動物體，周期，和參數。返回一個TweenMax Object。
（6）fromTo（靜態方法）
fromTo(target:Object, duration:Number, fromVars:Object, toVars:Object):TweenMax
與to一樣，不過多了一個參數定義運動物體的初始狀態。
（7）from（靜態方法）
from(target:Object, duration:Number, vars:Object):TweenMax
跟to一樣，只是定義的是運動對象的初始狀態，運動到當前狀態。
（8）強制完成
complete(skipRender:Boolean = false, suppressEvents:Boolean = false):void
強制TweenMax到最后結束部分。如果第一個參數設為true，則不會渲染，TweenMax將停在調用那一刻。如果第二個參數設為true則不會觸發onCompelte,onUpdate等事件。
（9）延遲執行函數
delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array = null, useFrames:Boolean = false):TweenMax
跟AS3自帶的setTimeout幾乎一樣，是他們的AS3版。
（10）返回正在運行的的所有TweenMax Object（靜態方法）
getAllTweens():Array
（11）返回運動物體正在運行的的TweenMax Object（靜態方法）
getTweensOf(target:Object):Array
（12）清除初始值
invalidate():void
當從新播放一段TweenMax Object時（即調用restart()方法），如果想從新設置新的初始值，可以調用此方法清空原有初始值。調用后此TweenMax Object會將當前位置作為新的初始值。
（13）判斷是否正在緩動（靜態方法）
isTweening(target:Object):Boolean
正在緩動返回true,否則false。
（14）清除所有TweenMax Object（靜態方法）
killAll(complete:Boolean = false, tweens:Boolean = true, delayedCalls:Boolean = true):void
三個參數，第一個設為true可以強制先完成再清除，第二個是清除所有的緩動，第三個是清除所有的函數延遲執行。
（15）清除所有子對象的TweenMax Object（靜態方法）
killChildTweensOf(parentisplayObjectContainer, complete:Boolean = false):void
將一個DisplayObjectContainer的所有子對象的TweenMax Object。可以選擇先強制完成。
（16）清除某個屬性的緩動
killProperties(names:Array):void
傳入的是一個數組，以字符串的形式。例：_tweenMax.killProperties(["x"]);
（17）全部暫停（靜態方法）
pauseAll(tweens:Boolean = true, delayedCalls:Boolean = true):void
全部暫停TweenMax Object(可選)，函數延遲執行（可選）。
（18）全部恢復（靜態方法）
全部恢復TweenMax Object(可選)，函數延遲執行（可選）。
（19）重定向終點
setDestination(property:String, value:*, adjustStartValues:Boolen = true):void
第一個參數是對應的屬性值，第二個是要設置的新值，第三個參數是是否要對應調整起點，讓轉變看起來沒那么 skipping/jerking（意會吧，突兀？），就是要注意如果是要反播緩動動畫的話可能會無法重定向到起點。一般不建議和updateTo一起用。
（20）重定向屬性
updateTo(vars:Object, resetDuration:Boolean = false):void
可以在運行中新增或改變原有的屬性變化值。第二個參數設為false時將不重播緩動，而繼續緩動到新的值；設為true將中斷並重播緩動。
最后一節，我們談談TweenMax的緩動效果。TweenMax的緩動效果包是com.greensock.easing.*;其中里面有16個類。按照 每個類都有的easeIn,easeOut,easeInOut，3種模式的話，就總共有48種變化了（猜想，應該是左右）。下面來一樣一樣介紹：
1.Linear變化
字面意思就很好理解，線性變化，就是勻速。
2.Back變化
Back有回來的意思，在緩動前，會先往回運動一段距離。
3.Bounce變化
顧名思義，在變化前會幾次回歸原點，好像在彈一樣。
4.Circ變化
運動的曲線是一個圓形的弧度。
5.Cubic變化
跟圓形變化差不多，不過更平滑些。
6.Elastic變化
跟Back變化有點像，但是會有一個很強的波動。在EaseIn和EaseOut時尤為明顯。
7.Expo變化
一直很平緩，在最后一點完成所有變化。
8.Quad變化
9.Quart變化
10.Quint變化
11，Sine正弦變化
12.Strong變化。
以上是12種內置的變化，所以准確來說是有36種的，那剩下的4個類是做什么的呢。
13.EaseLookup
包含一個靜態方法fine(),可以通過字符串String直接取得ease的實例。方便一些反射操作的需要。例：
TweenMax.to(ball, 1, { x:200,ease:EaseLookup.find("backEaseInOut") } );
14.FastEase
AS3的TweenMax版本有內置的算法可以加速緩動效果。需要用這個類的靜態方法activate()手動打開。可以提高35%～80%的緩動計算，提高2%～15%的整個緩動效率。
可以被加速的緩動變化包括：Linear Quad Cubic Quart Quint Strong這六種而已。打開方法，例：
FastEase.activate([Strong, Linear, Quad]);
還有另外一個靜態方法activateEase(ease:Function, type:int, power:uint):void，是用來把這種優化方法用在非com.greensock的緩動上的，例如用在AS3自帶的緩動類。
15.RoughEase
RoughEase(strength:Number = 1, points:uint = 20, restrictMaxAndMin:Boolean = false, templateEase:Function = null, taper:String = "none", randomize:Boolean = true, name:String = "")
通常的緩動變化都是很平滑的，如果想要一個不平滑的效果，就可以使用RoughEase。
這里列出的是他的構造方法，其中：
strength:Number：隨機點的幅度。
points:uint：隨機點的數量。
restrictMaxAndMin:Boolean：當設為true時，隨機數的變化會在初始值和終點值之間波動。當為false時，隨機數的變化可能會超過這個區間。
templateEase:Function：隨機點作用的緩動模板。默認是Linear.easeNone。
taper:String：隨機變化趨向那一端，"in”的話趨向於起點，"out"的話趨向於終點。默認是"none"。
randomize:Boolean：設為true時，緩動位置將會隨機變化。如果為false時，緩動位置將會鋸齒型變化。
name:String ：為roughEase實例命名，這樣以后可以使用靜態方法byName()獲取引用。
用法：
例1，直接使用：
TweenLite.to(ball, 2, {y:0, ease:RoughEase.create(1, 20, true, Bounce.easeInOut)});
例2，生成實例調用：
var _roughEase:RoughEase = new RoughEase(1,20,true, Strong.easeOut, "none", true, "superRoughEase");
然后直接調用：
TweenLite.to(mc, 3, {y:300, ease:rough.ease});
或者：
TweenLite.to(mc, 3, {y:300, ease:RoughEase.byName("superRoughEase")});
16.CustumEase
自建緩動效果。基本不能直接編寫。需要登錄這個網址http://blog.greensock.com/customease/使用圖形界面工具生成代碼。然后COPY代碼到你的項目中應用。例：
創建：
CustomEase.create("myCustomEase", [{s:0,cp:0.814,e:0.908},{s:0.908,cp:1.002,e:0.376},{s:0.376,cp:-0.25,e:1}]);
使用：
TweenMax.to(mc, 2, {x:"250", ease:CustomEase.byName("myCustomEase")});
最后再把官網上的另一個demo貼上來
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <title>Demo</title> <style type="text/css"> html, body { height: 100%; } body { background-color:#1d1d1d; font-family: "Asap", sans-serif; color:#989898; margin:0 10px; font-size:16px; } h1, h2, h3 { font-family: "Signika Negative", sans-serif; margin: 10px 0 10px 0; color:#f3f2ef; } h1 { font-size:36px; } h2 { font-size:30px; } h3 { font-size:24px; } p{ line-height:22px; margin-bottom:16px; width:650px; } #demo { height:100%; position:relative; } .box { width:50px; height:50px; position:relative; border-radius:6px; margin-top:4px; display:inline-block; } .green{ background-color:#6fb936; } .orange { background-color:#f38630; } .grey { background-color:#989898; } </style> </head> <body> <h2>TweenMax.staggerTo()</h2> <div id="demo"> <p>The start times of each animation are staggered by 0.5 seconds</p> <div class="box green"></div> <div class="box grey"></div> <div class="box orange"></div> <div class="box green"></div> <div class="box grey"></div> <div class="box orange"></div> <div class="box green"></div> <div class="box grey"></div> <div class="box orange"></div> </div> <script type="text/javascript" src="./lib/greenSock/TweenMax.min.js"></script> <script type="text/javascript"> TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5); //The stagger parameter (0.5) controls the amount of time between the start of each tween. Change it to 0.2, 1 or 3 to see how it works. </script> </body> </html>
http://www.cnblogs.com/wayne23/archive/2010/07/26/1785458.html