對圖形愛好者來說 ，Flex 特效是Flex平臺里最酷也最有趣的部分。有了特效就可以容易地開發(fā)出酷的應(yīng)用，同時(shí)增強(qiáng)用戶的體驗(yàn)。
在Flex 4里，特效可以應(yīng)用于任意的對象（不僅是UIComponent）和屬性（不僅是數(shù)值類型的屬性），既可以使用Flash Player的最新技術(shù)，從編程的角度也變得更強(qiáng)大和豐富。

[b]Animate是所有特效的基礎(chǔ)[/b]

Flex4里的所有特效都是Animate類的子類，而Animate是Effect的一個(gè)子類。Flex4里的特效類的層次是全新的，與Flex3里的
層次不能兼容，在Flex3里所有的特效類都是TweenEffect的一個(gè)子類。這2套特效庫可以同時(shí)使用，老代碼里的特效代碼無需修改即可在Flex 4里運(yùn)行。而Flex 4的開發(fā)人員就可以充分利用新的特效功能，這些新特效可用于舊的和新的組件，也可用于新的graphic元素，甚至是任意地對象。

新的Animate類提供了新的特效功能的通用功能，比如使特效能夠應(yīng)用于任意對象和類型的功能。Animate允許你用Animation子類來創(chuàng)建，操作和播放動(dòng)畫效果。Animation類包含了實(shí)際運(yùn)行動(dòng)畫的功能，比如計(jì)算和修改動(dòng)畫屬性的值。

使用Animate來來創(chuàng)建和使用特效是很簡答的：首先要一個(gè)目標(biāo)對象，以及這個(gè)對象的某些屬性的名字，這些屬性會被Animate類
修改來達(dá)到動(dòng)畫的效果。還有些可選的參數(shù)，比如效果持續(xù)的時(shí)間。一切都設(shè)置好后，調(diào)用play（）來播放就是了。

下面的例子中，我們給一個(gè)按鈕應(yīng)用了動(dòng)畫效果，動(dòng)畫的內(nèi)容是把按鈕向右移動(dòng)100個(gè)像素。

<s:Animate id="mover" target="{button}"> 
<s:SimpleMotionPath property="x" valueFrom="0" valueTo="100"/> 
</s:Animate> 
<s:Button id="button" click="mover.play()"/>

在這個(gè)例子里，我們還可以通過設(shè)置valueBy來設(shè)置移動(dòng)的相對值。也可以只設(shè)置valueTo屬性。當(dāng)然出來的效果是不一樣的。
如果你只設(shè)置了valueBy,那每次都是從當(dāng)前位置再移動(dòng)一段距離。如果只設(shè)置了valueTo，那按第一次后，以后再按就沒效果了
。你可以在一個(gè)Animate里設(shè)置多個(gè)SimpleMotionPath來達(dá)到同時(shí)往不同方向移動(dòng)的效果。比如下面這段代碼：

<s:Animate id="mover" target="{button}" duration="1000"> 
<s:SimpleMotionPath property="x" valueFrom="0" valueTo="100"/> 
<s:SimpleMotionPath property="y" valueTo="100"/> 
<s:SimpleMotionPath property="width" valueBy="20"/> 
</s:Animate>

[b]使用基本的特效[/b]
在上面的例子里，我們很直接地設(shè)置了特效需要的屬性的名字。當(dāng)播放特效時(shí)，動(dòng)畫效果是通過定時(shí)更改目標(biāo)對象的屬性來達(dá)到的。
雖然直接用Animate你可以搞出任何你想要的特效，不過Flex 4已經(jīng)包含了一些常用的特效。比如上面的效用就有對應(yīng)的Move類可以
完成。大多數(shù)情況下，我們用用內(nèi)置的特效類也就足夠了。

上面的例子可以用Move類來改寫：

<s:Move id="mover" target="{button}" xTo="100" yTo="200"/>

改過的代碼比舊代碼緊湊多了。Flex 4里有好多這樣基本的特效類。比如Resize，Scale,Rotate,Fade,AnimateColor。
下面就來看看這些特效的是怎么用的。

[u]Resize特效[/u]
Resize特效就是Animate類的一個(gè)簡單封裝，它對目標(biāo)對象的width和height屬性設(shè)置from、to和by。下面的例子把
按鈕的寬度從當(dāng)前值設(shè)置為100。，高度從當(dāng)前值設(shè)置為50

<s:Resize id="resizer" widthTo="100" heightTo="50" target="{button}"/>
想大多數(shù)特效一樣，Resize類也有會處理一些例外的情形，比如button設(shè)置了它的right屬性為0。這時(shí)運(yùn)行
上面的效果會發(fā)現(xiàn)按鈕是從右邊往左邊變大的。

[u]變形特效[/u]：移動(dòng)，旋轉(zhuǎn)，伸縮

這幾個(gè)特效關(guān)系緊密，因?yàn)樗鼈兌加绊懥四繕?biāo)對象的變換矩陣。它們必須一起工作來保證它們不會提供互相沖突的變換矩陣。

比如，如果你要旋轉(zhuǎn)一個(gè)對象，你就改變了它的旋轉(zhuǎn)屬性，但同時(shí)對象的x，y的位置也可能會被改變（考慮下如果
對象是按它的中心來旋轉(zhuǎn)的，那么它的左上面的坐標(biāo)就會被改變）。如果你還想給同樣一個(gè)對象應(yīng)用Move效果，這2個(gè)
效果會保證目標(biāo)對象能夠以可以理解的方式移動(dòng)和旋轉(zhuǎn)。

在Flex 3里，Move和Rotate效果是完全獨(dú)立的。大多數(shù)情況下，那樣也可以正常工作，但是也有可能因?yàn)樗鼈兓ハ喔采w彼此的
x和y屬性而出現(xiàn)詭異的效果。

在Flex4里，在變換效果之間共享的屬性有：

autoCenterTransform：這個(gè)標(biāo)識為true的時(shí)候，特效將會圍繞目標(biāo)對象的中心（width/2,height/2）來進(jìn)行操作。比如，旋轉(zhuǎn)效果會繞著
對象的中心來旋轉(zhuǎn)。伸縮效果會以對象的中心來進(jìn)行縮放。這個(gè)標(biāo)識對Move效果沒有影響，不過需要記住的是，
Move效果是根據(jù)對象的中心來移動(dòng)的，不是根據(jù)對象的左上角來移動(dòng)。

transformX,transformY:如果autoCenterTransform沒有設(shè)置，特效會使用目標(biāo)對象的變換中心。如果這些屬性同時(shí)被設(shè)置的話，
它們會互相覆蓋。比如默認(rèn)的變換中心是左上角（x=0,y=0）.如果你把transformX屬性設(shè)置為50，那么變換的中心就變成了
（50,0).

Repetions設(shè)置：重復(fù)相關(guān)的屬性（repeatCount,repeatDelay,repeatBehavior)等有個(gè)要注意的地方：你給第一個(gè)特效設(shè)置的值
會被應(yīng)用到后面的所有的效果。因?yàn)檫@個(gè)原因，我們不建議在變換效果中設(shè)置repetion相關(guān)的屬性。在AS平臺參考文檔里，甚至把repetition屬性
刪除了。不過，如果你在某一時(shí)刻只是應(yīng)用一種效果，那么repetitioin相關(guān)的屬性是可以放心設(shè)置的。

每種效果特有的屬性：除了上面這些變換效果都有的屬性外，每種變換效果都有自己特定的屬性：

Move：Flex 4里的Move效果提供了xFrom,xTo,xBy,yFrom,yTo,yBy等。
Rotate：除了提供了angleFrom,angleTo2個(gè)屬性。Flex 4里還提東了angleBy屬性。這些屬性可以讓目標(biāo)對象繞著變換中心來旋轉(zhuǎn)一定的角度。
Scale:這是FLex 4里新提出的效果（Flex 3里有個(gè)類似的Zoom效果）。scaleXFrom，scaleXTo,scaleXBy,scaleYFrom,scaleYTo,
scaleYBy等屬性指定了對象的伸縮因子。注意這個(gè)效果和Resize效果是完全不同的。以上面的Resize按鈕的例子為例，
雖然按鈕變大了， 但是按鈕上面的文字不會改變。而如果是Scale一個(gè)按鈕的話，不但按鈕的大小會變化，它里面的文字也會變化。

下面這個(gè)稍微復(fù)雜的例子是變換效果的一個(gè)組合。

<s:Parallel id="transformer" target="{button}">
 <s:Move xFrom="50" xTo="150" autoCenterTransform="true"/> 
<s:Rotate angleFrom="0" angleTo="90" autoCenterTransform="true"/> 
<s:Scale scaleXFrom="1" scaleXTo="2" autoCenterTransform="true"/> 
</s:Parallel> 
<s:Button id="button" x="50" y="100" label="Transform Me" click="transformer.play()"/>

[u]Fade效果[/u]

Fade效果是Flex4里一個(gè)很有用的過渡效果，它使得你可以讓對象淡入或淡出。這個(gè)效果在FLex3里就有了。但是Flex4包含了
更多的邏輯來處理不同的情形。

使用Fade效果很簡單，設(shè)置alphaFrom,alphaTo,alphaBy就行了。
下面的代碼就是把一個(gè)按鈕淡出當(dāng)前的界面（通過讓按鈕變透明）

<s:Fade target="{button}" alphaTo="0"/>

下面是一個(gè)更復(fù)雜的例子，使用states和transitions來完成。

<s:states> 
<s:State name="state1"/> 
<s:State name="state2"/> 
</s:states>
 <s:transitions> 
<s:Transition> 
<s:Fade targets="{[button0, button1, button2]}"/> 
</s:Transition> 
</s:transitions>

states節(jié)點(diǎn)力的代碼很簡單，就是聲明了2個(gè)后面的狀態(tài)相關(guān)的屬性里會用的狀態(tài)。transitions
說明，無論當(dāng)前的對象的狀態(tài)從哪個(gè)轉(zhuǎn)換到哪個(gè)，它都會把Fade效果應(yīng)用到button 0,1,2上。

接下來看看這些按鈕式怎么聲明的。其中要注意的就是觸發(fā)可視化的2種方式：

<s:Button id="button0" label="Visible" x="100" y="0" visible="true" visible.state2="false"/> 
<s:Button id="button1" label="Alpha" x="100" y="50" alpha="0" alpha.state2="1"/> 
<s:Button id="button2" label="Existence" x="100" y="100" includeIn="state2"/>

最后還需要一個(gè)按鈕來觸發(fā)狀態(tài)的改變：

<s:Button label="Toggle State" click="currentState=(currentState=='state1')?'state2':'state1'"/>

[u]AnimateColor 效果[/u]
這是個(gè)Flex4里新引入的類。AnimateColor默認(rèn)會對目標(biāo)對象上叫做"color"的屬性進(jìn)行線性修改（就是對紅，蘭，綠通道分別進(jìn)行加減操作）。這些默認(rèn)行為是可以變更的：你可以指定另外一個(gè)屬性來進(jìn)行操作（估計(jì)是你想要操作的屬性不叫“color”）。你也可以指定另外的方式來操作顏色，而不只是對RGB通道進(jìn)行線性的加減。

使用AnimateColor類很簡單。如果你不指定顏失色操作器，那么默認(rèn)使用RGBInterpolator,你可以用你自定義的操作器，也可以用
內(nèi)置的HSBInterpolator, 這個(gè)操作會對顏色的HSB通道進(jìn)行加減操作。

下面的例子假設(shè)你想在用戶按下鼠標(biāo)的時(shí)候更改對象的外觀，讓它看起來像是被按下去的效果。這個(gè)例子使用一個(gè)橢圓來作為目標(biāo)對象，使用放射漸變來填充里面的區(qū)域。把橢圓放進(jìn)一個(gè)Group是為了能接受用戶的的鼠標(biāo)事件。

<s:Group mouseDown="currentState='state2'" mouseUp="currentState='state1'">
       <s:Ellipse x="50" y="50" width="100" height="100">
             <s:fill> 
                    <s:RadialGradient> 
                   <s:GradientEntry id="center" color="0xf0f0f0" color.state2="0x808080" ratio="0"/> 
                   <s:GradientEntry id="edge" color="0x404040" ratio="1"/> 
                    </s:RadialGradient> 
            </s:fill> 
        </s:Ellipse> 
</s:Group>
<s:transitions> 
              <s:Transition> 
                   <s:AnimateColor target="{center}" duration="150"/> 
             </s:Transition>
</s:transitions> 

這個(gè)例子的運(yùn)行結(jié)果就是當(dāng)用戶在圓形上按下鼠標(biāo)時(shí)，圓形會變暗，而釋放鼠標(biāo)時(shí)會變亮。AnimateColor在這里的作用是那個(gè)duration的設(shè)置。它會讓變暗或變亮的過程慢慢發(fā)生。從而看起來更具動(dòng)畫效果。隨著對AnimateColor的熟悉，我們可以編寫自己的操作器來操作自己的屬性類型。