TweenMax 建立在 TweenLite 核心類以及它的大哥 TweenFilterLite 基礎之上,它為 Tween 家族增加了新的受歡迎的功能(盡管只是錦上添花),從而使家族更加的壯大,比如貝賽爾緩動、暫停/繼續能力,簡便的連續緩、16進制顏色緩動、以及更多的內容。
TweenMax 采用了與它的兄弟相似的易于學習的語法結構。實事上,因為它擴展自它們,TweenMax 可以做任何 TweenLite 和/或者 TweenFilterLite 能做的事,還加上了更多的特色。那么為什么要建立 3 個類,而不是 1 個呢?問的好,我的目標是:效率最大化,尺寸最小化。坦白的說,TweenLite 可能是所有的程序員在 90% 的項目中都需要用到的,而它僅有 3k。相對它的功能來說,它是非常高效和緊湊的。
但是如果你需要對濾鏡進行緩動,或者更豐富的圖像效果,比如說飽和度(saturation)、對比度(contrast)、色相(hue)、調色等等進行控制,
那就裝上 TweenFilterLite 總共 6k 。還想要的更多? No problem (沒問題)-- TweenMax 已經在總共 8k 的大小里面塞滿了足夠多的功能。
想查看相關的功能對比圖,請訪問 www.TweenMax.com 以獲取更多信息。
( TweenMax 類包中直接包含有獨立的 TweenLite 和 TweenFilterLite 類,因此下載這一個包就可以了,在 Flash 類路徑中添加的時候,也只需要添加這一個路徑就可以了----譯者注)
TweenMax 創造了一種全新的功能,叫做 "bezierThrough"(暫譯為 貝塞爾通路),這個功能允許你定義一些點,通過貝塞爾曲線連接這些點,
(通常的控制點只是用來拉近曲線,這里的點直接在曲線的路徑上)。當然,如果你愿意,你可以用更正規的貝塞爾曲線。目前,TweenMax 增加了下列功能(相對于 TweenFilterLite 而言):
- 進行貝塞爾緩動(包括指定通路 THROUGH 點 和 運動對象的自動方位導航(在貝塞爾曲線中移動時,對象的旋轉角度是自動控制的,譯者注))
- 連續的緩動 或稱為 序列化的緩動
- 對 對象數組(數組中存放了不同的對象,譯者注) 中的對象進行統一的緩動,使用 allTo() 和 allFrom()
- 緩動中的 暫停/繼續 功能,使用 pause() 和 resume() 方法,或者 "paused" 屬性 (比如 myTween.paused = true)
- isTweening 靜態方法,用來判斷一個對象是否正在進行緩動(比如 TweenMax.isTweening(my_mc))
- 跳轉至緩動的任何時段,使用 "progress" 屬性。輸入一個 0 到 1 之間的數值。 progress 值為零,將會把緩動的進程跳轉到初始階段,值為 1 時,跳轉至 100% 完成狀態,值為 0.5 時,將轉至緩動過程的半山腰位置。
例如: myTween.progress = 0.5; - 對 16 進制的顏色進行緩動,使用 hexColors 屬性
- 獲取緩動效果的實例數組,該數組中包括了加在一個指定的目標對象上的所有的緩動效果的實例,該數組可以容納 TweenMax 和 TweenLite 和 TweenFilterLite 三種類型的緩動實例。
例如: TweenMax.getTweensOf(my_mc); // (如果 my_mc 上使用了不止一個的緩動效果,那么這里將返回一個數組,數組中是不同的緩動效果的實例,可以用來對每個緩動進行實時的控制,譯者注) - 獲取 TweenMax (和 TweenLite 和 TweenFilterLite) 的實例數組,使用用靜態函數 getAllTweens()
- 中止(殺死)所有的緩動(以及可選的完成部分緩動)
- 暫停/繼續 全部的緩動
參數:
$ target : Object - 目標 MovieClip (或其它對象),對它的屬性進行緩動
$ duration : Number - 動畫的時間長度(單位:秒)
-
$ vars : Object - 一個包含了多種屬性的對象,用來存貯緩動結束時的各種屬性值(如果你使用 TweenLite.from() 方法,這里的參數表示緩動的初始值)。
例如:
alpha: 目標對象在緩動結束時的 alpha (不透明度的級別)值。(當使用 TweenMax.from()時,表示開始緩動時的 alpha 值)
舉個例子,如果 target_obj.alpha 是 1,當這個緩動代碼被執行時,將 alpha 參數設成 0.5 ,它將實現從 1 到 0.5 的漸變緩動。
x: 想要改變 MovieClip 的 x 位置,只需要將這個參數值設成你希望的緩動結束時的值即可。(如果使用 TweenMax.from(),則表示緩動開始時的 x 值)專有屬性:
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 。
volume : Number - 改變 MovieClip 或者 SoundChannel 的音量,將緩動結束時的音量值寫在這里即可。(如果使用 TweenMax.from(),這里的值表示緩動開始時的音量).
tint : Number - 改變可顯示對象(DisplayObject)的色調/顏色,將緩動結束時的16進制值顏色值(比如 0xFF0000)寫在這里即可。(如果使用 TweenMax.from(),這里的值表示緩動開始時的顏色值).
如果想要移除顏色,傳一個 null 做為顏色值即可。
frame : Number - 將 MovieClip 緩動到指定的幀頻
bezier : Array - Bezier 緩動,允許你以非線性的方式進行緩動。例如,將一個 MovieClip 從原始的 (0,0) 的位置,向右移動500像素,到(500,0),在緩動的中間向下彎曲。只需要向貝賽爾數組中傳遞多個對象,每一個都是一個控制點(關于控制點是如何工作的請參考 Flash 的 curveTo() 繪圖方法相關說明)。在這個例子中,假設我們的控制點是 x/y 坐標
250,50。把 my_mc 放到 0,0 位置,然后執行下面的代碼: TweenMax.to(my_mc, 3, {_x:500, _y:0, bezier:[{_x:250, _y:50}]});
bezierThrough : Array - 與上面的貝賽爾數組相似,但是它接收的不是控制點,而是貝賽爾曲線要經過的位置點。與控制點相比,這樣的用法更加直觀。
orientToBezier : Array (或者 Boolean 類型) - 設計師/開發人員經常用到的一個效果,讓 MovieClip/Sprite 自動調整自身的方向(改變 rotation ),使之符合貝賽爾路徑的方向(就像是汽車在曲折的道路上需要不斷調整方向一樣----譯者注)。orientToBezier 使得這一切變得簡單。為了更精確的調整 rotation 屬性,TweenMax 需要 4 方面的信息:
1) 位置屬性 1 (通常為 "x")
2) 位置屬性 2 (通常為 "y")
3) 旋轉屬性 (通常為 "rotation")
4) 旋轉的度數(可選的 - 讓它更容易的正確瞄準 MovieClip )
當 orientToBezier 屬性為數組時,該(容器)數組中的每個元素是包含了一組數據的數組(形如 [[x1,y1,rota1,ang1],[x2,y2,rota2,ang2]]----譯者注)。
為了獲得最大的靈活性,你可以向容器數組中傳遞任意數量的數組,逐個的指定旋轉屬性。這在進行 3D 工作進會很方便,因為你可以旋轉多個坐標軸。如果進行的是標準的 2D x/y 坐標系貝賽爾緩動,只需要傳遞一個布爾值 true ,然后 TweenMax 將會使用一個典型的數組設置 [["x", "y", "rotation", 0]]。
提示:不要忘了這里存在著容器數組(注意:數組前后有兩層方括號)
hexColors : Object - 盡管 16 進制顏色是一種技術上使用的數字,但當你試途按照數字增減的老辦法來緩動時,你會發現顏色的變化并不平滑。為了更恰當的進行顏色緩動,通常需要獨立的對紅、綠、藍的成分進行緩動。TweenMax 把這一切變得簡單。將一個 16 進制顏色值緩動到另一個 16 進制顏色值,只需要使用這個 TweenMax 中專用的 hexColors 屬性即可。 這個屬性必須是一個對象,該對象具有相關的顏色屬性,屬性名稱與目標對象中使用的 16 進制顏色屬性的名稱相同。比如,如果 my_obj 對象具有一個“myHexColor”屬性,想讓它在兩秒種內緩動為紅色 (0xFF0000),需要這樣做:
TweenMax.to(my_obj, 2, {hexColors:{myHexColor:0xFF0000}}); (內層花括號括起來的部分,表示的就是一個包含有 myHexColor 屬性的對象----譯者注)
可以傳遞任意數量的 hexColor 屬性。
onStart : Function - 在緩動開始時想要執行某個函數,就將函數的引用(通常是函數名)放到這里。當緩動是帶延遲的,這一點會非常有用。
onStartParams : Array - 為緩動開始時要執行的函數傳遞參數。(可選的)
onUpdate : Function - 緩動過程中,每次更新屬性值時,會執行這里指定的函數(緩動開始后,每一幀被觸發一次)。
onUpdateParams : Array - 給 onUpdate 參數指定的函數傳遞參數 (可選的)
onComplete : Function - 緩動結束時執行的函數。
onCompleteParams : Array - 給 onComplete 參數所指定的函數傳遞參數 (可選的)
renderOnStart : Boolean - 當使用帶有延遲緩動的 TweenFilterLite.from() ,并且希望阻止緩動的渲染(rendering )效果,直到緩動真正開始,將這個值設為 true.默認情況下該值為 false ,這會讓 TweenMax.from() 渲染效果立即被執行,甚至是在延遲尚未結束之前。
overwrite : Boolean - 如果 不 希望當前的緩動效果自動覆蓋到其它的影響同一屬性的緩動,請確保這個值設為 false。
blurFilter : Object - 應用模糊濾鏡,需要傳遞一個具有下列(一個或多個)屬性的對象做為參數:blurX(橫向的模糊度), blurY(縱向的模糊度), quality(品質,默認值為2)
glowFilter : Object - 應用發光濾鏡,需要傳遞一個具有下列(一個或多個)屬性的對象做為參數:alpha(通明度),blurX , blurY , color(顏色),strength(強度), quality ,inner(內側發光),knockout(挖空)
colorMatrixFilter : Object - 應用顏色矩陣濾鏡,需要傳遞一個具有下列(一個或多個)屬性的對象做為參數:colorize(色調),amount(總量),contrast(對比度),brightness(亮度),saturation(飽和度),hue(色相),threshold(閥值),relative(相關性),matrix(顏色矩陣)
dropShadowFilter : Object - 應用陰影濾鏡,需要傳遞一個具有下列(一個或多個)屬性的對象做為參數:alpha, angle(角度), blurX, blurY, color, distance(距離), strength, quality
bevelFilter : Object - 應用斜角濾鏡,需要傳遞一個具有下列(一個或多個)屬性的對象做為參數:angle, blurX, blurY, distance, highlightAlpha(高亮區的透明度), highlightColor(高亮區的顏色),shadowAlpha(陰影區的透明度), shadowColor(陰影區的顏色), strength(強度), quality
關鍵屬性:
- progress : Number (范圍0 - 1,為 0 表示緩還未開始,0.5 緩動進行了一半,1 緩動結束)
- paused : Boolean (邏輯值)
關鍵方法:
- TweenMax.to(target:Object, duration:Number, vars:Object):TweenMax
- TweenMax.from(target:Object, duration:Number, vars:Object):TweenMax
- TweenMax.allTo(targets:Array, duration:Number, vars:Object):Array
- TweenMax.allFrom(targets:Array, duration:Number, vars:Object):Array
- TweenMax.sequence(target:Object, tweens:Array):Array
- TweenMax.getTweensOf(target:Object):Array
- TweenMax.isTweening(target:Object):Boolean
- TweenMax.getAllTweens():Array
- TweenMax.killAllTweens(complete:Boolean):void
- TweenMax.killAllDelayedCalls(complete:Boolean):void
- TweenMax.pauseAll(tweens:Boolean, delayedCalls:Boolean):void
- TweenMax.resumeAll(tweens:Boolean, delayedCalls:Boolean):void
- pause():void
- resume():void
示例:
對 MovieClip 進行連續的緩動,先用2秒鐘時間讓透明度降到 50%,然后用1秒鐘時間滑落到 y 坐標為300的位置,使用如下的代碼:
import gs.TweenMax;
TweenMax.sequence(clip_mc, [{time:2, alpha:0.5}, {time:1, y:300}]);
使用 Back.easeOut 函數對影片剪輯 clip_mc 進行緩動,緩動持續 5 秒鐘,alpha 值變到 0.5,x 坐標變到 120,延遲 2 秒鐘執行,緩動結束后,調用“onFinishTweenusing”,并且為這個函數傳遞幾個參數(數值 5 和 對 clip_mc 的引用),代碼如下:
import gs.TweenMax;
import fl.motion.easing.Back;
TweenMax.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);
}
如果舞臺上的影片剪輯已經處于期望的緩動結束時位置,而你希望它從其它位置用 5 秒鐘的時間回到當前位置,(比如從比當前位置高 100 像素或屏幕外更高的地方,通過改變 y 屬性,下落到當前位置)可以使用下面的代碼:
import gs.TweenMax;
import fl.motion.easing.Elastic;
TweenMax.from(clip_mc, 5, {y:"-100", ease:Elastic.easeOut});
備注:
- 給參數值加上引號,表示對指定的屬性進行相應操作。比如,使用 TweenMax.to(mc, 2, {x:"-20"}); 它將 mc.x 向左移動 20 像素,與此相同效果的代碼是:TweenMax.to(mc, 2, {x:mc.x - 20});
- 可以對任何 MovieClip 使用 "volume" 緩動,就比如:
TweenMax.to(myClip_mc, 1.5, {volume:0}); - 可以將 MovieClip 緩動成某種色調或顏色,使用 "tint" 屬性,比如:
TweenMax.to(myClip_mc, 1.5, {tint:0xFF0000}); - 想要對數組內容進行緩動,將數值放到一個叫 endArray 的數組中即可,例如:
var myArray:Array = [1,2,3,4];
TweenMax.to(myArray, 1.5, {endArray:[10,20,30,40]}); - 可以在任何時候終止緩動,使用 TweenMax.killTweensOf(myClip_mc); 函數。如果想強制終止緩動,可以傳遞一個 true 做為第二個參數,比如 TweenMax.killTweensOf(myClip_mc, true);
- 去除延遲回調函數,用 TweenMax.killDelayedCallsTo(myFunction_func);這項功能可以用來控制回調函數的優先級。
- 使用 TweenMax.from() 方法,可以使目標對象運動回它所在的位置。比如,你可以將對象在舞臺上擺放整齊(緩動結束時的位置),然后利用緩動,讓它們跑到那個位置上去,你可以將緩動初始位置的 x 或 y 或 alpha (或者其它你需要的屬性)當做參數傳遞給這個方法函數。