Flex中动画实现（一）

接触了几天FLEX，对Flex中动画效果的制作有了自己的理解。
在Flex中动画分两种实现方法
1、使用行为
2、使用视图状态和变换

本篇日志记录的是 使用行为实现
flex中提供了许多动画行为：像move、resize、Glow、Blur、Fade、Dissolve等。
通过这样的实例比较容易了解：

Flash动画

关闭在线播放

制作方法：
创建一个行为，像这样：

程序代码

<mx:Fade id="effShow" duration="500" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Fade id="effHide" duration="500" alphaFrom="1.0" alphaTo="0.0"/>

 给它个id方便调用。
然后放个panel，设置hideEffect="{effHide}" showEffect="{effShow}"

程序代码

<mx:Panel id="mainPane" title="MainPane" height="130" width="151" hideEffect="{effHide}" showEffect="{effShow}">

这样，显示、隐藏panel时都会有创建过的fade效果出现了.
恩，还是挺简单的。

整个源码

程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
        <![CDATA[
            private function oc():void{
                mainPane.visible=!mainPane.visible;
            }
        ]]>
    </mx:Script>
    
    <mx:Fade id="effShow" duration="500" alphaFrom="0.0" alphaTo="1.0"/>
    <mx:Fade id="effHide" duration="500" alphaFrom="1.0" alphaTo="0.0"/>
    
    <mx:Panel id="mainPane" title="MainPane" height="130" width="151" hideEffect="{effHide}" showEffect="{effShow}">
        <mx:Label text="Fade效果"/>
    </mx:Panel>
    <mx:Button label="显示/关闭" click="oc();"/>
</mx:Application>

Flex 还提供将超过一种的多种效果组合起来的能力。可以使用<mx:Parallel>标签或
<mx:Sequence>标签来定义一个组合效果，Parallel是并行地播放，Sequence时顺序播放。
像这样

Flash动画

在线播放

源码：

程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
        <![CDATA[
            private function oc():void{
                mainPane.visible=!mainPane.visible;
            }
        ]]>
    </mx:Script>
    
    <mx:Parallel id="effShow">
        <mx:Fade duration="500" alphaFrom="0.0" alphaTo="1.0"/>
        <mx:WipeRight duration="500"/>
    </mx:Parallel>
    <mx:Parallel id="effHide">
        <mx:Fade duration="500" alphaFrom="1.0" alphaTo="0.0"/>
        <mx:WipeRight duration="500"/>
    </mx:Parallel>
    
    <mx:Panel id="mainPane" title="MainPane" height="130" width="151" hideEffect="{effHide}" showEffect="{effShow}">
        <mx:Label text="并行组合效果"/>
    </mx:Panel>
    <mx:Button label="显示/关闭" click="oc();"/>
</mx:Application>