<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true"
(动画显示控制在本区域范围内)
creationComplete="application1_creationCompleteHandler(event)">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.EffectEvent;
import mx.events.FlexEvent;
import spark.effects.Animate;
import spark.effects.animation.MotionPath;
import spark.effects.animation.SimpleMotionPath;
private var _timer:Timer;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
animate.width = 100;
animate.height = 100;
animate.y = -this.height;
(设置y坐标初始位置)
animate.x = 0;
(设置x坐标初始位置)
}
protected function cb_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
var showMotionPath1:SimpleMotionPath = new SimpleMotionPath("y");
showMotionPath1.valueTo = this.height / 2;
(路径1-y轴上的运动)
var showMotionPath2:SimpleMotionPath = new SimpleMotionPath("x");
showMotionPath2.valueTo = this.width / 2;
(路径2-x轴上的运动)
var showMotionPaths:Vector.<MotionPath> = new Vector.<MotionPath>();
showMotionPaths.push(showMotionPath1);
showMotionPaths.push(showMotionPath2);
(把两个路径放入vector集合中)
var showAnimate:spark.effects.Animate = new spark.effects.Animate();
showAnimate.target = animate;
(动画对象) showAnimate.motionPaths = showMotionPaths;
showAnimate.duration = 1000;
(动画执行的时长)
showAnimate.addEventListener(EffectEvent.EFFECT_END,showAnimate_effectEndHandler);
(给动画加一个完成的监听事件)
showAnimate.play();
(开始播放) }
private function showAnimate_effectEndHandler(event:EffectEvent):void
{
_timer = new Timer(3000,1);
(完成上面的播放后3秒后执行timer事件1次)
_timer.addEventListener(TimerEvent.TIMER_COMPLETE,timer_timerCompleteHandler);
_timer.start();
}
private function timer_timerCompleteHandler(event:TimerEvent):void
{
var hiddenMotionPath:SimpleMotionPath = new SimpleMotionPath("y");
hiddenMotionPath.valueTo = -this.height;
var hiddenMotionPaths:Vector.<MotionPath> = new Vector.<MotionPath>();
hiddenMotionPaths.push(hiddenMotionPath);
var hiddenAnimate:spark.effects.Animate = new spark.effects.Animate();
hiddenAnimate.target = animate;
hiddenAnimate.motionPaths = hiddenMotionPaths;
hiddenAnimate.duration = 1000;
hiddenAnimate.play();
}
]]>
</fx:Script>
<s:Group id="animate" width="100" height="100">
<s:Rect top="0" bottom="0" left="0" right="">
<s:fill>
<s:SolidColor color="#BBBBBB"/>
</s:fill>
</s:Rect>
<s:Label text="动画效果" color="#000000"/>
</s:Group>
<s:Button id="cb" x="325" y="169" label="看效果" click="cb_clickHandler(event)"/>
</s:Group>
分享到:
相关推荐
Flex动画效果教程主要聚焦于如何在Flex开发环境中创建引人入胜的动态视觉体验。Flex是一种基于ActionScript和MXML的开源框架,主要用于构建富互联网应用程序(RIA)。它提供了丰富的图形库和强大的动画功能,使得...
#### 三、Flex动画效果的使用 在Flex中使用动画效果有两种主要的方式:一是通过调用特定效果对象的`play()`方法;二是利用触发器来自动播放动画效果。下面分别介绍这两种方式: ##### 3.1 使用`play()`方法播放...
在 Flex 3.0 中,动画效果是增强用户体验的关键特性之一,允许开发者通过编程方式实现多种视觉变换,使得用户界面更加生动和吸引人。 在 Flex 中,动画效果主要通过 `Effect` 类来实现,它们可以应用于组件或容器,...
### Flex 动画效果开发指南 #### 一、行为对象概览 在Flex中,**行为对象**(Behavior Object)是一种强大的工具,它能够帮助开发者实现动态和交互式的用户界面。这种对象实际上是触发器(Trigger)和动画效果...
#### 一、Flex动画概述 Flex是一种用于开发RIA(Rich Internet Applications)的应用框架,它能够创建高性能且具有丰富交互性的Web应用程序。其中,Flex的动画功能是一个重要的特性,能够让开发者轻松地为应用程序...
这篇博客“Flex布局变化时的动画效果解析 简单版”可能是作者对如何在Flex布局中实现动态变换的一种简明介绍。 首先,我们需要理解Flex布局的基础概念。在Flex布局中,容器被设置为`display: flex`,它的子元素称为...
10.7.1 Flex动画效果结构 235 10.7.2 组件的动画属性 236 10.7.3 动画效果类 236 10.8 几个常见动画效果的实现 237 10.8.1 设定组件大小改变的动画效果 237 10.8.2 设定alpha值组件透明度改变的动画效果...
1. **动画组件**:在Flex中,我们可以使用Animate类或者Timeline类来创建动画效果。这些类允许我们控制帧率、添加关键帧、改变属性等,以实现动态的加载指示器。 2. **事件监听**:预加载器需要监听应用程序加载的...
标题“FLEX4动画特效”暗示了这个压缩包包含了一系列Flex4动画效果的示例代码。这些示例可能是由FlexBuilder4.6,一个专门用于Flex开发的集成开发环境(IDE),直接导出的工程。用户可以将这些工程导入到自己的开发...
3. 动画执行:使用`requestAnimationFrame`创建平滑的动画效果,每次帧更新时改变`transform`属性。 4. 状态管理:跟踪当前页面状态,确保翻页过程的正确性。 五、优化与兼容性 1. 使用autoprefixer自动添加浏览器...
总的来说,这个"超酷Flex动画图表"项目不仅提供了丰富的示例,还为你提供了一个强大的工具箱,帮助你创建引人入胜的、具有高度交互性的数据可视化应用。无论是进行数据分析、业务报告,还是进行数据故事讲述,这些...
这个版本还增强了数据绑定和动画功能,使得创建动态效果更加容易。 4. **SWC文件**:SWC是Flex的库文件格式,包含预编译的ActionScript类和资源。如果在项目中缺少某些库,可以从提供的SWC文件中找到并导入,以确保...
Flex杂志效果是一种基于Adobe Flex技术实现的数字出版物模拟翻页效果,常见...尽管现在有更多现代化的前端框架如React和Vue.js,但Flex在某些特定场景下,特别是对于需要丰富动画效果的RIA应用,依然具有其独特的价值。
在文件名“Flex3d动画引擎_效果展示”中,我们可以推断出这是一个关于Flex3D动画引擎的示例或教程,可能包含了如何创建和控制3D动画的详细步骤,以及如何实现特定效果的代码片段。学习这样的资源,开发者可以更好地...
在本文中,我们将深入探讨如何使用Adobe Flex技术创建控件翻转动画效果。Flex是一种基于MXML和ActionScript的开源框架,主要用于构建富互联网应用程序(RIA)。它允许开发者设计、构建和部署具有交互性和动态视觉...
总的来说,"Flex 3D切换效果"是通过巧妙地运用ActionScript 3.0的3D特性、变换和动画机制来实现的。掌握这些技术,不仅能够提升Flex应用的用户体验,也有助于开发出更具创新性和吸引力的用户界面。在实际项目中,...
9. **ZoomExample**: 这个例子可能涉及到缩放功能,可能是对图像或组件进行放大和缩小的动画效果。Flex2提供了ScaleTransform类来实现这个功能。 10. **SequenceExample**: 与ParallelExample相反,序列行为...
4. 动画效果:利用Flex的动画库(如Tween类)实现窗口打开、关闭的平滑过渡。 5. 响应式设计:确保弹出窗口在不同尺寸的屏幕和设备上都能良好显示。 6. 开发工具:熟悉Flex Builder或Flash Builder的使用,进行代码...
3. **动画效果**:Flex提供了强大的动画库,如TweenLite或TweenMax,可以用来平滑地改变组件的属性,如位置、角度和透明度。在这个实例中,这些动画将用于创建流畅的翻页效果,包括页面的旋转、滑动和淡入淡出。 4....