flex简单效果
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}"/>
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属性用来指定初始位置。
2 xTo和yTo属性用来指定目标位置。
3 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。
2 bufferTime 属性用来设置声音对象的缓冲时间。默认值为 1000，单位为毫秒。
3 isLoading如果已加载MP3，则该属性为true。
4 loops 属性用来设置循环次数，默认值为0。
5 panEasingFunction 属性用来设置声音均衡效果的缓动函数。
6 panFrom属性和panTo属性用来设置声音对象的起始和最终平移，取值范围在-1.0～1.0之间，其中-1.0表示仅使用左声道，1.0 表示仅使用右声道，而0.0表示在2个声道间平均地均衡声音。
7 sound 属性表示已加载MP3文件的声音对象。
8 source 属性表示要播放的MP3文件的URL或类。
来源：(http://blog.sina.com.cn/s/blog_5f61cdd70100f9z6.html) - FLEX效果_随之飘扬_新浪博客
1 startTime 属性用来设置开始播放时间（以毫秒为单位），默认值为0。
2 useDuration 属性表示是否根据duration属性指定的时间停止播放，如果为false，则会在MP3完成播放或循环后停止效果，默认值为 true。
3 volumeEasingFunction 属性用来设置音量效果的缓动函数。
4 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>
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>
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秒，再左移 回到原来位置
浙公网安备 33010602011771号