Flex3学习轨迹：创建简单的过渡

mx:Transition

利用视图状态可以改变应用程序的内容和外观。当改变视图外观时，FLex会在同一时间内对应用程序执行所有的可视化修改。然而在默认情况下这个跳转过程比较突然，效果生硬。为让这一过程变得平滑和多样，Flex提供了一种称之为“过渡”的技术特性。

mx:Transition标签提供三个属性fromState toState effect 属性用于设置过渡过程中要播放的Effect对象。

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12">    <!-- 定义过渡 -->    <mx:transitions>        <mx:Transition fromState="" toState="details">            <mx:Parallel>                <mx:Move target="{image1}" duration="500"                     xFrom="53" xTo="110" />                <mx:WipeRight target="{v2}" duration="500"/>            </mx:Parallel>         </mx:Transition>        <mx:Transition fromState="details" toState="">        <mx:Fade target="{image1}" duration="1000"                 alphaFrom="0.0" alphaTo="1.0" />                    </mx:Transition>    </mx:transitions>    <!-- 定义富态 -->    <mx:states>        <mx:State name="details">            <mx:AddChild relativeTo="{h1}" position="firstChild">                <mx:VBox id="v2">                    <mx:Label text="品牌：戴尔" />                    <mx:Label text="尺寸：22寸" />                    <mx:Label text="价格：2500RMB" />                </mx:VBox>            </mx:AddChild>            <mx:SetProperty target="{label1}" name="label" value="基本参数" />            <mx:SetStyle target="{label1}" name="color" value="blue" />        </mx:State>    </mx:states>    <!-- 定义基态 -->    <mx:Panel title="创建过渡" width="250" height="190"         verticalAlign="middle" horizontalAlign="center">        <mx:VBox id="v1" verticalCenter="true" horizontalAlign="center">            <mx:HBox id="h1" width="100%">                <mx:Image id="image1" source="assets/dellDisplay.jpg" />            </mx:HBox>            <mx:LinkButton id="label1" label="我的显示器" fontWeight="bold"                 click="currentState = currentState=='details' ? '':'details';" />        </mx:VBox>    </mx:Panel></mx:Application>