TweenMax 中文使用說明


TweenMax 可能是很多人都用的,包括我 但 是最近發現大量的運用就總會產生這樣或那樣的"怪事",有時用代碼來做緩動有時又用TweenMax造成了代碼的 混亂,而且除了單調的TweenMax.to()等幾個函數外,貌似還有很多這樣那樣fun stuffs。對於動畫ease的控制,自己除了一個Back就不知道其他了。 總之一片慘淡, 所以趁着這個機會好好總結一下:

一,主要代碼結構:

com.greensock 包里面,首先最主要的就是TweenMax.as;然后一個常用的是 com.greensock.easing.*;里面包含了15個緩動,下文再一一介紹;另外一個是 com.greensock.events.TweenEvent,不過感覺不太常用;

每 一個TweenMax方法大多都會返回一個TweenMax的實例 -- 即下文所說的TweenMax Object。一個TweenMax需要三個參數,即$target:Object, $duration:Number, $vars:Object,頭兩個即運動物體,時間,第三個參數保存了所有的參數。

二,TweenMax主類:

這里分幾個大塊來介紹,分別是:第三個參數特有屬性(29個),PlugIn(17個),公共屬性(10個),公共方法(20個)。

1,第三個參數特有屬性(29個):

這29個參數可以直接傳入第三個OBJECT參數中,不會增加文件的大小。

(1)delay : Number:延遲開始,在TweenMax動畫開始前延遲的秒數。

(2)useFrames : Boolean:當設置為True時,對這個TweenMax Object的時間計算方式就是基於幀frame的。

(3)ease : Function:緩動方式。可以使用com.greensock.easing包下的緩動函數。

(4)easeParams : Array:緩動函數參數。某些緩動函數需要傳入一些參數來進行額外的控制。

(5)onInit : Function:初始化函數。在TweenMax開始前,所有參數還沒被傳入TweenMax Object時觸發。可以用來初始化運動對象的狀態。

(6)onInitParams : Array:初始化函數參數。

(7)onStart : Function:開始函數。跟初始化函數不同,開始函數在TweenMax Object的值改變之后才觸發,而且不同於初始化函數。開始函數可以被觸發多次。

(8)onStartParams : Array:開始函數參數。

(9)onUpdate : Function:更新函數。當每次TweenMax Object數值更新的時候觸發。

(10)onUpdateParams : Array:更新函數參數。

(11)onComplete : Function:完成函數。當TweenMax Object完成緩動后觸發。

(12)onCompleteParams : Array:完成函數參數。

(13)onReverseComplete : Function:回放完成函數。當TweenMax Object處於回放狀態,並且回到起點時觸發。

(14)onReverseCompleteParams : Array:回放完成函數參數。

(15)onRepeat : Function:重放函數。當TweenMax Object每次重放的時候觸發。

(16)onRepeatParams : Array:重放函數參數。

(17)immediateRender : Boolean:立即渲染。一般來說,TweenMax Object會在下一個渲染周期(也就是下一幀)被渲染到場景中。如果想強制立即渲染,可以把這個參數設為true。另外如果想阻止一個運動周期為0的運動物體被渲染,也可以把這個參數設為false。

(18)paused : Boolean:暫停。這個很好理解,設為true時TweenMax Object就會暫停緩動。

(19)reversed : Boolean:反轉。不知道為什么跟說明文檔里的不同。我的理解是將TweenMax Object的緩動反過來播放。

(20)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);

(21)repeat : int:循環次數。設置為-1為無限循環。

(22)repeatDelay : Number:循環延遲的時間。

(23)yoyo : Boolean:YOYO球。另外一種循環的方式。像我們玩的YOYO球一樣,從頭到尾,再從尾到頭的往返運動。PS:要與repeat同時設置。

(24)onStartListener : Function:注冊一個TweenEvent的監聽,跟開始函數在同一時刻派發。

(25)onUpdateListener : Function:注冊一個TweenEvent的監聽,跟更新函數在同一時刻派發。

(26)onCompleteListener : Function:注冊一個TweenEvent的監聽,跟完成函數在同一時刻派發。

(27)onReverseCompleteListener : Function:注冊一個TweenEvent的監聽,跟回放完成函數在同一時刻派發。

(28)onRepeatListener : Function:注冊一個TweenEvent的監聽,跟重放函數在同一時刻派發。

(29)startAt : Object:重設初始值。一般TweenMax Object使用運動物體的當前狀態來做初始值。但是可以使用這個參數重新設置運動物體的初始狀態。

 

2,PlugIn(17個)

PlugIn 與"第三個參數特有屬性"其實是同一樣東西。所不同的是他會顯著增加生成文件的大小。所有PlugIn 都關閉的情況下TweenMax的大小為8.8k(TweenLite為4k)。當所有的PlugIn都使用后(包括收費的)TweenMax會膨脹到 25.9k。(話說回來怎么關閉我也不清楚,求指教)

這里介紹的是TweenMax文檔里提到的17個PlugIn(我看了包里面竟然有30個,囧···不管他)。

(1)autoAlpha : Number:跟alpha幾乎一樣,不同的是他在alpha==0時會自動將visible也設為false,而在alpha>0時將visible設為true。

(2)visible : Boolean:在TweenMax Object的最后設置物體的visible屬性。

(3)volume : Number:緩動音量的。需要運動物體有soundTransform屬性,例如MovieClip,SoundChannel,NetStream等。

(4)tint : Number:顏色。將整個運動物體變成對應的顏色。可以使用十六進制值。

(5)removeTint : Boolean:設為true時,去掉已經使用的tint屬性。

(6)frame : Number:當運動物體是MovieClip時,緩動內部的時間軸。

(7)bezier : Array:貝塞爾曲線。這個有點不清楚,好像數組里的奇數個點(Object{x:xxx,y:xxx})為貝塞爾曲線的控制點,偶數個點為運動的終點。

(8)bezierThrough : Array:比貝塞爾曲線更直觀,數組里奇數的點為曲線中要穿過的點。

(9)orientToBezier : Array (or Boolean):指向運動。一個比較常用的功能是在進行曲線運動時,物體的朝向一般要對應運動的方向(例如汽車之類的運動)。對於2D可以簡單的傳值 true。對於3D或者需要更多的靈活性,可以傳入數組4個參數,x,y,rotation,需要增加的度數,注:頭3個參數不是具體的數值,而是需要變化的參數,頭兩個是位置屬性,第三個是旋轉參數,第四個參數為可選。

(10)hexColors : Object:16 進制緩動。 TweenMax在對16進制數進行緩動時會有不平滑的現象出現,這是就需要使用hexColors參數進行緩動。hexColors參數是一個對象,所 以需要把要進行緩動的參數傳入其中,即:TweenMax.to(target,2,{hexColors:{mcParas:newColor}});其中mcParas是target的屬性,newColor是要緩動到的新的16進值。

(11)shortRotation : Object:短旋轉。用這個代替rotation的話,TweenMax會自動按最短的旋轉方向來進行旋轉,而不是按照AS3默認的以逆時針方向進行旋轉。記得要按Object的方式傳入。

(12)roundProps : Array:取整數。對於想要在變化中始終取整的值,可以把屬性的字符形式放到這個數組中。例:TweenMax.to(target,2,{x:200,y:200,roundProps:["x","y"]});

(13)blurFilter:Object:模糊濾鏡。用法:TweenMax.to(target,2,{blurFilter:{blurX:xxx,blurY:xxx}});

(14)glowFilter:Object:發光濾鏡。用法:TweenMax.to(target,2,{glowFilter:{color:0xFFFFFF,blurX:xxx,blurY:xxx}});

(15)colorMatrixFilter:Object:顏色矩陣濾鏡。用法:TweenMax.to(target,2,{colorMatrixFilter:{colorize:0xff0000, amount:1, contrast:1, saturation:1, hue:0}});

(16)dropShadowFilter:Object:投影濾鏡。用法:TweenMax.to(target,2,{dropShadowFilter:{color:0xff0000, alpha:1, blurX:12, blurY:12, distance:12}});

(17)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(parent:DisplayObjectContainer, 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變化

 立方圖片分享

不知道Quad代表什么意思,不過是比較普通的緩動。Quadratic平方緩動??。

9,Quart四分之一變化。


立方圖片分享

我才Quart是Quarter的意思,有1/4的時間是沒有緩動。

10,Quint變化

立方圖片分享

百度一下是什么五胞胎之一?暈了,是1/5時間沒有緩動嗎?

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")});

 

四,總結:

TweenMax的功能很多,而且處於不斷更新完善中。這次介紹了絕大部分常用的功能,其中可能會有錯漏的地方,希望有發現的及時跟我聯系,幫助我也糾正錯誤。 :)

而且他現在好像發展到什么Tween Platform了。還有什么TweenLoader,TimeLineMax,TimeLineLite等等.

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM