這篇文章是 Chet Haase寫的，原文在：http://www.adobe.com/devnet/flex/articles/flex4_effects_pt1.html。Chet
Haase這哥們原來是sun的工程師，filthy rich clients 是他在swing 特效方面的一本書的網站 （這本書絕對是Swing effect開發的寶典了）。後來跑到Adobe去了，還是作特效方面的工作。最近也出了本Flex特效方面的書《Flex
4 Fun》（我只看了個樣章，寫得非常詳實）。總之這哥們的文章是絕對有含金量的。對Flex graphic感興趣的人強烈推薦去參觀下他的blog。
對圖形愛好者來說 ，Flex 特效是Flex平臺裏最酷也最有趣的部分。有了特效就可以容易地開發出酷的應用，同時增強用戶的體驗。
在Flex 4裏，特效可以應用於任意的對象（不僅是UIComponent）和屬性（不僅是數值類型的屬性），既可以使用Flash Player的最新技術，從編程的角度也變得更強大和豐富。
Animate是所有特效的基礎
Flex4裏的所有特效都是Animate類的子類，而Animate是Effect的一個子類。Flex4裏的特效類的層次是全新的，與Flex3裏的
層次不能兼容，在Flex3裏所有的特效類都是TweenEffect的一個子類。這2套特效庫可以同時使用，老代碼裏的特效代碼無需修改即可在Flex 4裏運行。而Flex 4的開發人員就可以充分利用新的特效功能，這些新特效可用於舊的和新的組件，也可用於新的graphic元素，甚至是任意地對象。
新的Animate類提供了新的特效功能的通用功能，比如使特效能夠應用於任意對象和類型的功能。Animate允許你用Animation子類來創建，操作和播放動畫效果。Animation類包含了實際運行動畫的功能，比如計算和修改動畫屬性的值。
使用Animate來來創建和使用特效是很簡答的：首先要一個目標對象，以及這個對象的某些屬性的名字，這些屬性會被Animate類
修改來達到動畫的效果。還有些可選的參數，比如效果持續的時間。一切都設置好後，調用play（）來播放就是了。
下面的例子中，我們給一個按鈕應用了動畫效果，動畫的內容是把按鈕向右移動100個像素。
<s:Animate id="mover" target="{button}">
<s:SimpleMotionPath property="x" valueFrom="0" valueTo="100"/>
</s:Animate>
<s:Button id="button" click="mover.play()"/>
在這個例子裏，我們還可以通過設置valueBy來設置移動的相對值。也可以只設置valueTo屬性。當然出來的效果是不一樣的。
如果你只設置了valueBy,那每次都是從當前位置再移動一段距離。如果只設置了valueTo，那按第一次後，以後再按就沒效果了
。你可以在一個Animate裏設置多個SimpleMotionPath來達到同時往不同方向移動的效果。比如下面這段代碼：
<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>
使用基本的特效
在上面的例子裏，我們很直接地設置了特效需要的屬性的名字。當播放特效時，動畫效果是通過定時更改目標對象的屬性來達到的。
雖然直接用Animate你可以搞出任何你想要的特效，不過Flex 4已經包含了一些常用的特效。比如上面的效用就有對應的Move類可以
完成。大多數情況下，我們用用內置的特效類也就足夠了。
上面的例子可以用Move類來改寫：
<s:Move id="mover" target="{button}" xTo="100" yTo="200"/>
改過的代碼比舊代碼緊湊多了。Flex 4裏有好多這樣基本的特效類。比如Resize，Scale,Rotate,Fade,AnimateColor。
下面就來看看這些特效的是怎麼用的。
Resize特效
Resize特效就是Animate類的一個簡單封裝，它對目標對象的width和height屬性設置from、to和by。下面的例子把
按鈕的寬度從當前值設置爲100。，高度從當前值設置爲50
<s:Resize id="resizer" widthTo="100" heightTo="50" target="{button}"/>
想大多數特效一樣，Resize類也有會處理一些例外的情形，比如button設置了它的right屬性爲0。這時運行
上面的效果會發現按鈕是從右邊往左邊變大的。
變形特效：移動，旋轉，伸縮
這幾個特效關係緊密，因爲它們都影響了目標對象的變換矩陣。它們必須一起工作來保證它們不會提供互相沖突的變換矩陣。
比如，如果你要旋轉一個對象，你就改變了它的旋轉屬性，但同時對象的x，y的位置也可能會被改變（考慮下如果
對象是按它的中心來旋轉的，那麼它的左上面的座標就會被改變）。如果你還想給同樣一個對象應用Move效果，這2個
效果會保證目標對象能夠以可以理解的方式移動和旋轉。
在Flex 3裏，Move和Rotate效果是完全獨立的。大多數情況下，那樣也可以正常工作，但是也有可能因爲它們互相覆蓋彼此的
x和y屬性而出現詭異的效果。
在Flex4裏，在變換效果之間共享的屬性有：
autoCenterTransform：這個標識爲true的時候，特效將會圍繞目標對象的中心（width/2,height/2）來進行操作。比如，旋轉效果會繞着
對象的中心來旋轉。伸縮效果會以對象的中心來進行縮放。這個標識對Move效果沒有影響，不過需要記住的是，
Move效果是根據對象的中心來移動的，不是根據對象的左上角來移動。
transformX,transformY:如果autoCenterTransform沒有設置，特效會使用目標對象的變換中心。如果這些屬性同時被設置的話，
它們會互相覆蓋。比如默認的變換中心是左上角（x=0,y=0）.如果你把transformX屬性設置爲50，那麼變換的中心就變成了
（50,0).
Repetions設置：重複相關的屬性（repeatCount,repeatDelay,repeatBehavior)等有個要注意的地方：你給第一個特效設置的值
會被應用到後面的所有的效果。因爲這個原因，我們不建議在變換效果中設置repetion相關的屬性。在AS平臺參考文檔裏，甚至把repetition屬性
刪除了。不過，如果你在某一時刻只是應用一種效果，那麼repetitioin相關的屬性是可以放心設置的。
每種效果特有的屬性：除了上面這些變換效果都有的屬性外，每種變換效果都有自己特定的屬性：
Move：Flex 4裏的Move效果提供了xFrom,xTo,xBy,yFrom,yTo,yBy等。
Rotate：除了提供了angleFrom,angleTo2個屬性。Flex 4裏還提東了angleBy屬性。這些屬性可以讓目標對象繞着變換中心來旋轉一定的角度。
Scale:這是FLex 4裏新提出的效果（Flex 3裏有個類似的Zoom效果）。scaleXFrom，scaleXTo,scaleXBy,scaleYFrom,scaleYTo,
scaleYBy等屬性指定了對象的伸縮因子。注意這個效果和Resize效果是完全不同的。以上面的Resize按鈕的例子爲例，
雖然按鈕變大了， 但是按鈕上面的文字不會改變。而如果是Scale一個按鈕的話，不但按鈕的大小會變化，它裏面的文字也會變化。
下面這個稍微複雜的例子是變換效果的一個組合。
<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()"/>
Fade效果
Fade效果是Flex4裏一個很有用的過渡效果，它使得你可以讓對象淡入或淡出。這個效果在FLex3裏就有了。但是Flex4包含了
更多的邏輯來處理不同的情形。
使用Fade效果很簡單，設置alphaFrom,alphaTo,alphaBy就行了。
下面的代碼就是把一個按鈕淡出當前的界面（通過讓按鈕變透明）
<s:Fade target="{button}" alphaTo="0"/>
下面是一個更復雜的例子，使用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節點力的代碼很簡單，就是聲明瞭2個後面的狀態相關的屬性裏會用的狀態。transitions
說明，無論當前的對象的狀態從哪個轉換到哪個，它都會把Fade效果應用到button 0,1,2上。
接下來看看這些按鈕式怎麼聲明的。其中要注意的就是觸發可視化的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"/>
最後還需要一個按鈕來觸發狀態的改變：
<s:Button label="Toggle State" click="currentState=(currentState=='state1')?'state2':'state1'"/>
AnimateColor 效果
這是個Flex4裏新引入的類。AnimateColor默認會對目標對象上叫做"color"的屬性進行線性修改（就是對紅，蘭，綠通道分別進行加減操作）。這些默認行爲是可以變更的：你可以指定另外一個屬性來進行操作（估計是你想要操作的屬性不叫“color”）。你也可以指定另外的方式來操作顏色，而不只是對RGB通道進行線性的加減。
使用AnimateColor類很簡單。如果你不指定顏失色操作器，那麼默認使用RGBInterpolator,你可以用你自定義的操作器，也可以用
內置的HSBInterpolator, 這個操作會對顏色的HSB通道進行加減操作。
下面的例子假設你想在用戶按下鼠標的時候更改對象的外觀，讓它看起來像是被按下去的效果。這個例子使用一個橢圓來作爲目標對象，使用放射漸變來填充裏面的區域。把橢圓放進一個Group是爲了能接受用戶的的鼠標事件。
<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>
這個例子的運行結果就是當用戶在圓形上按下鼠標時，圓形會變暗，而釋放鼠標時會變亮。AnimateColor在這裏的作用是那個duration的設置。它會讓變暗或變亮的過程慢慢發生。從而看起來更具動畫效果。隨着對AnimateColor的熟悉，我們可以編寫自己的操作器來操作自己的屬性類型。
