隨筆-31 
評論-257 
文章-0 
trackbacks-0

          
	

          

          
	
					


          
	
	在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 即實例與工廠的概念。
          

          

          

          

	          

          







          
	    
    


          
評論:

          
	

		
          
			
          
			# re: Flex的動畫效果與變換?。ㄒ唬?
				2008-08-20 14:51 | HUIHUI
          
				
          厲害  回復  更多評論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: Flex的動畫效果與變換?。ㄒ唬?
				2010-06-14 22:27 | Flex初學
          
				
          好文！?。?！  回復  更多評論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: Flex的動畫效果與變換?。ㄒ唬?
				2011-06-14 12:15 | easy518網址導航
          
				
			
          
			
			
		
          
	
		
          
			
          
			# re: Flex的動畫效果與變換?。ㄒ唬?
				2011-07-01 08:53 | fcer
          
				
          學習了。。謝謝  回復  更多評論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: Flex的動畫效果與變換?。ㄒ唬?
				2011-08-15 14:21 | fx
          
				
          很好 對動畫效果有了初步的認識，寫的不錯。。  回復  更多評論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: Flex的動畫效果與變換?。ㄒ唬?a name="Post">
				2012-02-13 13:58 | sunli
          
				
          好東西啊 哈哈  回復  更多評論
            
          
			
          
			
			
		
          
	








          








          

				

          







    







          
        
	




主站蜘蛛池模板：
志丹县|
凌云县|
栾城县|
武功县|
海门市|
雷州市|
芦溪县|
集贤县|
梅河口市|
大荔县|
湘乡市|
崇明县|
黄平县|
亳州市|
滁州市|
晋宁县|
通州市|
静宁县|
伊金霍洛旗|
镇赉县|
凤凰县|
石林|
通州市|
鄱阳县|
弥勒县|
类乌齐县|
浮梁县|
新泰市|
马关县|
龙胜|
山阴县|
沧源|
顺义区|
桓仁|
霍州市|
大埔区|
温泉县|
蓝山县|
宁化县|
阿拉尔市|
东莞市|