Flex的动画效果与变换(1)

精选转载

xiweicheng1987 2011-11-03 22:46:09 博主文章分类：Web

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