`
strugglesMen
  • 浏览: 111871 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

[zz]Flex的动画效果与变换!(未完)

阅读更多

 

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

  WipeDown

 

Effect的使用方法

1.使用play()方法:

 

<?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>

注:be.target = event.currentTarget 设置该效果将要应用到的目标组件(Component)

之后再调用play()方法后,该效果就会应用在Panel上面播放!

(2)使用触发器播放效果:

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>

注:duration="2000"这个是播放的时间以毫秒为单位

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()的话,效果将会从大到小进行播放

pause( )与resume( )就是暂停与继续播放效果

startDelay这个属性是设置效果的播放延时,以毫秒为单位,即要等待多少毫秒后效果才开始播放

repeatCount这个属性是设置效果的重复次数,默认为1,设置为0的话就是不停循环播放

import mx.events.EffectEvent;

每个效果都有两个事件:effectStart 与 effectEnd

<mx:Iris id= "myIris" effectStart="effectStartHandler()" effectEnd="effectEndHandler()" />

 effectStart effectEnd 是动画效果共有的事件,分别在动画的开始和结束时被激发。

 

 <mx:WipeRight id= "myWipe2" repeatCount="2" repeatDelay="500"/>

 repeatCount repeatDelay 也是共有属性,分别表示动画播放的次数和每次都间隔时间

 

 

事件EffectEvent,方法 reverse,事件effectEnd(效果结束事件)用法

<?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事伯,这样一直循环!

 

http://www.blogjava.net/cph8066/archive/2008/07/29/218405.html

http://www.blogjava.net/cph8066/archive/2008/07/29/218407.html

http://www.blogjava.net/cph8066/archive/2008/07/29/218410.html

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics