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>