常用的Flex效果組件有哪些

這篇文章主要介紹了常用的Flex效果組件有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

簡(jiǎn)單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)用效果，可以使用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）Dissolve溶解效果

Flex效果中Dissolve是一種溶解效果。當(dāng)效果開(kāi)始播放時(shí)，將創(chuàng)建一個(gè)不透明的矩形，這個(gè)矩形懸浮在目標(biāo)組件的上方，它的顏色由Dissolve.color屬性設(shè)置，此時(shí)透明度為“1.0-Dissolve.alphaFrom”。隨著效果的播放，該矩形的alpha屬性將從(1.0-alphaFrom)逐漸變?yōu)椤?.0–alphaTo”，直到效果播放完成，矩形被銷(xiāo)毀。

如果目標(biāo)對(duì)象是一個(gè)容器，那么Dissolve效果將應(yīng)用于容器內(nèi)部的內(nèi)容區(qū)域。

下面的代碼使用一個(gè)CheckBox對(duì)象設(shè)置Image的visible屬性，通過(guò)hideEffect和showEffect觸發(fā)器分別觸發(fā)各自的Dissolve效果：

<mx:Dissolveidmx:Dissolveid="dissolveOut"duration="1000"alphaFrom="1.0"  alphaTo="0.0"/>  <mx:Dissolveidmx:Dissolveid="dissolveIn"duration="1000"alphaFrom="0.0"  alphaTo="1.0"/>  <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/>  <mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}"   hideEffect="{dissolveOut}"showEffect="{dissolveIn}"/>

4）Fade淡入淡出效果

Flex效果中Fade是一種淡入淡出效果，它通過(guò)設(shè)置組件的alpha屬性來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。當(dāng)使用showEffect或hideEffect觸發(fā)器設(shè)置Fade效果時(shí)，如果省略了alphaFrom和alphaTo屬性的值，那么在showEffect觸發(fā)器上目標(biāo)對(duì)象的透明度將從0變化到目標(biāo)的當(dāng)前alpha值，而在hideEffect觸發(fā)器上則會(huì)從當(dāng)前的alpha值變化到0。如果要對(duì)字體使用Fade效果，必須使用嵌入字體。

下面的代碼使用一個(gè)CheckBox對(duì)象設(shè)置Image的visible屬性，通過(guò)hideEffect和showEffect觸發(fā)器分別觸發(fā)各自的Fade效果：

<mx:Fadeidmx:Fadeid="fadeOut"duration="1000"alphaFrom="1.0" alphaTo="0.0"/>  <mx:Fadeidmx:Fadeid="fadeIn"duration="1000"alphaFrom="0.0" alphaTo="1.0"/>  <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/>  <mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}"   hideEffect="{fadeOut}"showEffect="{fadeIn}"/>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“常用的Flex效果組件有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!