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>