?
介绍
演示 Flex 3.0?中的各种动画效果(effect)的应用?
- Zoom - 放大/缩小
- Wipe - 从上/下/左/右 4 个方向 线性渐变地 对控件做 删除/显示
- Rotate - 旋转
- Resize - 调整控件大小
- Fade - 淡入/淡出
- Move - 改变控件位置
- Iris - 显示/消失（放射性渐变）
- Blur - 模糊
- Dissolve - 对控件做alpha修改
- Glow - 对控件做周边发光
- SoundEffect - 播放一段音频
- Parallel - 对各种 effect 做并行展示
- Sequence - 对各种 effect 做串行展示
- TweenEffect - 此类是大部分 effect 的基类
1、Zoom.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?放大/缩小?的动画效果
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?Zoom?(放大/缩小)"
>
????
<
mx:Script
>
????????
<![CDATA[
????????????
????????????private?function?doZoom(e:MouseEvent):void
????????????{
????????????????if?(zoom.isPlaying)
????????????????{
????????????????????zoom.reverse();
????????????????}
????????????????else
????????????????{
????????????????????zoom.play([e.target],?e.type?==?MouseEvent.ROLL_OUT???true?:?false);
????????????????}
????????????}????????
????????????
????????
]]>
????
</
mx:Script
>
????????
????
<
mx:Zoom?
id
="zoom"
?originX
="24"
?originY
="24"
?
????????zoomWidthFrom
="1"
?zoomWidthTo
="2"
?zoomHeightFrom
="1"
?zoomHeightTo
="2"
?
/>
????
????
<
mx:Image?
source
="@Embed('images/logo.png')"
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
?
????????scaleX
="1"
?scaleY
="1"
?
????????rollOver
="doZoom(event)"
?rollOut
="doZoom(event)"
?????
/>
????
</
mx:Panel
>
2、Wipe.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?从上/下/左/右?4?个方向?线性渐变地?对控件做?删除/显示?的动画效果
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?WipeUp,?WipeDown,?WipeLeft,?WipeRight?(擦除)"
>
????
????
<
mx:Script
>
????????
<![CDATA[
????????????
????????????private?function?effectEndHandler():void
????????????{
????????????????mx.controls.Alert.show("WipeLeft?效果结束");
????????????}????????
????????????
????????
]]>
????
</
mx:Script
>
????
????
<
mx:WipeLeft?
id
="wipeLeft"
?duration
="1000"
?effectEnd
="effectEndHandler()"
?
/>
????
<
mx:WipeUp?
id
="wipeUp"
?duration
="1000"
?
/>
????
????
<
mx:Image?
source
="@Embed('images/logo.png')"
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
??
????????visible
="{chk.selected}"
?hideEffect
="{wipeLeft}"
?showEffect
="{wipeUp}"
?????
/>
?????
?????
<
mx:ControlBar?
horizontalAlign
="center"
>
?????????
<
mx:CheckBox?
id
="chk"
?label
="显示"
?selected
="true"
?
?????????????textRollOverColor
="blue"
?????????????textSelectedColor
="red"
?????????
/>
?????
</
mx:ControlBar
>
?????
</
mx:Panel
>
3、Rotate.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?旋转?的动画效果
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?Rotate?(旋转)"
>
????
????
<
mx:Script
>
????????
<![CDATA[
????????
????????????[Bindable]
????????????private?var?angle:int?=?0;
????????????
????????????private?function?rotateImage():void
????????????{
????????????????rotate.end();
????????????????angle?+=45;
????????????????rotate.play();
????????????}
????????????
????????
]]>
????
</
mx:Script
>
????
????
<
mx:Rotate?
id
="rotate"
?angleFrom
="{angle-45}"
?angleTo
="{angle}"
?target
="{image}"
?duration
="100"
?
/>
????
????
<
mx:Image?
id
="image"
?source
="@Embed('images/logo.png')"
?
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
?????
/>
?????
?????
<
mx:ControlBar?
horizontalAlign
="center"
>
?????????
<
mx:Button?
label
="旋转?45?度"
?click
="rotateImage();"
?
/>
?????
</
mx:ControlBar
>
?????
</
mx:Panel
>
4、Resize.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?调整控件大小?的动画效果
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?Resize?(重设大小)"
>
????
????
<
mx:Script
>
????????
<![CDATA[
????????????
????????????private?function?smoothImage(e:Event):void
????????????{
????????????????var?bmp:Bitmap?=?e.target.content?as?Bitmap;
????????????????bmp.smoothing?=?true;
????????????}
????????????
????????
]]>
????
</
mx:Script
>
????
????
<
mx:Resize?
id
="resizeUp"
?target
="{image}"
?widthTo
="180"
?heightTo
="180"
?
/>
????
<
mx:Resize?
id
="resizeDown"
?target
="{image}"
?widthTo
="48"
?heightTo
="48"
?
/>
????
????
<
mx:Image?
id
="image"
?source
="@Embed('images/logo.png')"
?
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
????????creationComplete
="smoothImage(event)"
?????
/>
?????
?????
<
mx:ControlBar?
horizontalAlign
="center"
>
?????????
<
mx:Button?
label
="放大"
?click
="resizeUp.end();?resizeUp.play();"
?
/>
?????????
<
mx:Button?
label
="缩小"
?click
="resizeDown.end();?resizeDown.play();"
?
/>
?????
</
mx:ControlBar
>
??????????
</
mx:Panel
>
5、Fade.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?淡入/淡出?的动画效果
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?Fade?(淡入/淡出)"
>
????
????
<
mx:Fade?
id
="fadeOut"
?duration
="1000"
?alphaFrom
="1"
?alphaTo
="0"
?
/>
????
<
mx:Fade?
id
="fadeIn"
?duration
="1000"
?alphaFrom
="0"
?alphaTo
="1"
?
/>
????
????
<
mx:Image?
source
="@Embed('images/logo.png')"
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
??
????????visible
="{chk.selected}"
?hideEffect
="{fadeOut}"
?showEffect
="{fadeIn}"
?????
/>
?????
?????
<
mx:ControlBar?
horizontalAlign
="center"
>
?????????
<
mx:CheckBox?
id
="chk"
?label
="显示"
?selected
="true"
?
?????????????textRollOverColor
="blue"
?????????????textSelectedColor
="red"
?????????
/>
?????
</
mx:ControlBar
>
?????
</
mx:Panel
>
6、Move.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?改变控件位置?的动画效果（移动控件）
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?Move?(移动)"
>
????
????
<
mx:Script
>
????????
<![CDATA[
????????????
????????????private?function?moveImage(e:MouseEvent):void
????????????{
????????????????var?position:Point?=?new?Point(stage.mouseX,?stage.mouseY);
????????????????var?localPosition:Point?=?canvas.globalToLocal(position);
????????????
????????????????effectMove.end();????
????????????????effectMove.xTo?=?localPosition.x?-?(image.width?/?2)
????????????????effectMove.yTo?=?localPosition.y?-?(image.height?/?2)
????????????????effectMove.play();
????????????}
????????????
????????
]]>
????
</
mx:Script
>
????
????
<
mx:Move?
id
="effectMove"
?target
="{image}"
?
/>
????
????
<
mx:Canvas?
id
="canvas"
?width
="100%"
?height
="100%"
?mouseDown
="moveImage(event)"
>
????
????????
<
mx:Image?
id
="image"
?source
="@Embed('images/logo.png')"
????????????x
="24"
?y
="24"
?width
="48"
?height
="48"
?
?????????
/>
?????????
????
</
mx:Canvas
>
?????
</
mx:Panel
>
7、Iris.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?显示/消失（放射性渐变）?的动画效果
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?Iris?(遮罩?-?用于消失/显示对象)"
>
????
????
<
mx:Iris?
id
="irisOut"
?duration
="1000"
?showTarget
="true"
?
/>
????
<
mx:Iris?
id
="irisIn"
?duration
="1000"
?showTarget
="false"
?
/>
????
????
<
mx:Image?
source
="@Embed('images/logo.png')"
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
??
????????visible
="{chk.selected}"
?hideEffect
="{irisOut}"
?showEffect
="{irisIn}"
?????
/>
?????
?????
<
mx:ControlBar?
horizontalAlign
="center"
>
?????????
<
mx:CheckBox?
id
="chk"
?label
="显示"
?selected
="true"
?
?????????????textRollOverColor
="blue"
?????????????textSelectedColor
="red"
?????????
/>
?????
</
mx:ControlBar
>
?????
</
mx:Panel
>
8、Blur.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?模糊?的动画效果
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?Blur?(模糊)"
>
????
????
<
mx:Blur?
id
="blurImage"
?duration
="1000"
????????blurXFrom
="0"
?blurXTo
="10"
?blurYFrom
="0"
?blurYTo
="10"
????
/>
????
<
mx:Blur?
id
="unblurImage"
?duration
="1000"
????????blurXFrom
="10"
?blurXTo
="0"
?blurYFrom
="10"
?blurYTo
="0"
????
/>
????
????
<
mx:Image?
source
="@Embed('images/logo.png')"
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
????????rollOverEffect
="{blurImage}"
?rollOutEffect
="{unblurImage}"
?????
/>
</
mx:Panel
>
9、Dissolve.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?对控件做alpha修改?的动画效果
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?Dissolve?(溶解,?变换?alpha?的效果)"
>
????
????
<
mx:Dissolve?
id
="dissolveOut"
?duration
="1000"
?alphaFrom
="1"
?alphaTo
="0"
?
/>
????
<
mx:Dissolve?
id
="dissolveIn"
?duration
="1000"
?alphaFrom
="0"
?alphaTo
="1"
?
/>
????
????
<
mx:Image?
source
="@Embed('images/logo.png')"
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
??
????????visible
="{chk.selected}"
?hideEffect
="{dissolveOut}"
?showEffect
="{dissolveIn}"
?????
/>
?????
?????
<
mx:ControlBar?
horizontalAlign
="center"
>
?????????
<
mx:CheckBox?
id
="chk"
?label
="显示"
?selected
="true"
?
?????????????textRollOverColor
="blue"
?????????????textSelectedColor
="red"
?????????
/>
?????
</
mx:ControlBar
>
?????
</
mx:Panel
>
10、Glow.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?对控件做周边发光?的动画效果
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?Glow?(发光)"
>
????
????
<
mx:Glow?
id
="glowImage"
?duration
="1000"
????????alphaFrom
="1"
?alphaTo
="0.3"
????????blurXFrom
="0"
?blurXTo
="50"
?blurYFrom
="0"
?blurYTo
="50"
????????color
="0x22aa55"
????
/>
????
<
mx:Glow?
id
="unglowImage"
?duration
="1000"
????????alphaFrom
="0.3"
?alphaTo
="1"
????????blurXFrom
="50"
?blurXTo
="0"
?blurYFrom
="50"
?blurYTo
="0"
????????color
="0x3388dd"
????
/>
????
????
<
mx:Image?
source
="@Embed('images/logo.png')"
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
????????rollOverEffect
="{glowImage}"
?rollOutEffect
="{unglowImage}"
?????
/>
?????
</
mx:Panel
>
11、SoundEffect.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????播放一段音频
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?SoundEffect?(音效)"
>
????
????
<
mx:SoundEffect?
id
="soundEffect"
?source
="@Embed('assets/bomb.mp3')"
?
/>
????
????
<
mx:Image?
source
="@Embed('images/logo.png')"
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
??
??????????mouseDownEffect
="{soundEffect}"
?????
/>
????
</
mx:Panel
>
12、Parallel.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????对各种?effect?做并行展示
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="Effect?-?Parallel?(效果并行),?AddItemAction,?RemoveItemAction"
>
????
????
<
mx:Script
>
????????
<![CDATA[
????????
????????????import?mx.collections.ArrayCollection;
????????????
????????????[Bindable]
????????????private?var?dp:ArrayCollection?=?new?ArrayCollection(["webabcd",?"webabcd",?"webabcd"])
????????????
????????????private?function?addItem():void
????????????{
????????????????dp.addItemAt("webabcd",?dp.length);
????????????}
????????????
????????????private?function?removeItem():void
????????????{
????????????????dp.removeItemAt(dp.length?-?1);
????????????}
????????????
????????
]]>
????
</
mx:Script
>
????
????
<
mx:Parallel?
id
="parallel"
>
????????
<
mx:AddItemAction?
filter
="addItem"
?startDelay
="500"
?
/>
????????
<
mx:RemoveItemAction?
filter
="removeItem"
?startDelay
="500"
?
/>
????????
<
mx:Blur?
startDelay
="500"
?duration
="1000"
?blurXFrom
="0"
?blurXTo
="10"
?blurYFrom
="0"
?blurYTo
="10"
?filter
="addItem"
?
/>
????
</
mx:Parallel
>
????
????
<
mx:Label?
text
="顺便说明?AddItemAction,?RemoveItemAction"
??x
="10"
?y
="10"
/>
????
????
<
mx:List?
id
="list"
?dataProvider
="{dp}"
?fontSize
="16"
??y
="36"
?x
="10"
?height
="178"
?width
="360"
????????itemsChangeEffect
="{parallel}"
/>
?????
?????
<
mx:ControlBar?
horizontalAlign
="center"
>
?????????
<
mx:Button?
label
="增加一项"
?click
="addItem();"
?
/>
?????????
<
mx:Button?
label
="删除一项"
?click
="removeItem();"
?
/>
?????
</
mx:ControlBar
>
?????
</
mx:Panel
>
13、Sequence.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????对各种?effect?做串行展示
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="vertical"
?horizontalAlign
="center"
?width
="400"
?height
="300"
????title
="Effect?-?Sequence?(效果串行),?AnimateProperty,?Pause"
>
????
????
<
mx:Label?
text
="顺便说明?AnimateProperty,?Pause"
/>
????
????
<
mx:Sequence?
id
="sequence"
>
?????????
<
mx:AnimateProperty?
property
="scaleX"
?fromValue
="1"
?toValue
="3"
?duration
="300"
?
/>
?????????
<
mx:Pause?
duration
="2000"
/>
????????
<
mx:AnimateProperty?
property
="scaleX"
?fromValue
="3"
?toValue
="1"
?duration
="1000"
?
/>
??
????
</
mx:Sequence
>
????
????
<
mx:Image?
source
="@Embed('images/logo.png')"
????????width
="48"
?height
="48"
????????scaleX
="1"
?scaleY
="1"
????????mouseDownEffect
="{sequence}"
?????
/>
?????
</
mx:Panel
>
14、TweenEffect.mxml
<?
xml?version="1.0"?encoding="utf-8"
?>
<!--
????演示?TweenEffect?（此类是大部分?effect?的基类）?
-->
<
mx:Panel?
xmlns:mx
="http://www.adobe.com/2006/mxml"
?layout
="absolute"
?width
="400"
?height
="300"
????title
="TweenEffect?的介绍（它是部分?effect?的基类）"
>
????
????
<
mx:Script
>
????????
<![CDATA[
????????
????????????import?mx.events.TweenEvent;
????????????
????????????private?function?tweenStartHandler(e:TweenEvent):void
????????????{
????????????????txtMsg.text?+=?"补间效果开始r";
????????????}
????????????
????????????private?function?tweenEndHandler(e:TweenEvent):void
????????????{
????????????????txtMsg.text?+=?"补间效果结束r";
????????????????lblUpdate.text?=?"宽度:?"?+?image.width;
????????????}
????????????
????????????private?function?tweenUpdateHandler(e:TweenEvent):void
????????????{
????????????????lblUpdate.text?=?"宽度:?"?+?image.width;
????????????}
????????????
????????
]]>
????
</
mx:Script
>
????
????
<
mx:Resize?
id
="resizeUp"
?target
="{image}"
?widthTo
="180"
?heightTo
="180"
?duration
="5000"
????????tweenStart
="tweenStartHandler(event)"
????????tweenEnd
="tweenEndHandler(event)"
????????tweenUpdate
="tweenUpdateHandler(event)"
????
/>
????
<
mx:Resize?
id
="resizeDown"
?target
="{image}"
?widthTo
="48"
?heightTo
="48"
?
/>
????
????
<
mx:Image?
id
="image"
?source
="@Embed('images/logo.png')"
?
????????x
="24"
?y
="24"
?width
="48"
?height
="48"
?????
/>
????
<
mx:Text?
x
="264"
?y
="36"
?width
="106"
?height
="178"
?id
="txtMsg"
/>
????
<
mx:Label?
x
="264"
?y
="10"
?id
="lblUpdate"
/>
?????
????
<
mx:ControlBar?
horizontalAlign
="center"
>
????????
<
mx:Button?
label
="放大"
?click
="resizeUp.end();?resizeUp.play();"
?
/>
????????
<
mx:Button?
label
="缩小"
?click
="resizeDown.end();?resizeDown.play();"
?
/>
????
</
mx:ControlBar
>
</
mx:Panel
>
OK
[源码下载]
