<s:transitions>
<s:Transition fromState="default">
<s:Parallel>
<mx:Resize target="{loginPanel}" duration="100"/>
<s:Wipe direction="right" target="{confirm}"/>
</s:Parallel>
</s:Transition>
<s:Transition fromState="Register">
<s:Sequence>
<mx:Resize target="{loginPanel}" duration="100"/>
</s:Sequence>
</s:Transition>
</s:transitions>
<s:transitions>
<s:Transition id="trans" fromState="*" toState="*">
<s:Sequence>
<s:Resize duration="800" target="{viewBox}"/>
<s:Rotate angleBy="180" autoCenterTransform="true" duration="300" target="{bt}"/>
</s:Sequence>
</s:Transition>
</s:transitions>
transitions: 一个 Transition 对象 Array，其中的每个 Transition 对象都定义一组效果，用于在视图状态发生更改时播放。
普通效果：定义后，在指定的时候播放。
指定的时间：
1.在执行play（），end（）的时候播放。
2.在指定发生事件里播放，比如： hideEffect="{dissolveOut}" showEffect="{dissolveIn}"
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub }
]]>
</fx:Script> <fx:Declarations>
<!--动画效果-->
<mx:AnimateProperty id="animateProperty" property="scaleX" fromValue="1" toValue="2" duration="1000"/>
<mx:AnimateProperty id="animateProperty1" property="scaleX" fromValue="2" toValue="1" duration="1000"/>
<!--模糊效果-->
<mx:Blur id="blurImage" duration="1000" blurXFrom="0.0" blurXTo="10.0" blurYFrom="0.0" blurYTo="10.0"/>
<mx:Blur id="blurImage1" duration="1000" blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0"/>
<!--发光效果-->
<mx:Glow id="glowImage" duration="1000" alphaFrom="1.0" alphaTo="0.3" blurXFrom="0.0" blurXTo="50.0" blurYFrom="0.0" blurYTo="50.0" color="0xFF0000"/>
<mx:Glow id="glowImage1" duration="1000" alphaFrom="0.3" alphaTo="1" blurXFrom="50.0" blurXTo="0.0" blurYFrom="50.0" blurYTo="0.0" color="0xFF0000"/> <!--dissolve效果,,,用于显示和隐藏-->
<mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1.0" alphaTo="0.0" color="0xff0000"/>
<mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0.0" alphaTo="1.0" color="0xff0000"/>
<!--fade淡入淡出效果-->
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<!--虹效果,-->
<mx:Iris id="irisOut" duration="1000" showTarget="true"/>
<mx:Iris id="irisIn" duration="1000" showTarget="false"/>
<!--Rotate旋转效果-->
<mx:Rotate id="rotate" angleFrom="-45" angleTo="0" target="{img2}" duration="2000"/> <mx:Resize id="expand" target="{img3}" widthTo="265" heightTo="265"/>
<mx:Resize id="contract" target="{img3}" widthTo="25" heightTo="40"/>
</fx:Declarations> <mx:HBox>
<mx:VBox>
<mx:Image id="img1" source="asdf.jpg" rollOverEffect="{animateProperty}" rollOutEffect="{animateProperty1}" />
<mx:Image id="img" source="asdf.jpg" rollOverEffect="{blurImage}" rollOutEffect="{blurImage1}" />
<mx:Image source="asdf.jpg" rollOverEffect="{glowImage}" rollOutEffect="{glowImage1}"/>
</mx:VBox>
<mx:VBox>
<mx:VBox>
<mx:CheckBox id="cbx2" label="visible" selected="true"/>
<mx:Image source="asdf.jpg" visible="{cbx2.selected}" hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
</mx:VBox> <mx:VBox>
<mx:CheckBox id="cbx" label="visible" selected="true"/>
<mx:Image source="asdf.jpg" visible="{cbx.selected}" hideEffect="{fadeOut}" showEffect="{fadeIn}"/>
</mx:VBox>
<mx:VBox>
<mx:CheckBox id="cbx1" label="visible" selected="true"/>
<mx:Image id="Flex" source="asdf.jpg" visible="{cbx1.selected}" showEffect="{irisIn}" hideEffect="{irisOut}"/>
</mx:VBox>
</mx:VBox>
<mx:VBox>
<mx:Image id="img2" source="asdf.jpg" addedEffect="rotate"/>
</mx:VBox>
<mx:VBox> <mx:ControlBar>
<mx:Button label="Expand" click="expand.end();expand.play();"/>
<mx:Button label="Contract" click="contract.end();contract.play();"/>
</mx:ControlBar>
<mx:Image id="img3" width="25" height="40" source="asdf.jpg"/>
</mx:VBox> </mx:HBox> </s:Application>
<s:states>
<s:State name="collapsed"/>
<s:State name="expanded"/>
</s:states>
<s:transitions>
<s:Transition id="trans" fromState="*" toState="*">
<s:Sequence>
<s:Resize duration="800" target="{viewBox}"/>
</s:Sequence>
</s:Transition>
</s:transitions>
<s:Group id="viewBox" right="0" bottom="0" width="186" height="186"
right.collapsed="0" bottom.collapsed="0" width.collapsed="0" height.collapsed="0">
<s:BorderContainer id="zzz" left="5" right="5" top="5" bottom="5" width="180" height="180"
borderStyle="solid" cornerRadius="3"/>
<mx:Box visible="{ovmap_show}" width="186" height="186" backgroundColor="#0D84CD"
borderStyle="solid" cornerRadius="3" horizontalAlign="center"
includeInLayout="{ovmap_show}" verticalAlign="middle"
right.collapsed="0" bottom.collapsed="0" width.collapsed="0" height.collapsed="0">
<s:Group width="180" height="180" cacheAsBitmap="true"
creationComplete="viewBox_creationCompleteHandler(event)" mask="{zzz}"
right.collapsed="30" bottom.collapsed="30" width.collapsed="0"
height.collapsed="0">
<s:Rect id="vborder" left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor alpha="1" color="0xFFFFFF"/>
</s:fill>
</s:Rect>
<esri:Map id="ovMap" width="180" height="180" clickRecenterEnabled="false"
doubleClickZoomEnabled="false" keyboardNavigationEnabled="false"
load="ovMapLoaded(event)" logoVisible="false" panArrowsVisible="false"
panEnabled="false" rubberbandZoomEnabled="false" scaleBarVisible="false"
scrollWheelZoomEnabled="false" zoomSliderVisible="false"/>
<s:filters>
<mx:DropShadowFilter alpha="0.3" angle="45" distance="5" inner="true"/>
</s:filters>
</s:Group>
</mx:Box>
</s:Group>
<mx:SWFLoader id="bt" right="2" bottom="2" width="20" height="20" click="toggleView(event)"
complete="overviewbtn_complete(event)"
source="widgets/OverviewMap/assets/overviewbtn.swf"
toolTip.collapsed="{openToolTip}"
toolTip.expanded="{closeToolTip}" toolTipShow="bt_toolTipShowHandler(event)"/>