本文出自http://www.jiangzone.com.cn/，如需轉載，請註明出處！
原文地址：http://www.jiangzone.com.cn/article.asp?id=49
這篇文章是Flex動畫效果變換的最後一編了，這篇將會講述Flex中的“變面”（我自已的理解）技術，即是Transitions！
如果看過Flex SDK裏面的自帶的例子程序，有一個叫“Flex Store”的應用，在裏面的手機列表中看某一個手機的詳細時，就是這種效果，不多說，這篇會比較簡單，先看看效果：
看到了效果了吧，這種的變換不難實現，再來看看代碼再解析：
[複製到剪貼板]CODE:<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="695" height="555">
<mx:states>
<mx:State name="A">
<mx:SetProperty target="{windowA}" name="width" value="500"/>
<mx:SetProperty target="{windowA}" name="height" value="300"/>
<mx:SetProperty target="{windowC}" name="width" value="150"/>
<mx:SetProperty target="{windowC}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="y" value="333"/>
<mx:SetProperty target="{windowD}" name="x" value="373"/>
<mx:SetProperty target="{windowD}" name="width" value="150"/>
<mx:SetProperty target="{windowD}" name="height" value="150"/>
<mx:SetProperty target="{windowD}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="23"/>
<mx:SetProperty target="{windowB}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="width" value="150"/>
<mx:SetProperty target="{windowB}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="x" value="200"/>
</mx:State>
<mx:State name="B">
<mx:SetProperty target="{windowD}" name="width" value="150"/>
<mx:SetProperty target="{windowD}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="width" value="150"/>
<mx:SetProperty target="{windowC}" name="height" value="150"/>
<mx:SetProperty target="{windowA}" name="width" value="150"/>
<mx:SetProperty target="{windowA}" name="height" value="150"/>
<mx:SetProperty target="{windowB}" name="width" value="500"/>
<mx:SetProperty target="{windowB}" name="height" value="300"/>
<mx:SetProperty target="{windowA}" name="y" value="333"/>
<mx:SetProperty target="{windowC}" name="x" value="200"/>
<mx:SetProperty target="{windowC}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="23"/>
<mx:SetProperty target="{windowD}" name="x" value="373"/>
<mx:SetProperty target="{windowD}" name="y" value="333"/>
</mx:State>
<mx:State name="C">
<mx:SetProperty target="{windowD}" name="width" value="150"/>
<mx:SetProperty target="{windowD}" name="height" value="150"/>
<mx:SetProperty target="{windowB}" name="width" value="150"/>
<mx:SetProperty target="{windowB}" name="height" value="150"/>
<mx:SetProperty target="{windowA}" name="width" value="150"/>
<mx:SetProperty target="{windowA}" name="height" value="150"/>
<mx:SetProperty target="{windowC}" name="width" value="500"/>
<mx:SetProperty target="{windowC}" name="height" value="300"/>
<mx:SetProperty target="{windowA}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="200"/>
<mx:SetProperty target="{windowB}" name="y" value="333"/>
<mx:SetProperty target="{windowC}" name="x" value="23"/>
<mx:SetProperty target="{windowC}" name="y" value="19"/>
<mx:SetProperty target="{windowD}" name="x" value="373"/>
<mx:SetProperty target="{windowD}" name="y" value="333"/>
</mx:State>
<mx:State name="D">
<mx:SetProperty target="{windowC}" name="width" value="150"/>
<mx:SetProperty target="{windowC}" name="height" value="150"/>
<mx:SetProperty target="{windowB}" name="width" value="150"/>
<mx:SetProperty target="{windowB}" name="height" value="150"/>
<mx:SetProperty target="{windowA}" name="width" value="150"/>
<mx:SetProperty target="{windowA}" name="height" value="150"/>
<mx:SetProperty target="{windowD}" name="width" value="500"/>
<mx:SetProperty target="{windowD}" name="height" value="300"/>
<mx:SetProperty target="{windowA}" name="y" value="333"/>
<mx:SetProperty target="{windowB}" name="x" value="200"/>
<mx:SetProperty target="{windowB}" name="y" value="333"/>
<mx:SetProperty target="{windowD}" name="x" value="23"/>
<mx:SetProperty target="{windowD}" name="y" value="19"/>
<mx:SetProperty target="{windowC}" name="x" value="373"/>
<mx:SetProperty target="{windowC}" name="y" value="333"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Parallel targets="{[windowA, windowB, windowC, windowD]}">
<mx:Move />
<mx:Resize />
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:TitleWindow x="23" y="19" width="250" height="200" layout="absolute" title="A" id="windowA" click="currentState='A'" />
<mx:TitleWindow x="309" y="19" width="250" height="200" layout="absolute" title="B" id="windowB" click="currentState='B'" />
<mx:TitleWindow x="23" y="260" width="250" height="200" layout="absolute" title="C" id="windowC" click="currentState='C'" />
<mx:TitleWindow x="309" y="260" width="250" height="200" layout="absolute" title="D" id="windowD" click="currentState='D'" />
</mx:Application>
代碼會比較多，我們先看看<mx:states>標籤，它是一個集合，就是你的程序有多少個狀態，什麼是狀態呢？我自已理解就即是有多少個“面譜”，即是現在程序裏面有四個顯示界面狀態，所以裏面有四個<mx:State>標籤，每個<mx:State>狀態都需要有一個名字name屬性，以區分是哪個界面狀態，在每個狀態裏面都有很多<mx:SetProperty>的標籤，看英文都知道了，該標籤用於設置這個狀態下的所有界面元素的屬性（組件的屬性），因爲每個界面狀態中各個組件的大小布局都不同，所以在狀態標籤裏就要預先設置好該狀態下的組件的位置與大小，那個target="{windowC}"屬性就是設置你要設置的哪個組件的名字拉，name="height"就是你要設置的屬性value="333"就是你要設置該屬性的值，我們細心看看的話，可能會發現，每個狀態裏面設置的屬性，都是width,height,x,y這四個屬性，我們看看上面的最終效果就知道無論切換哪個狀態，組件間的變換來來去去都是移動位置與大小改變，就是說當你變換狀態時，需要改動哪些屬性的，就將它的目標值設置在<mx:SetProperty>標籤裏。再看看下面的<mx:transitions>標籤，這個也是個集合，裏面放着不同的變換方法<mx:Transition>，我們來看看變換標籤的代碼：
[複製到剪貼板]CODE:<mx:Transition fromState="*" toState="*">
<mx:Parallel targets="{[windowA, windowB, windowC, windowD]}">
<mx:Move />
<mx:Resize />
</mx:Parallel>
</mx:Transition>
formState與toState屬性是要設置該狀態變換是怎樣觸發的，裏面要填上狀態的名字，<mx:State name="C"> C就是狀態的名字，即是如果你formState="A",toState="C"的話，只有從A狀態切換到C狀態時，纔會產生以上的變換動畫效果，如果不附合該規則如A切換到B狀態的話，則只會按狀態的屬性設置值來直接生成視圖，而沒有動畫漸變效果了。如果填上“*”的話，就是無論是哪個狀態切換到哪個，都會運行動畫效果，至於變換期間用到哪種動畫效果來進行漸變，就在它的下級標籤裏定義了，這裏它用到了<mx:Parallel>並列播放移動與重整大小的動畫效果，之前文章講過，這裏不多說了。基本上，一個變換就做好了，但我們還需要觸發它，也就是去改變程序當前的顯示狀態：click="currentState='A'" 在每個組件的click事件裏，改變程序的currentState值，就是改變程序的當前顯示狀態！之後動畫效果就會觸發了！
遲點有時間，再做一個3D的動畫效果，將會用到PV3D的框架，再整理一個代碼與教程也貼出來跟大家分享吧，不過不知道大家對PV3D這個東東熟悉不，不熟悉的話，可能看得痛苦點，至於PV3D方面的教程，我也看看抽點時間寫寫吧！先謝過大家的支持！