Flex的动画效果与变换!(一)
在Flex里面不像在Flash里面随意制作动画了,Flex更趋向于应用程序,而不是动画制作了,所以没有了时间轴的概念。在Flex中使用动画效果,可以用Flex自带的Effect,或者自已定制Effect,因为很多人都想借Flash里面的一样操作Flex,比如在Flash里面做一个动态按钮很容易,当鼠标移动到上面时,会有很多发光的点跑出来(荧火虫效果),这种效果在Flash十分容易实现,但在Flex里面要实现这种效果就不是那么简单的了,下面说说在Flex里的的动务效果的使用与自定义制作。

首先介绍一下Flex里面的自带的效果有以下几种:
  Blur                            模糊效果
  Move                          移动效果
  Fade                          淡入淡出效果             
  Glow                          发光效果
  Resize                       调整大小效果
  Rotate                       旋转效果
  Zoom                         缩放效果
  WipeLeft                    用遮罩实现画面收放效果,下同,分别为不同方向
  WipeRight
  WipeUp
  WipeDown

不同的效果所需要设置的属性也不一样,比如Blur效果需要设置它的X与Y轴的模糊像素
<mx:Blur id="blur" blurXFrom="0" blurXTo="10" />
而Move效果需要设置移动的位置信息
<mx:Move id="moveEffect" xFrom="-100" />
其它设置可以参考Flex语言参考

下面说说如何使用这些效果。要运行这些效果有两种方法:一种是调用该效果的play()方法,另外一种是使用触发器来触发效果。
(1)使用play()方法:
先看效果:
 
以下代码:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 3     <mx:Script>
 4         <![CDATA[
 5             private function onClick(event:Event):void {
 6                 be.target = event.currentTarget;
 7                 be.play( );
 8             }
 9         ]]>
10     </mx:Script>
11    
12     <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="1000" />
13 
14     <mx:Panel id="p" width="200" height="180" click="onClick(event)" />
15 </mx:Application>

在代码中看到,要使用效果,先定好一个效果,如上面的<mx:Blur ...>该标签就是模糊效果的MXML标签,定好效果后在Panel的点击事件里再对该效果进行一些设置,如be.target = event.currentTarget 设置该效果将要应用到的目标组件(Component),之后再调用play()方法后,该效果就会应用在Panel上面播放!

(2)使用触发器播放效果:
使用触发器播放效果的话,可以不用写ActionScript代码,直接在组件的效果触发器上指明使用哪个效果就可以了,比较简单明了,但就不能进行更多的属性定制,而用AS控制播放的话,可以对效果进行很多的设置再相应根据情况播放,先看看触发器播放的代码:

1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3    
4     <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="2000" />

6     <mx:Panel id="p" width="200" height="180" creationCompleteEffect="{be}" />
7 </mx:Application>

看以上代码,先写好了Blur的效果并设置好属性后,duration="2000"这个是播放的时间以毫秒为单位。
在Panel标签里有这样一句:creationCompleteEffect="{be}" 这个就是触发器,是该Panel组件的效果触发器,当Panel组件加载完成时,会由系统自动调用该效果触发器,触发器里面指了触发 be 这个Blur效果
在Flex里面还有很多触发器如:
  addedEffect                                       被添加进容器时触发效果
  removedEffect                                   被从容器中移除时触发效果
  creationCompleteEffect                     被创建成功时触发效果
  focusInEffect                                     获得焦点时触发
  focusOutEffect                                   失去焦点时触发
  hideEffect                                          被隐藏时(visible=false)触发
  showEffect                                        被显示时(visible=true)触发
  rollOverEffect                                     鼠标经过时触发
  rollOutEffect                                       鼠标离开时触发
  mouseDownEffect                              鼠标按下时触发
  mouseUpEffect                                   鼠标松开时触发
  moveEffect                                         被移动时触发
  resizeEffect                                       被重整大小时触发

注意:这些都是效果触发器,不要与事件触发器混乱了。事件触发器是rollOver,事件触发器与效果触发器差不多,事件触发器是当用户执行相就操作时触发事件,将会调用自定的事件触发处理函数,而效果触发器是执行相应操作时被触发并由系统自动调用所定的效果的play()方法。

现在说说效果的一些其它属性:
每个效果都有reverse( );方法,该方法是反向播放,原本由小到大的变化,而调用reverse( );后再运行play()的话,效果将会从大到小进行播放。
但要注意的一点是,reverse( );不会自动播放,即是单单调用reverse( );的话,效果并不会播放,他只会记录该效果为倒转,而要再调用play()后倒转效果才会开始播放。而调用pause( )与resume( )就是暂停与继续播放效果

startDelay这个属性是设置效果的播放延时,以毫秒为单位,即要等待多少毫秒后效果才开始播放,如:
<mx:Blur id="be" blurXTo="50" startDelay="3000" />
该模糊效果将会在调用play()之后3秒才开始播放

repeatCount这个属性是设置效果的重复次数,默认为1,设置为0的话就是不停循环播放
<mx:Blur id="be" blurXTo="50" startDelay="3000" repeatCount="5" />

每个效果都有两个事件:effectStart 与 effectEnd
你可以在该效果事件的处理函数里面对效果作相应的操作,如:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 3     <mx:Script>
 4         <![CDATA[
 5             import mx.events.EffectEvent;
 6             public function onEffEnd(e:EffectEvent):void{
 7                 e.effectInstance.reverse();
 8                 e.effectInstance.play();
 9             }
10         ]]>
11     </mx:Script>
12     <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="2000" />
13 
14     <mx:Panel id="p" width="200" height="180" creationCompleteEffect="{be}" effectEnd="onEffEnd(event)" />
15 </mx:Application>

当效果播放完时,系统将会自动触发effectEnd事件,在处理函数里面,将该效果Instance即现时播放的效果实例进行倒转并播放,当播放完,又会触发effectEnd事伯,这样一直循环!

现在再来说说效果的组合:
通常如果你觉得只应用一个效果很单调的话,可以进行效果组合应用,即多个效果同时播放或者顺序播放,
如,当加载页面时,你想Panel先模糊到一定程度,再将Panel移动到某个位置,再把Panel还原成原来的清淅度(即消退模糊)。这样分析一下,一共用了三个效果,一,先应用Blur(由清至模)效果,当Blur完成时,再应用Move效果,当Move完成时,再应用另外一个Blur(由模至清)效果。这样三个效果组合就是按顺序组合,先后运行。先来看看效果:
 
再来看看代码:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 3    
 4     <mx:Sequence id="sequenceEffect">
 5         <mx:Blur id="beOut" blurXTo="50" blurYTo="50" duration="500" />
 6         <mx:Move id="mv" xTo="200" yTo="150" duration="500" />
 7         <mx:Blur id="beIn" blurXFrom="50" blurYFrom="50" blurXTo="0" blurYTo="0" duration="500" />
 8     </mx:Sequence>
 9    
10     <mx:Panel id="p" width="200" height="180" mouseDownEffect="sequenceEffect"  />
11 </mx:Application>

看以上代码,<mx:Sequence id="sequenceEffect">标签就是顺序组合效果标签,当应用sequenceEffect效果的时候,它会按顺序播放该标签里面的三个子效果。

另外的就是同时播放了,

1 <mx:Parallel id="parallelEffect">
2           <mx:Blur id="beOut" blurXTo="50" blurYTo="50" duration="500" />
3       <mx:Move id="mv" xTo="200" yTo="150" duration="500" />
4 </mx:Parallel>

这个标签就是同时播放的效果标签,放在它里面的子效果都会同时播放,即一边模糊一边移动。这个都可以自由组合,<mx:Parallel>与<mx:Sequence>标签都可以自由组合,例如先按顺序先播放模糊,再同时播放移动与隐藏等。这里就不多说了。

使用Flex自带的效果基本用法就这些,下篇文章将讨论自定义效果的制作,下篇将会详细说说这篇文章上面说到的 effectInstance 即实例与工厂的概念。

转载于:https://blog.51cto.com/xiweicheng/705500

Flex的动画效果与变换(1)相关推荐

  1. 利用Frame Animation实现动画效果,代码正确,就是达不到变换效果

    就是因为把第一帧图片设置成了ImageView的src资源,从而一直覆盖在变换效果之上,去掉ImageView的src属性即可解决. 要想使应用已载入便播放动画效果,直接将 animationDraw ...

  2. CSS3的2D、3D变换、过度与动画效果

    1. 2D转换方法 在2D转换方法中,存在对元素进行旋转.缩放.拉伸.移动的属性效果.此处主要讲解transform属性中的旋转和缩放.位移效果. 1.1 旋转rotate() 通过下述代码的设置可以 ...

  3. Qt5学习 模仿qq音乐播放器样式(2)——点击动画效果+歌词颜色变换展示

    拖的太久,主要再上一篇文章中,新学习了相关知识,做了右键菜单,点击按钮动画切换窗口和播放时歌词颜色显示当前播放位置. 主要为了实现功能的展示,所以很多文件读取都直接采用了本地文件这种比较low的方式. ...

  4. css3中的2D和3D转换、动画效果以及布局

    文章目录 一.2D转换: 1. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动.移动参照元素左上角原点 2. 2D缩放: 3. 2D旋转: 4. 2D翻 ...

  5. 真是好东西!一组动感的页面加载动画效果

    如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站,你可能已经注意到在显示新内容之前动感的页面加载动画了.这种风格的动画效果最近非常流行,因此这篇文章想给 ...

  6. Android 动画之View动画效果和Activity切换动画效果

    View动画效果: 1.>>Tween动画 通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节 ...

  7. css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果

    旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示 设计思路与核心技术 旋转地球效果实现主要 ...

  8. Android 卡片翻转动画效果

    转载请标明出处:http://blog.csdn.net/android_mnbvcxz/article/details/78570594 Android 卡片翻转动画效果 前言 前端时间开发一款应用 ...

  9. 悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果

    CSS3 transition属性实现hover渐变动画效果 我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...

最新文章

  1. 谷歌像素递归超分辨率研究:怎么消灭低分辨率图像马赛克?
  2. Selenium3自动化测试——2. python编写简单自测代码
  3. 02dayC语言数据类型
  4. 【Python-ML】非线性映射降维-KPCA方法-新样本映射
  5. 【数据挖掘笔记一】引论
  6. 大众点评订单分库分表实践之路
  7. 【WCF】 套接字连接已中止。这可能是由于处理消息时出错或远程主机超过接收超时或者潜在的网络资源问题导致的。本地套接字超时是“00:00:56.9810000”。...
  8. QSplitter设置宽高比例的正确方法
  9. 万人请愿别让贝索斯重返地球 还有人建议带上马斯克
  10. 关于银行,有哪些有趣的冷知识
  11. LoadRunner使用odbc时报错can't get hostname for your address的解决方法
  12. pyqt5获取文本框里输入的值_【技术指南】 使用MCC数据采集设备获取单通道模拟输入值...
  13. 【信源编码】Huffman Coding原理以及MATLAB实现
  14. Linux动态库和静态库
  15. 自制计算机(1):机械计算机原理
  16. Vulnhub-maEnuBox
  17. The server time zone value ‘�й���׼ʱ��’ is unrecognized or represents more than one time zone. You mu
  18. OkHttp3源码分析二 拦截器 上
  19. Java面向对象编程-模拟购物车模块
  20. 将汉字转换为拼音或者翻转

热门文章

  1. word如何一键全选_【众点学】学了这些Word技巧才知道,原来这么多年的班都白加了...
  2. 监督学习和无监督学习_一篇文章区分监督学习、无监督学习和强化学习
  3. kitti数据集_神秘的Waymo一反常态,CVPR现场发布大型自动驾驶数据集
  4. Lesson Plan 教学计划 翻译
  5. Sun公司网站上的Swing实例,想学Swing的不看后悔
  6. PHP案例:单引号字符串与双引号字符串有什么区别?
  7. 【BZOJ3529】数表,莫比乌斯反演+BIT
  8. 【codevs1001】舒适的路线,心累的冰茶几
  9. 4.线性和卷积——相关与卷积、卷积的属性、计算复杂度和可分性_2
  10. java中的class 类的作用_Java中Class和单例类的作用与类成员的理解