状态过度效果

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>
        <![CDATA[
            private function onClickBtn():void{}
        ]]>
    </mx:Script>

    <mx:Canvas x="10" y="10" width="487" height="373" id="canvas">
   
        <mx:Panel x="10" y="10" width="248" height="233"
            layout="absolute"  click="currentState=''"
            id="p1" color="#F3F8F9" themeColor="#D9EAF4" cornerRadius="18" borderStyle="solid" borderThickness="1" backgroundColor="#1F1818" backgroundAlpha="0.32" alpha="0.7" fontSize="12" fontWeight="bold" fontFamily="Arial">
            <mx:Button x="72" y="151" label="Button" width="82" height="30" id="btn1" enabled="true" borderColor="#1A1C1D" themeColor="#D9EAF4" cornerRadius="10" alpha="0.51" fillAlphas="[0.59, 0.61, 0.83, 0.76]" fillColors="[#161010, #C2C0C0, #697E93, #D6E1EC]" click="onClickBtn()"/>
            <mx:Image x="10" y="0" width="206" height="125" id="img1" scaleContent="false" autoLoad="true" alpha="0.89">
                <mx:source>../img/1.jpg</mx:source>
            </mx:Image>
        </mx:Panel>
        <mx:Panel x="286" y="10" width="108" height="115"
            layout="absolute" click="currentState='onestate'"
            id="p2" color="#F3F8F9" themeColor="#D9EAF4" cornerRadius="18" borderStyle="solid" borderThickness="1" backgroundColor="#1F1818" backgroundAlpha="0.32" alpha="0.7" fontSize="12" fontWeight="bold" fontFamily="Arial">
            <mx:Button x="21.5" y="54" label="Button" width="43" height="19" id="btn2" enabled="true" borderColor="#1A1C1D" themeColor="#D9EAF4" cornerRadius="10" alpha="0.51" fillAlphas="[0.59, 0.61, 0.83, 0.76]" fillColors="[#161010, #C2C0C0, #697E93, #D6E1EC]" click="onClickBtn()" fontSize="8"/>
            <mx:Image x="0" y="-20" width="86" height="66" id="img2" scaleContent="false" autoLoad="true" alpha="1.0">
                <mx:source>../img/SDC10083.JPG</mx:source>
            </mx:Image>
        </mx:Panel>
        <mx:Panel x="286" y="133" width="108" height="115"
            layout="absolute" click="currentState='twostate'"
            id="p3" color="#F3F8F9" themeColor="#D9EAF4" cornerRadius="18" borderStyle="solid" borderThickness="1" backgroundColor="#1F1818" backgroundAlpha="0.32" alpha="0.7" fontSize="12" fontWeight="bold" fontFamily="Arial">
            <mx:Button x="21.5" y="54" label="Button" width="43" height="19" id="btn3" enabled="true" borderColor="#1A1C1D" themeColor="#D9EAF4" cornerRadius="10" alpha="0.51" fillAlphas="[0.59, 0.61, 0.83, 0.76]" fillColors="[#161010, #C2C0C0, #697E93, #D6E1EC]" click="onClickBtn()" fontSize="8"/>
            <mx:Image x="0" y="-20" width="86" height="66" id="img3" scaleContent="false" autoLoad="true" alpha="1.0">
                <mx:source>../img/SDC10085.JPG</mx:source>
            </mx:Image>
        </mx:Panel>
    </mx:Canvas>
   
    <mx:states>
        <mx:State name="onestate" id="s1">
            <mx:SetProperty target="{p1}" name="x" value="286"/>
            <mx:SetProperty target="{p1}" name="y" value="133"/>
            <mx:SetProperty target="{p1}" name="width" value="108"/>
            <mx:SetProperty target="{p1}" name="height" value="115"/>
            <mx:SetProperty target="{btn1}" name="x" value="21.5" />
            <mx:SetProperty target="{btn1}" name="y" value="54" />
            <mx:SetProperty target="{btn1}" name="width" value="43" />
            <mx:SetProperty target="{btn1}" name="height" value="19" />
            <mx:SetProperty target="{img1}" name="x" value="0" />
            <mx:SetProperty target="{img1}" name="y" value="-20" />
            <mx:SetProperty target="{img1}" name="width" value="86" />
            <mx:SetProperty target="{img1}" name="height" value="66" />
           
           
            <mx:SetProperty target="{p2}" name="x" value="10"/>
            <mx:SetProperty target="{p2}" name="y" value="10"/>
            <mx:SetProperty target="{p2}" name="width" value="248"/>
            <mx:SetProperty target="{p2}" name="height" value="233"/>
            <mx:SetProperty target="{btn2}" name="x" value="72"/>
            <mx:SetProperty target="{btn2}" name="y" value="151"/>
            <mx:SetProperty target="{btn2}" name="width" value="82"/>
            <mx:SetProperty target="{btn2}" name="height" value="30"/>
            <mx:SetProperty target="{img2}" name="x" value="10"/>
            <mx:SetProperty target="{img2}" name="y" value="0"/>
            <mx:SetProperty target="{img2}" name="width" value="206"/>
            <mx:SetProperty target="{img2}" name="height" value="125"/>
           
            <mx:SetProperty target="{p3}" name="x" value="286"/>
            <mx:SetProperty target="{p3}" name="y" value="10"/>
            <mx:SetProperty target="{p3}" name="width" value="108"/>
            <mx:SetProperty target="{p3}" name="height" value="115"/>
        </mx:State>
        <mx:State name="twostate" id="s2">
            <mx:SetProperty target="{p1}" name="x" value="286"/>
            <mx:SetProperty target="{p1}" name="y" value="10"/>
            <mx:SetProperty target="{p1}" name="width" value="108"/>
            <mx:SetProperty target="{p1}" name="height" value="115"/>
            <mx:SetProperty target="{btn1}" name="x" value="21.5" />
            <mx:SetProperty target="{btn1}" name="y" value="54" />
            <mx:SetProperty target="{btn1}" name="width" value="43" />
            <mx:SetProperty target="{btn1}" name="height" value="19" />
            <mx:SetProperty target="{img1}" name="x" value="0" />
            <mx:SetProperty target="{img1}" name="y" value="-20" />
            <mx:SetProperty target="{img1}" name="width" value="86" />
            <mx:SetProperty target="{img1}" name="height" value="66" />
           
            <mx:SetProperty target="{p2}" name="x" value="286"/>
            <mx:SetProperty target="{p2}" name="y" value="133"/>
            <mx:SetProperty target="{p2}" name="width" value="108"/>
            <mx:SetProperty target="{p2}" name="height" value="115"/>
           
            <mx:SetProperty target="{p3}" name="x" value="10"/>
            <mx:SetProperty target="{p3}" name="y" value="10"/>
            <mx:SetProperty target="{p3}" name="width" value="248"/>
            <mx:SetProperty target="{p3}" name="height" value="233"/>
            <mx:SetProperty target="{btn3}" name="x" value="72"/>
            <mx:SetProperty target="{btn3}" name="y" value="151"/>
            <mx:SetProperty target="{btn3}" name="width" value="82"/>
            <mx:SetProperty target="{btn3}" name="height" value="30"/>
            <mx:SetProperty target="{img3}" name="x" value="10"/>
            <mx:SetProperty target="{img3}" name="y" value="0"/>
            <mx:SetProperty target="{img3}" name="width" value="206"/>
            <mx:SetProperty target="{img3}" name="height" value="125"/>
        </mx:State>
    </mx:states>
    <mx:transitions>
    <mx:Transition id="tr1" fromState="*" toState="*">
        <mx:Parallel targets="{[p1,p2,p3]}" id="para1">
            <mx:Move duration="500"/>
            <mx:Resize duration="500"/>
            <mx:Blur duration="500"/>
        </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
</mx:Application>