`
mujinglanqq1
  • 浏览: 2495 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

flex的动画效果

 
阅读更多
<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教程 Flex特效 全面讲解flex特效制作,特别是自定义特效

    flex动画效果与变幻.pdf

    flex动画效果与变幻(中文版) 在Flex里面不像在Flash里面随意制作动画了,Flex更趋向于应用程序,而不是动画制作了,所以没有了时间轴的概念。

    Flex 动画效果

    Flex 动画效果开发指南,包含常用动画开发方式

    flex中动画效果

    演示 Flex 3.0 中的各种动画效果(effect)的应用 • Zoom - 放大/缩小 • Wipe - 从上/下/左/右 4 个方向 线性渐变地 对控件做 删除/显示 • Rotate - 旋转 • Resize - 调整控件大小 • Fade - 淡入/淡出 • ...

    flex动画效果,有代码

    Flex 的行为机制使得开发者可以很方便地为应用程序添加动画效果,从而使用 户界面更加丰富多彩。本章将介绍如何在Flex 应用程序中创建行为及动画效果

    精通Flex 3.0——基于ActionScript 3.0实现_源代码

    10.7.1 Flex动画效果结构 235 10.7.2 组件的动画属性 236 10.7.3 动画效果类 236 10.8 几个常见动画效果的实现 237 10.8.1 设定组件大小改变的动画效果 237 10.8.2 设定alpha值组件透明度改变的动画效果...

    flex各种效果演示

    Flex的行为机制使得开发者可以很方便地为应用程序添加动画效果,从而使用户界面更加丰富多彩。本章将介绍如何在Flex应用程序中创建行为及动画效果。

    Flex 布局变化时的动画效果解析 简单版

    NULL 博文链接:https://emavaj.iteye.com/blog/673327

    flex 做的控件翻转动画效果

    flex 做的控件翻转的简单动画效果,附件仅是示例,如需要其他的动画效果,则只需要将相应的库放入工程的lib文件夹下即可。

    AS3动画及效果(flex)

    as3做的超级玛丽 简单易懂 喜欢的朋友拿走 支持下(有源码)

    flex 苹果桌面效果的弹出窗口

    NULL 博文链接:https://hje.iteye.com/blog/364524

    Flex 游戏中行走动画

    这是Flex中通过切图完成的行走动画,通过切换Bitmap的BitmapData来完成动画效果

    flex 动画相册 Move 导入可用

    相册效果的显示图片 move 实现移动

    flexjsHMTL5引擎可实现复杂的动画效果

    flexjs,HMTL 5 引擎,可实现复杂的动画效果,包括拖拽元素,3D 动画等等 支持绝大部分 flash api 支持 canvas 和 webgl 全部代码使用 ActionScript 书写。

    flex 第一步全部源码 实例源码

    内容包括:Flex简介、Flex的安装和开发环境的建立、MXML 语法简介、使用容器控制界面布局、使用组件处理数据和交互、使用行为对象和动画效果、ActionScript 3.0编程知识、Flex的事件机制、数据绑定、组件的使用、...

    5种纯CSS3鼠标hover按钮动画效果

    这是一款鼠标hover按钮动画特效。该特效共有5种hover动画效果,它们在结构布局上使用flex来进行布局,并通过css transition来实现动画效果。

    Flex4之控制状态转换以及产生动画特效【登录示例】

    话不多说,Flex4的动画效果的确让人赏心悦目,既然是登陆肯定有画面之间的转化,那么在Flex中,这就叫做不同状态之间的变换,本实例中我做的是登陆验证,如果登录失败,则登陆框会出现左右抖动现象,用过MAC电脑的...

    flex 数据库留言本 源码

    内容包括:F1ex简介、Flex的安装和开发环境的建立、MXML语法简介、使用容器控制界面布局、使用组件处理数据和交互、使用行为对象和动画效果、ActionScript3.0编程知识、Flex的事件机制、数据绑定、组件的使用、F1ex...

    Flex第一步 源码

    内容包括:F1ex简介、Flex的安装和开发环境的建立、MXML语法简介、使用容器控制界面布局、使用组件处理数据和交互、使用行为对象和动画效果、ActionScript3.0编程知识、Flex的事件机制、数据绑定、组件的使用、F1ex...

    Flex 企业门户网整站系统

    Flex与J2ee集成的完全整站代码 blazeds 为核心通讯,RemoteObject 交互, mysql 为数据库 网站开头动画,首页动画,页面切换动画, Grid ,案例有书本翻页效果,自定义组件。 完全开源

Global site tag (gtag.js) - Google Analytics