剖析常見(jiàn)Flex效果組件用法
本文和大家重點(diǎn)討論一下Flex效果組件的使用，F(xiàn)lex中提供了豐富的效果組件。由于Flex效果是一種根據(jù)時(shí)間漸變的過(guò)程，因此所有效果都具有duration屬性，用來(lái)設(shè)置播放時(shí)間（以毫秒為單位）。
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）Glow發(fā)光效果
Flex效果中Glow是一種發(fā)光效果，該效果使用了flash.filters.GlowFilter濾鏡類(lèi)。如果對(duì)某個(gè)組件應(yīng)用了Glow效果，就不能對(duì)該組件應(yīng)用GlowFilter濾鏡，也無(wú)法再次應(yīng)用Glow效果。下面的代碼通過(guò)Image對(duì)象的mouseDownEffect觸發(fā)器觸發(fā)Glow效果：
- <mx:Glowidmx:Glowid="glowImage"duration="1000"alphaFrom="1.0"
- alphaTo="0.3"blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0"
- color="0x00FF00"/>
- <mx:Imagesourcemx:Imagesource="assets/plane.png"mouseDownEffect="{glowImage}"/>
2）Iris虹效果
IFlex效果中ris效果通過(guò)擴(kuò)展或收縮集中在目標(biāo)上的矩形遮罩為效果目標(biāo)設(shè)置動(dòng)畫(huà)。該效果可以從目標(biāo)的中心放大遮罩來(lái)顯示目標(biāo)，也可以向中心收縮遮罩來(lái)隱藏目標(biāo)。下面的代碼使用一個(gè)CheckBox對(duì)象設(shè)置Image的visible屬性，通過(guò)hideEffect和showEffect觸發(fā)器分別觸發(fā)各自的Iris效果：
- <mx:Irisidmx:Irisid="irisOut"duration="1000"showTarget="true"/>
- <mx:Irisidmx:Irisid="irisIn"duration="1000"showTarget="false"/>
- <mx:Imageidmx:Imageid="Flex"source="assets/plane.png"
- visible="{cbx.selected}"showEffect="{irisIn}"hideEffect="{irisOut}"/>
- <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/>
3）Move移動(dòng)效果
Flex效果中Move效果用來(lái)實(shí)現(xiàn)移動(dòng)動(dòng)畫(huà)。在給定時(shí)間內(nèi)，組件的位置會(huì)隨時(shí)間變化而變化。使用該效果通常需要用到以下幾個(gè)屬性。
lxFrom和yFrom屬性用來(lái)指定初始位置。
lxTo和yTo屬性用來(lái)指定目標(biāo)位置。
lxBy和yBy用來(lái)指定移動(dòng)量，即組件在x軸向和y軸向上的移動(dòng)速度。
通常只需要指定初始位置、目標(biāo)位置或移動(dòng)量這些值中的任意2個(gè)，F(xiàn)lex就會(huì)計(jì)算第3個(gè)值。如果指定所有這3個(gè)值，F(xiàn)lex就會(huì)忽略xBy和yBy值。如果僅指定xTo和yTo值或xBy和yBy值，那么Flex會(huì)將xFrom和yFrom設(shè)置為對(duì)象的當(dāng)前位置。
下面的程序演示了如何使用Move效果。
代碼清單MoveSample.mxml
- <?xmlversionxmlversion="1.0"?>
- <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
- paddingLeft="0"layout="absolute"mouseDown="moveImage();">
- <mx:Script>
- <![CDATA[
- //當(dāng)按下鼠標(biāo)時(shí)調(diào)用該事件
- privatefunctionmoveImage():void{
- //停止播放Move效果
- moveEffect.end();
- //設(shè)置目標(biāo)位置
- moveEffect.xTo=mouseX;
- moveEffect.yTo=mouseY;
- //播放Move效果
- moveEffect.play();
- }
- ]]>
- </mx:Script>
- <mx:Moveidmx:Moveid="moveEffect"target="{img}"/>
- <mx:Imageidmx:Imageid="img"source="assets/plane.png"/>
- </mx:Application>
代碼中將Application的layout屬性設(shè)置為absolute，當(dāng)用戶(hù)在應(yīng)用程序中任何位置上單擊鼠標(biāo)時(shí)，調(diào)用moveImage方法，該方法中首先停止Move效果，然后根據(jù)鼠標(biāo)單擊的位置設(shè)置目標(biāo)位置，***播放效果。
通常Move效果應(yīng)用于使用絕對(duì)定位的容器（如Canvas）或使用“layout=absolute”的容器（如Application或Panel）中。如果需要將其應(yīng)用到自動(dòng)布局的容器（如VBox或Grid容器）中，雖然會(huì)移動(dòng)目標(biāo)對(duì)象，但下次容器更新其布局時(shí)，會(huì)將目標(biāo)對(duì)象移回其原始位置。在這種情況下，可以將容器的autoLayout屬性設(shè)置為false來(lái)禁止往回移動(dòng)，但這會(huì)禁用容器中所有控件的布局。
4）Pause暫停效果
Flex效果中Pause效果可以實(shí)現(xiàn)在指定時(shí)間段內(nèi)不執(zhí)行任何操作的功能。如果將Pause效果添加為Sequence效果的子項(xiàng)，可以創(chuàng)建2個(gè)其他效果之間的暫停。
【編輯推薦】
