flex4拾遗一： transition

</pre><div class="cnblogs_code" style="margin: 5px 0px; padding: 5px; border: 1px solid rgb(204, 204, 204); overflow: auto; font-family: 'Courier New' !important; background-color: rgb(245, 245, 245);"><div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"><span class="cnblogs_code_copy" style="margin: 0px; padding: 0px 5px 0px 0px; line-height: 1.5 !important;"><a target=_blank title="复制代码" style="margin: 0px; padding: 0px; color: rgb(100, 102, 179); text-decoration: underline; border: none !important;"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="margin: 0px; padding: 0px; max-width: 900px; border: none !important;" /></a></span></div><pre style="margin-top: 0px; margin-bottom: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: 'Courier New' !important;"> <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:transitions</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>        <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:Transition </span><span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;">fromState</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">="default"</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>             <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:Parallel</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>                 <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">mx:Resize </span><span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;">target</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">="{loginPanel}"</span><span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;"> duration</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">="100"</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">/></span>                 <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:Wipe </span><span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;">direction</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">="right"</span><span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;"> target</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">="{confirm}"</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">/></span>             <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:Parallel</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>         <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:Transition</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>        <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:Transition </span><span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;">fromState</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">="Register"</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>             <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:Sequence</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>                 <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">mx:Resize </span><span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;">target</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">="{loginPanel}"</span><span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0); line-height: 1.5 !important;"> duration</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">="100"</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">/></span>             <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:Sequence</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>         <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:Transition</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span>     <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"></</span><span style="margin: 0px; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">s:transitions</span><span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">></span> 

 

<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)"/>

本文转载源 

感谢

Jack Deng