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

最新推荐文章于 2015-06-05 14:39:25 发布

转载最新推荐文章于 2015-06-05 14:39:25 发布 · 657 阅读

Flex 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何在Widget打开和关闭时实现旋转与缩放动画。通过修改WidgetManager.mxml和WidgetTemplate.as文件，设置动画参数，使得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退场时就是一边逆时针旋转一边缩小的效果了