apache-flex - 如何设置弹窗的开合效果动画？

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

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

动画面板窗口.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>