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"   />
5 
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 即实例与工厂的概念。



本文转自chainli 51CTO博客,原文链接:http://blog.51cto.com/lichen/193108,如需转载请自行联系原作者

相关文章
vue3+vite项目中使用svg图标
vue3+vite项目中使用svg图标
1395 0
|
测试技术 Shell API
Playwright系列(3):运行测试用例
Playwright系列(3):运行测试用例
434 1
|
SQL Java 数据库连接
Connection(数据库连接对象)
Connection(数据库连接对象)
301 0
|
NoSQL Redis C语言
只需要笔记本和一条网线就可以让服务器拥有外网的办法
只需要笔记本和一条网线就可以让服务器拥有外网的办法
只需要笔记本和一条网线就可以让服务器拥有外网的办法
|
10月前
|
算法 前端开发 API
开源轻量级IM框架MobileIMSDK的鸿蒙NEXT客户端库已发布
MobileIMSDK-鸿蒙端是一套基于鸿蒙Next(纯血鸿蒙)系统的IM即时通讯客户端库: 1)超轻量级(编译后库文件仅50KB)、无任何第3方库依赖(开箱即用); 2)纯ArkTS编写、无Native代码、高度提炼、简单易用; 3)基于鸿蒙Next标准WebSocket API,简洁优雅; 4)可运行于任何支持鸿蒙Next的平台; 5)能与 MobileIMSDK的各种客户端完美互通; 6)可应用于鸿蒙Next中的消息推送、客服聊天、企业OA、IM等场景。
317 45
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
320 0
|
网络协议 关系型数据库 MySQL
安卓手机termux上安装MariaDB数据库并实现公网环境下的远程连接
安卓手机termux上安装MariaDB数据库并实现公网环境下的远程连接
555 0
一个简约风的VitePress博客主题
前言 笔者的博客之前是使用 VuePress + reco主题 随着博客文章数量越来越多(md文件已经300+了),博客本地启动和构建越来越来慢了emmm 恰好此时 VitePress 也相对成熟了(1.x alpha),就萌生了迁移到 VitePress 的想法 其相比 VuePress 更加的简洁,可玩性强,上手成本也低,由 Vite 加持体验也是非常不错。 按照官方的给的定位,VitePress 只提供一些基础主题API,所有定制都在自己的主题里完成(个人感觉就像Hexo丰富多彩的主题一样),不提供插件系统
1217 0
|
前端开发 JavaScript 容器
CSS(二)——Flex布局 边框 渐变 过渡 动画
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
431 0
CSS(二)——Flex布局 边框 渐变 过渡 动画