如何设置弹出的开启和关闭效果动画？

Question

有没有办法使用PopUpManager设置弹出效果（默认效果）？

例如，假设我已经创建了一个MXML组件，并且我希望该组件放大（一半大小）并在x，y或z轴上旋转360度。我在调用PopUpManager.addPopUp（）或createPopUp（）时如何分配这个效果？

Answer 1

您必须在弹出和关闭时将效果应用到窗口。

private var win:TitleWindow; 

private function addWindow():void{ 
    win = new TitleWindow(); 
    win.addEventListener(CloseEvent.CLOSE, onClose); 
    PopUpManager.addPopUp(win, this); 
    PopUpManager.centerPopUp(win); 
    var scale:Scale = new Scale(win); 
    ... set scale properties for cool zoom in 
    scale.addEventListener(EffectEvent.EFFECT_END, onZoomInComplete); 
    scale.play(); 
} 

private function onClose(event:CloseEvent):void{ 
    var scale:Scale = new Scale(win); 
    ... set scale properties for cool zoom out 
    scale.addEventListener(EffectEvent.EFFECT_END, onZoomOutComplete); 
    scale.play(); 
} 

private function onZoomInComplete(event:EffectEvent):void{ 
    //Depending on what effects you apply, you may need to re-center the popup 
    //after the zoom in effect is over.. may not need this though 
    PopUpManager.centerPopUp(win); 
} 

private function onZoomOutComplete(event:EffectEvent):void{ 
    PopUpManager.removePopUp(win); 
} 

Answer 2

您还可以创建一个弹出带有动画，然后扩展它：

AnimatedPanelWindow.mxml：

<?xml version="1.0" encoding="utf-8"?> 
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 

       creationCompleteEffect="{addedEffect}" 
       removedEffect="{removedEffect}" 

       > 


    <fx:Declarations> 

     <s:Parallel id="removedEffect" target="{this}" suspendBackgroundProcessing="false"> 
      <s:Scale3D scaleYTo="0" duration="500" startDelay="0" disableLayout="false" 
         autoCenterProjection="true" autoCenterTransform="true" applyChangesPostLayout="true"/> 
      <s:Fade alphaFrom="1" alphaTo="0" duration="250" startDelay="50"/> 
     </s:Parallel> 

     <s:Parallel id="addedEffect" target="{this}" suspendBackgroundProcessing="false"> 
      <s:Scale3D scaleYFrom="0" scaleYTo="1" duration="250" disableLayout="false" 
         autoCenterProjection="true" autoCenterTransform="true" applyChangesPostLayout="true"/> 
      <s:Fade alphaFrom="0" alphaTo="1" duration="200"/> 
     </s:Parallel> 

     <s:Move id="moveEffect" target="{this}" effectUpdate="trace('moving')"/> 

    </fx:Declarations> 


</s:Panel> 

，然后扩展它：

<?xml version="1.0" encoding="utf-8"?> 
<c:AnimatedPanelWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       xmlns:c="views.*" 


</c:AnimatedPanelWindow>