1. 程式人生 > >[AS3]TweenLite用法詳細說明全文中文翻譯

[AS3]TweenLite用法詳細說明全文中文翻譯

描述:
        緩動。 我們都在做。我們很多人都知道除了 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 元件旋轉並跑動到滑鼠位置。