Flex 3快速入门（11）: 构建简单的用户界面 定义状态过渡

定义状态过渡

通常在响应用户操作时, 视图状态使您可以改变应用程序的内容和外观。 改变视图状态时, Adobe® Flex® 会同时执行对应用程序的所有可视更改。 由于对视图状态的所有更改会同时发生, 用户会看到应用程序从一种状态跳到另一种状态。

而您可能希望定义一个从一种状态到下一种状态的平滑的可视更改, 在其中更改是在一段时间上发生的。 过渡定义如何使对视图状态的更改看起来像是在屏幕上发生的一样。 过渡是当视图状态更改发生时播放的组合到一起的一种或多种效果。

过渡不会替换效果；即, 您仍可以将单一效果应用到一个组件, 并通过使用一个效果触发器或者 playEffect()方法来调用该效果。

您使用 <mx:Transition> 标签来创建过渡并自定义它, 方法是通过使用其 fromState、 toState 和 effect 属性。 fromState 属性指定当应用该过渡时您要更改的视图状态, toState 属性指定您要更改为的视图状态, 而 effect 属性是对要播放的 Effect 对象的引用。

在过渡中, 可以通过使用 <mx:Parallel> 和 <mx:Sequence> 标签引发并行或按顺序播放的效果。

在下面的示例中, 您定义了一个任何时候状态发生更改都会使用的过渡。 此过渡是由一种并行效果组成的。 并行效果也是一种复合效果, 因为它包含其他效果。 在此示例中, 并行效果包含一个调整大小效果和一个顺序效果。 并行效果的子效果全部在同时运行。

执行调整大小效果会花费 500 毫秒, 且该效果使用一种简易的功能使得在调整大小时该面板会弹出。 顺序效果也是一种复合效果。 与并行效果不同, 顺序效果的子事件按它们被添加的顺序, 一次运行一个。 下面的示例中的顺序效果包含两个模糊效果。 模糊效果会模糊其目标组件并可以用于创建速度感或表示焦点的增益或损失。

示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml " verticalAlign="middle"
    width="340" height="250"
     viewSourceURL="src/DefiningStateTransitions/index.html"
>
    <mx:Script>
        <![CDATA[
            // You need to import easing classes even if
            // you're going to use them only in MXML.
            import mx.effects.easing.Bounce;
        ]]>

    </mx:Script>

    <!--
        Use the transitions property (array) of
        the Application class to store your transitions.
    -->
    <mx:transitions>
        <!--
            The "*" indicates that the transition should be applied
            to any changes in the view state. You can set either
            property to "" to refer to the base view state.
        -->
       <mx:Transition fromState="*" toState="*">
            <!-- Parallel effects execute in unison -->
            <mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}">
                <mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
                <!--
                    Sequence effects execute in turn. The effects
                    in this sequence will only affect the confirm FormItem.
                -->
                <mx:Sequence target="{confirm}">

                    <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0" />           
                    <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1" />           
                </mx:Sequence>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
       
    <!-- The states property of the Application class
         defines the view states. -->
    <mx:states>
    <!--
            The "Register" state is based on the base state.
            All states are based on the base state by default
            so you can leave out the basedOn property.
        -->
        <mx:State name="Register" basedOn="">

            <!-- Add a FormItem component to the form. -->

            <mx:AddChild
                relativeTo="{loginForm}"
                position="lastChild"
                creationPolicy="all"
            >
                <mx:FormItem id="confirm" label="Confirm:">

                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>
           
            <!-- Set properties on the Panel container and Button control. -->
            <mx:SetProperty target="{loginPanel}"
            name="title" value="Register"/>

           
            <mx:SetProperty target="{loginButton}"
            name="label" value="Register"/>
           
            <!-- Remove the existing LinkButton control. -->

            <mx:RemoveChild target="{registerLink}"/>
           
            <!--
                Add a new LinkButton control to change
                view state back to the login form.
            -->
            <mx:AddChild relativeTo="{spacer1}" position="before">

                <mx:LinkButton label="Return to Login" click="currentState=''"/>
            </mx:AddChild>

        </mx:State>

    </mx:states>

    <mx:Panel
        title="Login" id="loginPanel"
        horizontalScrollPolicy="off" verticalScrollPolicy="off"
    >

    <mx:Form id="loginForm">
        <mx:FormItem label="Username:">
            <mx:TextInput/>

        </mx:FormItem>
        <mx:FormItem label="Password:">
            <mx:TextInput/>
        </mx:FormItem>
    </mx:Form>

   
    <mx:ControlBar>
        <!--
            Use the LinkButton control to change to
            the Register view state.
        -->
        <mx:LinkButton
            label="Need to Register?" id="registerLink"
            click="currentState='Register'"
        />

        <mx:Spacer width="100%" id="spacer1"/>
        <mx:Button label="Login" id="loginButton"/>

    </mx:ControlBar>

    </mx:Panel>
</mx:Application>

结果

若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。