FlexViewer3.0中Widget打开和关闭特效实现

实现效果：

Widget打开时,整个Widget一边旋转一边从小变大
Widget关闭时,整个Widget一边旋转一边从大变小

一、打开动画:
(1)WidgetManager.mxml中增加定义
       <fx:Declarations>
                <s:Parallel id="animationShow">
                        <s:Rotate3D angleZFrom="0" angleZTo="720" duration="1000" />
                        <s:Scale3D duration="1000" scaleXFrom="0" scaleXTo="1.0" scaleYFrom="0" scaleYTo="1.0" scaleZFrom="0" scaleZTo="1.0"/>
                </s:Parallel>               
        </fx:Declarations>
(2)WidgetManager.mxml中的openWidget函数
在wgtContainer.addWidget(widget);的后面增加
animationShow.play([widget]);
(3)WidgetManager.mxml中的onRunWidget函数
在wgtContainer.addWidget(widget);的后面增加
animationShow.play([widget]);
做如上修改之后,Widget出场时就是一边顺时针旋转一边放大的效果了

二、关闭动画:
需要修改WidgetTemplate.as文件
(1)导入定义和新增变量
import spark.effects.Rotate3D;
import spark.effects.Scale3D;
import mx.effects.Parallel;
import flash.utils.Timer;
import flash.events.TimerEvent;
private var myParallel:Parallel;
private var myRotate3D:Rotate3D;
private var myScale3D:Scale3D;
(2)修改WidgetTemplate函数
在super();后面增加
myRotate3D = new Rotate3D();               
myRotate3D.angleZFrom = 720;
myRotate3D.angleZTo = 0;
myRotate3D.duration = 1000;
myRotate3D.autoCenterProjection = true;
myRotate3D.autoCenterTransform = true;
               
myScale3D = new Scale3D();
myScale3D.duration = 1000;
myScale3D.autoCenterProjection = true;
myScale3D.autoCenterTransform = true;
myScale3D.scaleXFrom = 1.0;
myScale3D.scaleXTo = 0.0;
myScale3D.scaleYFrom = 1.0;
myScale3D.scaleYTo = 0.0;
myScale3D.scaleZFrom = 1.0;
myScale3D.scaleZTo = 0.0;
               
myParallel = new Parallel();
myParallel.addChild(myRotate3D);
myParallel.addChild(myScale3D);
(3)修改close_clickHandler函数
if (_baseWidget)
{
        //Widget关闭时的动画效果               
        myParallel.play([_baseWidget]);
        //由于异步执行的特点,必须等待动画执行完之后再关闭Widget.此处Timer的1000毫秒与自定义动画的播放时间相关
        var timer:Timer = new Timer(1000, 1);
        timer.addEventListener(TimerEvent.TIMER, function():void{_baseWidget.setState(WIDGET_CLOSED);});
        timer.start();                                   
}
做如上修改之后,Widget退场时就是一边逆时针旋转一边缩小的效果了