2008年11月30日

TweenLite

/*

版本: 8.02

日期: 8/24/2008

ACTIONSCRIPT 語言版本: 3.0 (AS2 版也有提供)

更新 及 更多文檔請訪問: http://www.TweenLite.com (這裡的鏈接指向 AS3 版)

描述:
緩動。 我們都在做。我們很多人都知道除了 Adobe's Tween 類之外,還有很多更好的動畫引擎,(比如 Tweener). 每種引擎都有它們各自的優缺點。
最近幾年,為了得到一個更緊湊的,跑得更快,效率更高的引擎,我創建了 TweenLite (我無法接受其它的一些引擎帶來的文件尺寸上的負擔).它很快就融入到我的所有工作中。我告訴其它人,讓大家能夠從中獲益,最終,我將它發佈了出來。在過 去的幾年中,TweenLite越來越受歡迎,超乎了我的想像.
基於此,我又添加了一些新的功能,並且儘量保持這個文件的尺寸,讓它小於3K。 TweenFilterLite 擴充了 TweenLite 並且加入了濾鏡緩動,包含了 ColorMatrixFilter 的一些效果,比如飽和、對比、增亮、色調,甚至是著色,但文件的尺寸始終沒有超過3K。與 TweenLite 的做法相似,提供有AS2版和AS3版的類包下載。
TweenMax 比 TweenFilterLite 增加了更多的特性,包含 bezier 緩動,暫停/恢復,順序執行等等。(見 www.TweenMax.com
)
我猜你會想「如果這個是『輕量級的』,那麼它一定會丟掉很多特性,讓我用的時候會有點擔心」。這種想法是對的,在這裡缺少一些其它緩動引擎所包含的特效, 但是我可以肯定的說,在過去幾年我的工程(很多獲獎的 flash 程序以及500強企業的項目中)中,我幾乎一直都在用它,而它從沒有讓我失望過。
我還真沒發現過我還需要其它的功能。你可以對任何的屬性(包括 DisplayObject 對象的音量和顏色)使用緩動函數,內置的延遲時間,回調函數,以及傳遞參數給這些回調函數,甚至根據數組進行緩動,統統只在一行代碼中完成。如果你需要更 多的特效,你可以裝上TweenFilterLite 或者 TweenMax來用用。
我也從來沒有發現比這個更快的引擎。不同引擎執行效率的比較,請訪問 http://blog.greensock.com/tweeing-speed-test/.

TweenLite參數說明:
1) $ target : Object - 作為目標的對象, MovieClip或者其它對象
2) $ duration : Number - 動畫的時間長度(單位:秒)
3) $ vars : Object – 對象,通過屬性值,來存貯各種屬性參數用於緩動。(如果你使用 TweenLite.from() 方法,這裡的參數表示緩動的初始值)
該對象所具有的屬性:
alpha: alpha 目標對象應該完成 (或開始,當使用 TweenLite.from()時)的透明度級別.如果 target.alpha 是1,當緩動被執行的時候,你指定參數為 0.5,它將把透明度從 1 緩動到 0.5.
x: 改變 MovieClip的 x 位置,把這個值設置成你希望的 MovieClip 的結束位置(如果你使用的是 TweenLite.from()這個值表示開始位置).
    ( y scaleX scaleY rotation 等屬性不再重複說明)
特別的屬性 (**可選的**):
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 。
visible : Boolean - 在緩動結束時,想要指定 DisplayObject 的 visible 屬性,請使用這個參數。
volume : Number - 對 soundTransform (MovieClip/SoundChannel/NetStream 等)對象中的volume屬性(音量大小)進行緩動
tint : Number - 改變 DisplayObject 的顏色,設置一個16進制顏色值之後,當緩動結束時,目標對象將被變成這個顏色,(如果使用的是TweenLite.from(),這個值將表示目標對象 開始緩動時的顏色)。舉個例子,顏色值可以設定為: 0xFF0000。
removeTint : Boolean - 要移除 DisplayObject 顏色,將這個參數設成 true 。
frame : Number - 將 MovieClip 緩動到指幀頻。
onStart : Function - 在緩動開始時想要執行某個函數,就將函數的引用(通常是函數名)放到這裡。如果緩動是帶延遲的,那麼在緩動開始前該函數不會被執行。
onStartParams : Array - 為緩動開始時要執行的函數傳遞參數。(可選的)
onUpdate : Function - 緩動過程中,每次更新時調用這裡指定的函數(緩動開始後,每一幀被觸發一次),
onUpdateParams : Array - 給 onUpdate 參數指定的函數傳遞參數 (可選的)
onComplete : Function - 緩動結束時執行的函數。
onCompleteParams : Array - 給 onComplete 參數指定的函數傳遞參數 (可選的)
persist : Boolean - 值為 true 時,TweenLite 實例將不會自動被系統的垃圾收集器給收走。但是當新的緩動出現時,它還是會被重寫(overwritten)默認值為 false.
renderOnStart : Boolean - 如果你使用帶有延遲緩動的 TweenFilterLite.from() ,並且阻止緩動的渲染(rendering )效果,直到緩動真正開始,將這個值設為 true.默認情況下該值為 false ,這會讓渲染效果立即被執行,甚至是在延遲的時間還沒到之前。
overwrite : int - 當前的緩動被創建以後,通過這個參數可以限制作用於同一個對象的其它緩動,可選的參數值有:
- 0 (沒有): 沒有緩動被重寫。這種模式下,運行速度是最快的,但是需要注意避免創建一些控制相同屬性的緩動,否則這些緩動效果間將出現衝突。
- 1 (全部): (這是默認值,除非 OverwriteManager.init() 被調用過)對於同一對象的所有緩動在創建時將會被完全的覆蓋掉。
TweenLite.to(mc, 1, {x:100, y:200});
TweenLite.to(mc, 1, {x:300, delay:2}); //後創建的緩動將會覆蓋掉先前創建的緩動,(可以起到這樣的作用:緩動進行到一半時被中斷,執行新的緩動 譯者注)
- 2 (自動): (當 OverwriteManager.init() 被執行後,會根據具體的屬性值進行選擇)只覆蓋對同一屬性的緩動。
TweenLite.to(mc, 1, {x:100, y:200});
TweenLite.to(mc, 1, {x:300}); //only "x" 屬性的緩動將被覆蓋
- 3 (同時發生): 緩動開始時,覆蓋全部的緩動。
TweenLite.to(mc, 1, {x:100, y:200});
TweenLite.to(mc, 1, {x:300, delay:2}); //不會覆蓋先前的緩動,因為每二個緩動開始時,第一個緩動已經結束了。

舉例:
將實例名為 "clip_mc" 的 MovieClip 透明度降到 50% (0.5) ,並將它 x 軸位置移動到 120 ,將音量將到 0,緩動總共用時 1.5 秒,代碼如下:
import gs.TweenLite;
TweenLite.to(clip_mc, 1.5, {alpha:0.5, x:120, volume:0});

如果希望使用更高級的緩動函數在 5 內,將 alpha 變到 0.5,將 x 移動 到 120 ,使用 "easeOutBack" 彈性函數,緩動整體延遲 2 秒發生,並且在緩動結束時,執行 "onFinishTween" 函數,並且為這個函數傳遞幾個參數,(一個數值 5 以及對 clip_mc 的引用),代碼如下:
import gs.TweenLite;
import fl.motion.easing.Back;
TweenLite.to(clip_mc, 5, {alpha:0.5, x:120, ease:Back.easeOut, delay:2, onComplete: onFinishTween, onCompleteParams:[5, clip_mc]});
function onFinishTween(argument1:Number, argument2:MovieClip):void {
trace("The tween has finished! argument1 = " + argument1 + ", and argument2 = " + argument2);
}

如果你的舞台上的 MovieClip 已經停在了它的結束位置,你只想讓它花上5秒種回到這個位置,(只需要改變 y 屬性,比當前位置高 100 像素的位置,讓它從那裡下落), 代碼如下(這次使用的是 TweenLite.from 譯者注):
import gs.TweenLite;
import fl.motion.easing.Elastic;
TweenLite.from(clip_mc, 5, {y:"-100", ease:Elastic.easeOut});

說明:
- TweenLite類會讓你的 Flash 文件增加 3kb大小。
- 給參數值加上引號,表示對指定的屬性進行相應操作。比如,使用 TweenLite.to(mc, 2, {x:"-20"}); 它將 mc.x 向左移動 20 像素,與此相同效果的代碼是:TweenLite.to(mc, 2, {x:mc.x - 20});
- 你可以用別的緩動函數替換 TweenLite 默認的緩動函數: Regular.easeOut.
- 必須使用 Flash Player 9 或之後版本的播放器 (ActionScript 3.0)
- 可以對任何 MovieClip 使用 "volume" 緩動,就比如:TweenLite.to(myClip_mc, 1.5, {volume:0});
- 可以將 MovieClip 設定成某種顏色,使用 "tint" 參數,比如: TweenLite.to(myClip_mc, 1.5, {tint:0xFF0000});
- 想要對數組內容進行緩動,將數值放到一個叫 endArray 的數組中即可,例如:
var myArray:Array = [1,2,3,4];
TweenLite.to(myArray, 1.5, {endArray:[10,20,30,40]});
- 可以在任何時候終止緩動,使用 TweenLite.killTweensOf(myClip_mc); 函數。如果想強制終止緩動,可以傳遞一個 true 做為第二個參數,比如
TweenLite.killTweensOf(myClip_mc, true);
- 取掉延遲回調函數,用 TweenLite.killDelayedCallsTo(myFunction_func);這項功能可以用來控制回調函數的優先級。
- 使用 TweenLite.from() 方法,可以使用對象從別的位置回到當前的位置。例如,你可以將對象在舞台上擺放整齊(緩動結束時的位置),然後利用
緩動,讓它們跑到那個位置上去,你可以將緩動的初始位置值 x 或 y 或 alpha (或者其它你需要的屬性)當做參數傳遞給這個方法函數。

TweenLite 下載鏈接:
http://www.greensock.com/ActionS ... S3/TweenLiteAS3.zip
下載下來的類包中,有一個 TweenLiteAS3_Sample_1.swf ,初學者可以用它來觀察各種緩動的效果,並且直接得到相關的執行代碼。算是一個可視化設計的工具,不要錯過。
下載到類包以後,解壓縮到一個目錄比如:d:\AS3Class ,在flash9 的首選參數->ActionScript->ActionScript3.0設置中添加類目錄,d:\AS3Class\TweenLiteAS3 即可正確引用到相關的類。


應用舉例:
import gs.TweenLite;
import gs.easing.*;

stage.addEventListener(MouseEvent.CLICK, onCK);
function onCK(evt) {
TweenLite.to(mc, 0.5, {x:mouseX, y:mouseY, rotation:360});
}
在舞台上點擊,會讓mc 元件旋轉並跑動到鼠標位置。