FLEX特效的講解

2021-08-30 14:52:15 字數 4303 閱讀 4333

flex的行為機制使得開發者可以很方便地為應用程式新增動畫效果,從而使使用者介面更加豐富多彩。本章將介紹如何在flex應用程式中建立行為及動畫效果。

9.1 什麼是行為

9.1.1 觸發器與效果

觸發器的使用非常簡單,可以作為mxml標記中的乙個屬性,也可以在標記中呼叫,或者在actionscript 中用setstyle()和getstyle()方法呼叫。觸發器的名稱為triggerevent名稱 + 「effect」字尾。按照這種名稱約定,mousedown事件的觸發器名稱為mousedowneffect。flex中提供的觸發器名稱包括以下幾種。

l addedeffect:當元件新增到容器中時觸發。

l creationcompleteeffect:元件建立完畢時觸發。

l focusineffect:元件獲得焦點時觸發。

l focusouteffect:元件失去焦點時觸發。

l hideeffect:當元件的visible屬性更改為false時觸發。

l mousedowneffect:按下滑鼠時觸發。

l mouseupeffect:釋放滑鼠時觸發。

l moveeffect:元件移動時觸發。

l removedeffect:元件被移除時觸發。

l resizeeffect:元件改變大小時觸發。

l rollouteffect:滑鼠從元件上移開時觸發。

l rollovereffect:滑鼠移動到元件上時觸發。

l showeffect:元件的visible屬性更改為true時觸發。

下面的圖9-1分別表現了工廠類和例項類的層級關係。effect類是乙個抽象基類,是定義所有效果的基本工廠類。effectinstance類是定義所有效果實例子類的基類。在應用程式中不會建立effect類本身的例項,而是建立乙個子類的例項,如mask或tween。

圖9-1 工廠類與例項類

9.1.2 簡單效果元件

1)animateproperty動畫效果

animateproperty是用來為元件的屬性或樣式設定動畫的效果。我們可以通過其property屬性設定目標物件上需要設定動畫效果的屬性,然後設定fromvalue屬性和tovalue屬性,為效果提供屬性的起始值和結束值。例如下面的**使用mousedowneffect觸發器,當單擊時,觸發animateproperty效果,在1秒鐘內,image物件的scalex屬性由1變為2,被橫向拉伸。**如下:

如果希望通過樣式設定效果,可以將isstyle屬性設定為ture,然後通過 setstyle()方法設定目標物件的樣式,從而達到設定效果的目的。

2)blur模糊效果

blur 是一種模糊效果。該效果使用了flash.filters.blurfilter濾鏡,如果對某個元件應用了blur 效果,就不能再對該元件應用blurfilter濾鏡,也無法再次應用blur效果。下面的**通過image物件的mousedowneffect觸發器觸發blur效果,在1秒鐘內,image物件將逐漸變得模糊。**如下:

3)dissolve 溶解效果

如果目標物件是乙個容器,那麼dissolve效果將應用於容器內部的內容區域。

下面的**使用乙個checkbox物件設定image的visible屬性,通過hideeffect和showeffect觸發器分別觸發各自的dissolve效果:

4)fade 淡入淡出效果

fade是一種淡入淡出效果,它通過設定元件的alpha屬性來實現動畫效果。當使用showeffect或hideeffect觸發器設定 fade效果時,如果省略了alphafrom和alphato屬性的值,那麼在showeffect觸發器上目標物件的透明度將從 0變化到目標的當前alpha值,而在hideeffect觸發器上則會從當前的alpha 值變化到0。如果要對字型使用fade效果,必須使用嵌入字型。

下面的**使用乙個checkbox物件設定image的visible屬性,通過hideeffect和showeffect觸發器分別觸發各自的fade效果:

5)glow 發光效果

glow是一種發光效果,該效果使用了flash.filters.glowfilter濾鏡類。如果對某個元件應用了glow效果,就不能對該元件應用glowfilter濾鏡,也無法再次應用glow效果。下面的**通過image物件的mousedowneffect觸發器觸發glow效果:

6)iris 虹效果

iris效果通過擴充套件或收縮集中在目標上的矩形遮罩為效果目標設定動畫。該效果可以從目標的中心放大遮罩來顯示目標,也可以向中心收縮遮罩來隱藏目標。下面的**使用乙個checkbox物件設定image的visible屬性,通過hideeffect和showeffect觸發器分別觸發各自的 iris效果:

7)move 移動效果

move效果用來實現移動動畫。在給定時間內,元件的位置會隨時間變化而變化。使用該效果通常需要用到以下幾個屬性。

l xfrom和yfrom屬性用來指定初始位置。

l xto和yto屬性用來指定目標位置。

l xby和yby用來指定移動量,即元件在x軸向和y軸向上的移動速度。

通常只需要指定初始位置、目標位置或移動量這些值中的任意2個, flex就會計算第3個值。如果指定所有這3個值,flex就會忽略xby和yby值。如果僅指定xto和yto值或xby和yby值,那麼flex會將 xfrom和yfrom設定為物件的當前位置。

下面的程式演示了如何使用move效果。

**清單 movesample.mxml

<?xml version="1.0"?>

"0"layout="absolute" mousedown="moveimage();">

8)pause暫停效果

pause效果可以實現在指定時間段內不執行任何操作的功能。如果將pause效果新增為 sequence效果的子項,可以建立2個其他效果之間的暫停。

9)resize大小調整效果

resize效果用來改變元件的大小。與move效果相似,resize效果可以指定初始大小(widthfrom、heightfrom)、目標大小(widthto、heightto)和變化量(widthby、heightby),其使用規則也與move效果的初始位置、目標位置和移動量的使用規則相似。下面的**演示了resize效果的使用方法:

10)rotate旋轉效果

rotate是一種旋轉效果,使元件圍繞指定的點旋轉。rotate可以指定旋轉中心的座標(originx和originy屬性)及旋轉的起始角度(anglefrom屬性)和最終角度(angleto屬性)。起始旋轉角度的有效值範圍是0~360,而最終角度則可以是正值也可以是負值,預設值為 360。如果angleto的值比anglefrom的值小,則目標沿逆時針方向旋轉,否則以順時針方向旋轉。**如下:

需要注意的是, hidefocusring屬性在以effect為基類的效果類中,預設值為false,而在以maskeffect為基類效果類中,預設值為true。

11)soundeffect聲音效果

soundeffect效果的屬性包括以下幾個。

l autoload 屬性用來設定是否自動載入***檔案,預設值為true。

l buffertime 屬性用來設定聲音物件的緩衝時間。預設值為 1000,單位為毫秒。

l isloading如果已載入***,則該屬性為true。

l loops 屬性用來設定迴圈次數,預設值為0。

l paneasingfunction 屬性用來設定聲音均衡效果的緩動函式。

l panfrom屬性和panto屬性用來設定聲音物件的起始和最終平移,取值範圍在-1.0~1.0之間,其中-1.0表示僅使用左聲道,1.0 表示僅使用右聲道,而0.0表示在2個聲道間平均地均衡聲音。

l sound 屬性表示已載入***檔案的聲音物件。

l volumeeasingfunction 屬性用來設定音量效果的緩動函式。

l volumefrom 屬性和volumeto屬性用來設定聲音物件的初始和最終音量,取值範圍在0.0~1.0之間,預設值為1。

**清單 soundsample.mxml

<?xml version="1.0"?>

creationcompleteeffect="">

12)wipeup、 wiperight、wipedown、wipeleft擦除效果

這些類定義了4個方向的擦除效果,通常與showeffect和hideeffect觸發器配合使用,使用起來非常簡便,如下面的例子。

**清單 wipesample.mxml

<?xml version="1.0"?>

執行該程式,效果如圖9-2所示。

圖9-2 擦除效果

13)zoom縮放效果

**清單 zoomsample.mxml

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

flex學習 特效

一 簡介 flex特效是ria應用程式的rich的重要組成部分。effectmanager類管理所有的特效例項以避免不必要的定時器和方法呼叫造成的內記憶體使用過大。乙個效果由兩部分組成 一是效果的effectinstance,它包含了效果的基本資訊,標識出要執行什麼,怎麼執行,是移動還是漸變等。二是...

Flex 常見特效

常見效果類 animateproperty 動畫屬性 blur 模糊 desolve 溶解 fade 凋零 glow 發光 iris 瞳孔放大縮小 move 移動 pause 定格 resize 改變大小 rotate 旋轉 soundeffect 音效 wipeleft,wiperight,wip...

Flex 常見特效

常見效果類 animateproperty 動畫屬性 blur 模糊 desolve 溶解 fade 凋零 glow 發光 iris 瞳孔放大縮小 move 移動 pause 定格 resize 改變大小 rotate 旋轉 soundeffect 音效 wipeleft,wiperight,wip...