[转载]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 myParallelarallel;

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退场时就是一边逆时针旋转一边缩小的效果了