如何使用Flex效果組件

小編給大家分享一下如何使用Flex效果組件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Flex效果組件

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

1）AnimateProperty動畫效果

Flex效果組件中AnimateProperty是用來為組件的屬性或樣式設置動畫的效果。我們可以通過其property屬性設定目標對象上需要設置動畫效果的屬性，然后設置fromValue屬性和toValue屬性，為效果提供屬性的起始值和結束值。例如下面的代碼使用mouseDownEffect觸發器，當單擊圖片時，觸發AnimateProperty效果，在1秒鐘內，Image對象的scaleX屬性由1變為2，被橫向拉伸。代碼如下：

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

如果希望通過樣式設置效果，可以將isStyle屬性設置為ture，然后通過setStyle()方法設置目標對象的樣式，從而達到設置效果的目的。

2）Blur模糊效果

Flex效果組件中Blur是一種模糊效果。該效果使用了flash.filters.BlurFilter濾鏡，如果對某個組件應用了Blur效果，就不能再對該組件應用BlurFilter濾鏡，也無法再次應用Blur效果。下面的代碼通過Image對象的mouseDownEffect觸發器觸發Blur效果，在1秒鐘內，Image對象將逐漸變得模糊。代碼如下：

<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效果中這些類定義了4個方向的擦除效果，通常與showEffect和hideEffect觸發器配合使用，使用起來非常簡便，如下面的例子。

代碼清單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效果可以以指定點為中心按比例縮放對象。與Resize效果不同的是，Resize改變目標對象的長寬屬性，而Zoom改變的目標對象的縮放比例。在下面的例子中，當鼠標移動到圖片上時開始播放Zoom效果，鼠標移出時還原。

代碼清單ZoomSample.mxml

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

以上是“如何使用Flex效果組件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！