本文和大家重點(diǎn)討論一下Flex效果組件的用法，如果希望在觸發(fā)器被觸發(fā)后，延遲一段時(shí)間調(diào)用Flex效果，可以使用startDelay屬性。

Flex效果組件

Flex中提供了豐富的效果組件。由于Flex效果是一種根據(jù)時(shí)間漸變的過(guò)程，因此所有效果都具有duration屬性，用來(lái)設(shè)置播放時(shí)間（以毫秒為單位）。也可以通過(guò)設(shè)置repeatCount屬性和repeatDelay屬性，來(lái)分別控制效果播放的次數(shù)和重復(fù)播放效果的時(shí)間間隔（以毫秒為單位）。如果希望在觸發(fā)器被觸發(fā)后，延遲一段時(shí)間調(diào)用Flex效果組件，可以使用startDelay屬性。

1）AnimateProperty動(dòng)畫(huà)效果

Flex效果組件中AnimateProperty是用來(lái)為組件的屬性或樣式設(shè)置動(dòng)畫(huà)的效果。我們可以通過(guò)其property屬性設(shè)定目標(biāo)對(duì)象上需要設(shè)置動(dòng)畫(huà)效果的屬性，然后設(shè)置fromValue屬性和toValue屬性，為效果提供屬性的起始值和結(jié)束值。例如下面的代碼使用mouseDownEffect觸發(fā)器，當(dāng)單擊圖片時(shí)，觸發(fā)AnimateProperty效果，在1秒鐘內(nèi)，Image對(duì)象的scaleX屬性由1變?yōu)?，被橫向拉伸。代碼如下：

<mx:AnimatePropertyidmx:AnimatePropertyid="animateProperty"property="scaleX"  
fromValue="1  
 
"toValue="2" 
 
duration="1000"/> 
 
<mx:Imageidmx:Imageid="img"source="assets/plane.png"  
mouseDownEffect="{animateProperty}"/> 
 

 如果希望通過(guò)樣式設(shè)置效果，可以將isStyle屬性設(shè)置為ture，然后通過(guò)setStyle()方法設(shè)置目標(biāo)對(duì)象的樣式，從而達(dá)到設(shè)置效果的目的。

2）Blur模糊效果

Flex效果組件中Blur是一種模糊效果。該效果使用了flash.filters.BlurFilter濾鏡，如果對(duì)某個(gè)組件應(yīng)用了Blur效果，就不能再對(duì)該組件應(yīng)用BlurFilter濾鏡，也無(wú)法再次應(yīng)用Blur效果。下面的代碼通過(guò)Image對(duì)象的mouseDownEffect觸發(fā)器觸發(fā)Blur效果，在1秒鐘內(nèi)，Image對(duì)象將逐漸變得模糊。代碼如下：

<mx:Bluridmx:Blurid="blurImage"duration="1000"blurXFrom="0.0" 
blurXTo="10.0" 
 
blurYFrom="0.0"blurYTo="10.0"/> 
 
<mx:Imageidmx:Imageid="img"source="assets/plane.png"  
mouseDownEffect="{blurImage}"/> 
 

 
3）WipeUp、WipeRight、WipeDown、WipeLeft擦除效果

Flex效果中這些類(lèi)定義了4個(gè)方向的擦除效果，通常與showEffect和hideEffect觸發(fā)器配合使用，使用起來(lái)非常簡(jiǎn)便，如下面的例子。

代碼清單WipeSample.mxml

<?xmlversionxmlversion="1.0"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<!--定義擦除效果--> 
 
<mx:WipeUpidmx:WipeUpid="wipeUpOut"duration="1000"/> 
 
<mx:WipeUpidmx:WipeUpid="wipeUpIn"duration="1000"/> 
 
<mx:WipeLeftidmx:WipeLeftid="wipeLeftOut"duration="1000"/> 
 
<mx:WipeLeftidmx:WipeLeftid="wipeLeftIn"duration="1000"/> 
 
<mx:WipeDownidmx:WipeDownid="wipeDownOut"duration="1000"/> 
 
<mx:WipeDownidmx:WipeDownid="wipeDownIn"duration="1000"/> 
 
<mx:WipeRightidmx:WipeRightid="wipeRightOut"duration="1000"/> 
 
<mx:WipeRightidmx:WipeRightid="wipeRightIn"duration="1000"/> 
 
<mx:Paneltitlemx:Paneltitle="WipeEffects"> 
 
<mx:HBoxwidthmx:HBoxwidth="100%"> 
 
<!--向上擦除--> 
 
<mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon1.png')"visible="{cbx.se  
 
lected}"  
 
hideEffect="{wipeUpOut}"showEffect="{wipeUpIn}"/> 
 
<!--向左擦除--> 
 
<mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon2.png')"visible="{cbx.se  
 
lected}"  
 
hideEffect="{wipeLeftOut}"showEffect="{wipeLeftIn}"/> 
 
<!--向下擦除--> 
 
<mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon3.png')"visible="{cbx.se  
 
lected}"  
 
hideEffect="{wipeDownOut}"showEffect="{wipeDownIn}"/> 
 
<!--向右擦除--> 
 
<mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon4.png')"visible="{cbx.se  
 
lected}"  
 
hideEffect="{wipeRightOut}"showEffect="{wipeRightIn}"/> 
 
</mx:HBox> 
 
<mx:ControlBar> 
 
<mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 
 
</mx:ControlBar> 
 
</mx:Panel> 
 
</mx:Application> 
 

 4）Zoom縮放效果

Flex效果組件中Zoom效果可以以指定點(diǎn)為中心按比例縮放對(duì)象。與Resize效果不同的是，Resize改變目標(biāo)對(duì)象的長(zhǎng)寬屬性，而Zoom改變的目標(biāo)對(duì)象的縮放比例。在下面的例子中，當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)開(kāi)始播放Zoom效果，鼠標(biāo)移出時(shí)還原。

代碼清單ZoomSample.mxml

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
<mx:Script> 

【編輯推薦】

1. 解析Flex效果組件中三大超炫效果
2. Flex主題創(chuàng)建及支持的樣式設(shè)置方式
3. 學(xué)習(xí)筆記 Flex效果組件用法指南
4. 剖析常見(jiàn)Flex效果組件用法
5. Flex數(shù)據(jù)綁定及其使用頻繁的幾種情況