- 在Flex中当组件的visible值改变时引发一个动画效果(Effect)
下面的实例演示了怎样使用 hideEffect 和 showEffect 属性，使得当组件的visible属性改变时引发一个动画效果。
先看演示：鼠标点击hide和show按钮来隐藏和显示Panel
点这里 显示/隐藏 媒体或者再加一个弹性效果
完整代码在下边：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Zoom id="zoom" />
<mx:ApplicationControlBar dock="true">
<mx:Button label="hide"
click="panel.visible = false;"
enabled="{panel.visible}" />
<mx:Button label="show"
click="panel.visible = true;"
enabled="{!panel.visible}" />
</mx:ApplicationControlBar>
<mx:Panel id="panel"
title="title"
status="status"
showEffect="{zoom}"
hideEffect="{zoom}"
width="100%"
height="100%">
<mx:ControlBar>
<mx:Label text="control bar" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Zoom id="zoom" />
<mx:ApplicationControlBar dock="true">
<mx:Button label="hide"
click="panel.visible = false;"
enabled="{panel.visible}" />
<mx:Button label="show"
click="panel.visible = true;"
enabled="{!panel.visible}" />
</mx:ApplicationControlBar>
<mx:Panel id="panel"
title="title"
status="status"
showEffect="{zoom}"
hideEffect="{zoom}"
width="100%"
height="100%">
<mx:ControlBar>
<mx:Label text="control bar" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
查看MXML
如果你想加个easing 效果(Back, Bounce, Elastic, etc)，只要指定Zoom的easingFunction就可以了，像上边第2个演示那样，只要加上下边的代码就可以了
<mx:Script>
<![CDATA[
import mx.effects.easing.Bounce;
]]>
</mx:Script>
<mx:Zoom id="zoom" easingFunction="Bounce.easeOut" />
<![CDATA[
import mx.effects.easing.Bounce;
]]>
</mx:Script>
<mx:Zoom id="zoom" easingFunction="Bounce.easeOut" />
查看MXML
Thanks FlexExamples .com
此文已经被收录在 《Flex 3 常见组件使用技巧系列 》中，点此进入该主题。
上一篇：在Flex中使用FileReference类下载文件 下一篇：Flex 中在表单(Form组件)上填加动画效果(Effect)
admin#flashas.net （#为@） 联系QQ：
：40777822