Flex的行爲機制使得開發者可以很方便地爲應用程序添加動畫效果，從而使用戶界面更加豐富多彩。本章將介紹如何在Flex應用程序中創建行爲及動畫效果。
9.1 什麼是行爲
Flex中的行爲（Behavior）是由觸發器（Trigger）和效果（Effect）組合而成。當用戶在界面中進行某項操作時，如單擊某個按鈕，觸發器會被激活，從而使目標組件發生某些視覺或聽覺上的變化，例如播放一段逐漸顯示的動畫或發出聲響等。觸發器可以由用戶操作觸發，也可以由程序觸發，一個觸發器可以對應多個效果。
9.1.1 觸發器與效果
觸發器的使用非常簡單，可以作爲MXML標記中的一個屬性，也可以在<mx:Style>標記中調用，或者在ActionScript中用setStyle()和getStyle()方法調用。觸發器的名稱爲triggerEvent名稱 + “Effect”後綴。按照這種名稱約定，mouseDown事件的觸發器名稱爲mouseDownEffect。Flex中提供的觸發器名稱包括以下幾種。
l addedEffect：當組件添加到容器中時觸發。
l creationCompleteEffect：組件創建完畢時觸發。
l focusInEffect：組件獲得焦點時觸發。
l focusOutEffect：組件失去焦點時觸發。
l hideEffect：當組件的visible屬性更改爲false時觸發。
l mouseDownEffect：按下鼠標時觸發。
l mouseUpEffect：釋放鼠標時觸發。
l moveEffect：組件移動時觸發。
l removedEffect：組件被移除時觸發。
l resizeEffect：組件改變大小時觸發。
l rollOutEffect：鼠標從組件上移開時觸發。
l rollOverEffect：鼠標移動到組件上時觸發。
l showEffect：組件的visible屬性更改爲true時觸發。
Flex的動畫效果由一個工廠類（Factory）和一個實例類（Instance）構成。工廠類用來處理事件、控制動畫，它的名稱就是效果的名稱，如Zoom。通常我們在應用程序中創建一個工廠類的實例，設置必要的參數，然後將該實例與觸發器關聯。實例類則用來實現動畫效果，當觸發器被觸發或調用play()方法時，工廠類創建一個實例類的實例來播放所需效果，執行結束後，該實例會被銷燬，如果一個效果對應多個目標對象，每一個目標對象都會有一個自己的實例。實例類的命名規則爲效果名+Instance。如之前定義的工廠類名爲Zoom，那麼實例類名就是ZoomInstance。Effect的這種機制，是設計模式中工廠模式的一種應用，效果執行的時候，運行的不是Zoom，而是ZoomInstance。
下面的圖9-1分別表現了工廠類和實例類的層級關係。Effect類是一個抽象基類，是定義所有效果的基本工廠類。EffectInstance類是定義所有效果實例子類的基類。在應用程序中不會創建Effect類本身的實例，而是創建一個子類的實例，如Mask或Tween。
圖9-1 工廠類與實例類
9.1.2 簡單效果組件
Flex中提供了豐富的效果組件。由於效果是一種根據時間漸變的過程，因此所有效果都具有duration屬性，用來設置播放時間（以毫秒爲單位）。也可以通過設置repeatCount屬性和repeatDelay屬性，來分別控制效果播放的次數和重複播放效果的時間間隔（以毫秒爲單位）。如果希望在觸發器被觸發後，延遲一段時間調用效果，可以使用startDelay屬性。
1）AnimateProperty動畫效果
AnimateProperty是用來爲組件的屬性或樣式設置動畫的效果。我們可以通過其property屬性設定目標對象上需要設置動畫效果的屬性，然後設置fromValue屬性和toValue屬性，爲效果提供屬性的起始值和結束值。例如下面的代碼使用mouseDownEffect觸發器，當單擊圖片時，觸發AnimateProperty效果，在1秒鐘內，Image對象的scaleX屬性由1變爲2，被橫向拉伸。代碼如下：
<mx:AnimatePropertyid="animateProperty"property="scaleX"fromValue="1
" toValue="2"
duration="1000" />
<mx:Imageid="img"source="assets/plane.png"mouseDownEffect="{animateP
roperty}"/>
如果希望通過樣式設置效果，可以將isStyle屬性設置爲ture，然後通過setStyle()方法設置目標對象的樣式，從而達到設置效果的目的。
2）Blur模糊效果
Blur 是一種模糊效果。該效果使用了flash.filters.BlurFilter濾鏡，如果對某個組件應用了Blur 效果，就不能再對該組件應用BlurFilter濾鏡，也無法再次應用Blur效果。下面的代碼通過Image對象的mouseDownEffect觸發器觸發Blur效果，在1秒鐘內，Image對象將逐漸變得模糊。代碼如下：
<mx:Blur id="blurImage" duration="1000" blurXFrom="0.0" blurXTo="10.0"
blurYFrom="0.0" blurYTo="10.0"/>
<mx:Imageid="img"source="assets/plane.png"mouseDownEffect="{blurImage}"/>
3）Dissolve溶解效果
Dissolve是一種溶解效果。當效果開始播放時，將創建一個不透明的矩形，這個矩形懸浮在目標組件的上方，它的顏色由Dissolve.color屬性設置，此時透明度爲“1.0 - Dissolve.alphaFrom”。隨着效果的播放，該矩形的alpha屬性將從(1.0 - alphaFrom)逐漸變爲“1.0 – alphaTo”，直到效果播放完成，矩形被銷燬。
如果目標對象是一個容器，那麼Dissolve效果將應用於容器內部的內容區域。
下面的代碼使用一個CheckBox對象設置Image的visible屬性，通過hideEffect和showEffect觸發器分別觸發各自的Dissolve效果：
<mx:Dissolveid="dissolveOut"duration="1000"alphaFrom="1.0"alphaTo="0
.0"/>
<mx:Dissolveid="dissolveIn"duration="1000"alphaFrom="0.0"alphaTo="1.
0"/>
<mx:CheckBox id="cbx" label="visible" selected="true"/>
<mx:Image source="assets/plane.png" visible="{cbx.selected}"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
4）Fade淡入淡出效果
Fade是一種淡入淡出效果，它通過設置組件的alpha屬性來實現動畫效果。當使用showEffect或hideEffect觸發器設置Fade效果時，如果省略了alphaFrom和alphaTo屬性的值，那麼在showEffect觸發器上目標對象的透明度將從 0變化到目標的當前alpha值，而在hideEffect觸發器上則會從當前的alpha 值變化到0。如果要對字體使用Fade效果，必須使用嵌入字體。
下面的代碼使用一個CheckBox對象設置Image的visible屬性，通過hideEffect和showEffect觸發器分別觸發各自的Fade效果：
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<mx:CheckBox id="cbx" label="visible" selected="true"/>
<mx:Image source="assets/plane.png" visible="{cbx.selected}"
hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
5）Glow發光效果
Glow是一種發光效果，該效果使用了flash.filters.GlowFilter濾鏡類。如果對某個組件應用了Glow效果，就不能對該組件應用GlowFilter濾鏡，也無法再次應用Glow效果。下面的代碼通過Image對象的mouseDownEffect觸發器觸發Glow效果：
<mx:Glow id="glowImage" duration="1000" alphaFrom="1.0" alphaTo="0.3"
blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0"color="0x
00FF00"/>
<mx:Image source="assets/plane.png" mouseDownEffect="{glowImage}"/>
6）Iris虹效果
Iris效果通過擴展或收縮集中在目標上的矩形遮罩爲效果目標設置動畫。該效果可以從目標的中心放大遮罩來顯示目標，也可以向中心收縮遮罩來隱藏目標。下面的代碼使用一個CheckBox對象設置Image的visible屬性，通過hideEffect和showEffect觸發器分別觸發各自的Iris效果：
<mx:Iris id="irisOut" duration="1000" showTarget="true"/>
<mx:Iris id="irisIn" duration="1000" showTarget="false"/>
<mx:Imageid="flex" source="assets/plane.png" visible="{cbx.selected}"
showEffect="{irisIn}" hideEffect="{irisOut}"/>
<mx:CheckBox id="cbx" label="visible" selected="true"/>
7）Move移動效果
Move效果用來實現移動動畫。在給定時間內，組件的位置會隨時間變化而變化。使用該效果通常需要用到以下幾個屬性。
l xFrom和yFrom屬性用來指定初始位置。
l xTo和yTo屬性用來指定目標位置。
l xBy和yBy用來指定移動量，即組件在x軸向和y軸向上的移動速度。
通常只需要指定初始位置、目標位置或移動量這些值中的任意2個， Flex就會計算第3個值。如果指定所有這3個值，Flex就會忽略xBy和yBy值。如果僅指定xTo和yTo值或xBy和yBy值，那麼Flex會將xFrom和yFrom設置爲對象的當前位置。
下面的程序演示瞭如何使用Move效果。
代碼清單 MoveSample.mxml
<?xml version="1.0"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"paddingLeft=
"0"
layout="absolute" mouseDown="moveImage();">
<mx:Script>
<![CDATA[
//當按下鼠標時調用該事件
private function moveImage():void {
//停止播放Move效果
moveEffect.end();
//設置目標位置
moveEffect.xTo=mouseX;
moveEffect.yTo=mouseY;
//播放Move效果
moveEffect.play();
}
]]>
</mx:Script>
<mx:Move id="moveEffect" target="{img}"/>
<mx:Image id="img" source="assets/plane.png"/>
</mx:Application>
代碼中將Application的layout屬性設置爲absolute，當用戶在應用程序中任何位置上單擊鼠標時，調用moveImage方法，該方法中首先停止Move效果，然後根據鼠標單擊的位置設置目標位置，最後播放效果。
通常Move效果應用於使用絕對定位的容器（如 Canvas）或使用“layout=absolute”的容器（如 Application或Panel）中。如果需要將其應用到自動佈局的容器（如VBox或 Grid容器）中，雖然會移動目標對象，但下次容器更新其佈局時，會將目標對象移回其原始位置。在這種情況下，可以將容器的autoLayout屬性設置爲false來禁止往回移動，但這會禁用容器中所有控件的佈局。
8）Pause暫停效果
Pause效果可以實現在指定時間段內不執行任何操作的功能。如果將Pause效果添加爲 Sequence效果的子項，可以創建2個其他效果之間的暫停。
9）Resize大小調整效果
Resize效果用來改變組件的大小。與Move效果相似，Resize效果可以指定初始大小（widthFrom、heightFrom）、目標大小（widthTo、heightTo）和變化量（widthBy、heightBy），其使用規則也與Move效果的初始位置、目標位置和移動量的使用規則相似。下面的代碼演示了Resize效果的使用方法：
<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="160"/>
<mx:Resize id="contract" target="{img}" widthTo="25" heightTo="40"/>
<mx:ControlBar>
<mx:Button label="Expand" click="expand.end(); expand.play();"/>
<mx:Buttonlabel="Contract"click="contract.end();contract.play();"/>
</mx:ControlBar>
<mx:Image id="img" width="25" height="40" source="assets/icon01.png"/>
另外hideChildrenTargets屬性用來隱藏Panel容器的其他子項，當我們對Panel容器中的子項應用Resize效果時，默認情況下Panel會反覆計算子項的大小和位置以調整佈局，如果將這個屬性設爲true，可以讓Panel容器在播放動畫時不做這種計算，直到播放完成，這樣可以節約系統資源。
10）Rotate旋轉效果
Rotate是一種旋轉效果，使組件圍繞指定的點旋轉。Rotate可以指定旋轉中心的座標（originX和originY屬性）及旋轉的起始角度（angleFrom屬性）和最終角度（angleTo屬性）。起始旋轉角度的有效值範圍是0～360，而最終角度則可以是正值也可以是負值，默認值爲360。如果angleTo的值比angleFrom的值小，則目標沿逆時針方向旋轉，否則以順時針方向旋轉。代碼如下：
<mx:Rotate id="rotate" angleFrom="-45" angleTo="0" target="{img}"
duration="2000"/>
<mx:Image id="img" source="assets/plane.png" addedEffect="rotate"/>
另外有時需要設置hideFocusRing屬性，以確定在開始播放效果時，效果是否應隱藏對焦環。該屬性默認值爲true。對於組件而言，對焦環已經被自動隱藏。如果Rotate效果應用於那些不是以UIComponent爲基類目標對象，就必須隱藏對焦環。
需要注意的是， hideFocusRing屬性在以Effect爲基類的效果類中，默認值爲false，而在以MaskEffect爲基類效果類中，默認值爲true。
11）SoundEffect聲音效果
SoundEffect效果用來播放MP3音頻文件。我們可以通過source屬性指定要播放的MP3文件，可以直接設置該文件的URL，或是由Embed關鍵字嵌入MP3文件的Class對象。
SoundEffect效果的屬性包括以下幾個。
l autoLoad 屬性用來設置是否自動加載MP3文件，默認值爲true。
l bufferTime 屬性用來設置聲音對象的緩衝時間。默認值爲 1000，單位爲毫秒。
l isLoading如果已加載MP3，則該屬性爲true。
l loops 屬性用來設置循環次數，默認值爲0。
l panEasingFunction 屬性用來設置聲音均衡效果的緩動函數。
l panFrom屬性和panTo屬性用來設置聲音對象的起始和最終平移，取值範圍在-1.0～1.0之間，其中-1.0表示僅使用左聲道，1.0 表示僅使用右聲道，而0.0表示在2個聲道間平均地均衡聲音。
l sound 屬性表示已加載MP3文件的聲音對象。
l source 屬性表示要播放的MP3文件的URL或類。
l startTime 屬性用來設置開始播放時間（以毫秒爲單位），默認值爲0。
l useDuration 屬性表示是否根據duration屬性指定的時間停止播放，如果爲false，則會在MP3完成播放或循環後停止效果，默認值爲 true。
l volumeEasingFunction 屬性用來設置音量效果的緩動函數。
l volumeFrom 屬性和volumeTo屬性用來設置聲音對象的初始和最終音量，取值範圍在0.0～1.0之間，默認值爲1。
在下面的代碼所示的例子中，當應用程序創建完成後開始播放聲音文件，聲音從左聲道過渡到右聲道。
代碼清單 SoundSample.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationCompleteEffect="{mySound}">
<mx:SoundEffect id="mySound"
duration="10000"
useDuration="false"
panFrom="-1" panTo="1"
source="@Embed(source='assets/bumperc.mp3')"/>
</mx:Application>
12）WipeUp、WipeRight、WipeDown、WipeLeft擦除效果
這些類定義了4個方向的擦除效果，通常與showEffect和hideEffect觸發器配合使用，使用起來非常簡便，如下面的例子。
代碼清單 WipeSample.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--定義擦除效果-->
<mx:WipeUp id="wipeUpOut" duration="1000"/>
<mx:WipeUp id="wipeUpIn" duration="1000"/>
<mx:WipeLeft id="wipeLeftOut" duration="1000"/>
<mx:WipeLeft id="wipeLeftIn" duration="1000"/>
<mx:WipeDown id="wipeDownOut" duration="1000"/>
<mx:WipeDown id="wipeDownIn" duration="1000"/>
<mx:WipeRight id="wipeRightOut" duration="1000"/>
<mx:WipeRight id="wipeRightIn" duration="1000"/>
<mx:Panel title="Wipe Effects">
<mx:HBox width="100%">
<!--向上擦除-->
<mx:Imagesource="@Embed(source='assets/icon1.png')"visible="{cbx.se
lected}"
hideEffect="{wipeUpOut}" showEffect="{wipeUpIn}"/>
<!--向左擦除-->
<mx:Imagesource="@Embed(source='assets/icon2.png')"visible="{cbx.se
lected}"
hideEffect="{wipeLeftOut}" showEffect="{wipeLeftIn}"/>
<!--向下擦除-->
<mx:Imagesource="@Embed(source='assets/icon3.png')"visible="{cbx.se
lected}"
hideEffect="{wipeDownOut}" showEffect="{wipeDownIn}"/>
<!--向右擦除-->
<mx:Imagesource="@Embed(source='assets/icon4.png')"visible="{cbx.se
lected}"
hideEffect="{wipeRightOut}" showEffect="{wipeRightIn}"/>
</mx:HBox>
<mx:ControlBar>
<mx:CheckBox id="cbx" label="visible" selected="true"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
運行該程序，效果如圖9-2所示。
圖9-2 擦除效果
13）Zoom縮放效果
Zoom效果可以以指定點爲中心按比例縮放對象。與Resize效果不同的是，Resize改變目標對象的長寬屬性，而Zoom改變的目標對象的縮放比例。在下面的例子中，當鼠標移動到圖片上時開始播放Zoom效果，鼠標移出時還原。
代碼清單 ZoomSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
//鼠標事件處理函數
public function doZoom(event:MouseEvent):void {
//如果已經在播放效果了, 則反向播放效果
if (zoom.isPlaying) {
zoom.reverse();
}
//否則播放效果
else {
zoom.play([event.target],event.type==MouseEvent.ROLL_OUT?true:false);
}
}
]]>
</mx:Script>
<mx:Zoom id="zoom" originX="{0}" originY="{0}"
zoomWidthTo="2"zoomHeightTo="2"zoomWidthFrom=".5"zoomHeightFrom=".5
"/>
<mx:Paneltitle="ZoomEffect"width="90%"height="90%"layout="absolute"
paddingTop="5"paddingLeft="10"paddingRight="10"paddingBottom="5">
<mx:Imageid="img"x="100"y="100"source="@Embed(source='assets/car.pn
g')"
scaleX=".5"scaleY=".5"rollOver="doZoom(event)"rollOut="doZoom(event
)"/>
</mx:Panel>
</mx:Application>
9.1.3 複合效果組件
很多時候需要同時執行或按順序執行多個動畫效果，此時可以用Parallel和Sequence效果。
1）Parallel平行播放效果
Parallel效果可以同時播放多個子效果，下面例子中的Parallel效果包含了Move和Resize效果，單擊“Expend”按鈕時圖片將放大併發生位移，單擊“Contract”按鈕則返回原位置，並逐漸縮小爲初始大小。
代碼清單 ParallelSample.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--在Parallel效果中包含Move和Resize效果-->
<mx:Parallel id="expand" target="{img}">
<mx:Move xTo="{canvas.width/2 - 50}" yTo="{canvas.height/2-
100}"/>
<mx:Resize widthTo="100" heightTo="200"/>
</mx:Parallel>
<mx:Parallel id="contract" target="{img}">
<mx:Move xTo="20" yTo="20"/>
<mx:Resize widthTo="30" heightTo="60"/>
</mx:Parallel>
<mx:Panel title="Parallel Effect" width="500" height="300">
<mx:Canvas id="canvas" width="100%" height="100%">
<mx:Image id="img" x="20" y="20" width="30" height="60"
source="@Embed(source='assets/icon1.png')"/>
</mx:Canvas>
<!--使用ControlBar中的按鈕控制效果播放-->
<mx:ControlBar>
<mx:Buttonlabel="Expand"click="expand.end();expand.play();"/>
<mx:Buttonlabel="Contract"click="contract.end();contract.play();"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
這個例子中同時使用了Move和Resize效果，如圖9-3所示。
圖9-3 Parallel效果
2）Sequence順序播放效果
Sequence效果中可以順序添加多個子效果，並以子效果的添加順序依次播放。下面的代碼演示了Sequence效果的使用方式：
<mx:Sequence id="sequenceEffect">
<mx:Move xBy="150" duration="1000"/>
<mx:Pause duration="2000"/>
<mx:Move xBy="-150" duration="1000"/>
</mx:Sequence>
<mx:Canvaswidth="100%"height="100%"mouseDownEffect="{sequenceEffect}
">
<mx:Image source="assets/plane.png"/>
</mx:Canvas>
在這個例子裏，當用戶在Canvas中按下鼠標時，會依次調用Sequence中的各個子效果，首先Image對象會右移一段距離，然後暫停2秒，再左移回到原來位置。
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/zjhzyzc/archive/2009/09/24/4585961.aspx
