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軸的模糊畫素

而move效果需要設定移動的位置資訊

其它設定可以參考flex語言參考

下面說說如何使用這些效果。要執行這些效果有兩種方法：一種是呼叫該效果的play()方法，另外一種是使用觸發器來觸發效果。

（1）使用play()方法：

以下**：

程式** 程式**

<?xml version="1.0" encoding="utf-8"?>

private function onclick(event:event):void

]]>

程式** 程式**

<?xml version="1.0" encoding="utf-8"?>

在panel標籤裡有這樣一句：creationcompleteeffect="" 這個就是觸發器，是該panel元件的效果觸發器，當panel元件載入完成時，會由系統自動呼叫該效果觸發器，觸發器裡面指了觸發 be 這個blur效果

在flex裡面還有很多觸發器如：

addedeffect 被新增進容器時觸發效果

removedeffect 被從容器中移除時觸發效果

creationcompleteeffect 被建立成功時觸發效果

focusineffect 獲得焦點時觸發

focusouteffect 失去焦點時觸發

hideeffect 被隱藏時(visible=false)觸發

showeffect 被顯示時(visible=true)觸發

rollovereffect 滑鼠經過時觸發

rollouteffect 滑鼠離開時觸發

mousedowneffect 滑鼠按下時觸發

mouseupeffect 滑鼠鬆開時觸發

moveeffect 被移動時觸發

resizeeffect 被重整大小時觸發

注意：這些都是效果觸發器，不要與事件觸發器混亂了。事件觸發器是rollover，事件觸發器與效果觸發器差不多，事件觸發器是當使用者執行相就操作時觸發事件，將會呼叫自定的事件觸發處理函式，而效果觸發器是執行相應操作時被觸發並由系統自動呼叫所定的效果的play()方法。

現在說說效果的一些其它屬性：

每個效果都有兩個事件：effectstart 與 effectend

你可以在該效果事件的處理函式裡面對效果作相應的操作，如：

程式** 程式**

<?xml version="1.0" encoding="utf-8"?>

import mx.events.effectevent;

public function oneffend(e:effectevent):void

]]>

現在再來說說效果的組合：

如，當載入頁面時，你想panel先模糊到一定程度，再將panel移動到某個位置，再把panel還原成原來的清淅度（即消退模糊）。這樣分析一下，一共用了三個效果，一，先應用blur（由清至模）效果，當blur完成時，再應用move效果，當move完成時，再應用另外乙個blur（由模至清）效果。這樣三個效果組合就是按順序組合，先後執行。先來看看效果：

再來看看**：

程式** 程式**

<?xml version="1.0" encoding="utf-8"?>

程式** 程式**

使用flex自帶的效果基本用法就這些。

Flex 動畫效果

flex動畫效果

flex動畫效果

Flex裡的動畫效果

Flex 動畫效果

flex動畫效果

flex動畫效果

Flex裡的動畫效果

相關推薦