flex 4 transition

骑猪看日落 2021-11-10 06:56 123阅读 0赞

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

转载于:https://www.cnblogs.com/tiandi/p/3224130.html