這篇文章是Flex動(dòng)畫效果變換的最后一編了，這篇將會(huì)講述Flex中的“變面”（我自已的理解）技術(shù)，即是Transitions！

如果看過Flex SDK里面的自帶的例子程序，有一個(gè)叫“Flex Store”的應(yīng)用，在里面的手機(jī)列表中看某一個(gè)手機(jī)的詳細(xì)時(shí)，就是這種效果，不多說(shuō)，這篇會(huì)比較簡(jiǎn)單，先看看效果：


看到了效果了吧，這種的變換不難實(shí)現(xiàn)，再來(lái)看看代碼再解析：


代碼會(huì)比較多，我們先看看<mx:states>標(biāo)簽，它是一個(gè)集合，就是你的程序有多少個(gè)狀態(tài)，什么是狀態(tài)呢？我自已理解就即是有多少個(gè)“面譜”，即是現(xiàn)在程序里面有四個(gè)顯示界面狀態(tài)，所以里面有四個(gè)<mx:State>標(biāo)簽，每個(gè)<mx:State>狀態(tài)都需要有一個(gè)名字name屬性，以區(qū)分是哪個(gè)界面狀態(tài)，在每個(gè)狀態(tài)里面都有很多<mx:SetProperty>的標(biāo)簽，看英文都知道了，該標(biāo)簽用于設(shè)置這個(gè)狀態(tài)下的所有界面元素的屬性（組件的屬性），因?yàn)槊總€(gè)界面狀態(tài)中各個(gè)組件的大小布局都不同，所以在狀態(tài)標(biāo)簽里就要預(yù)先設(shè)置好該狀態(tài)下的組件的位置與大小，那個(gè)target="{windowC}"屬性就是設(shè)置你要設(shè)置的哪個(gè)組件的名字拉，name="height"就是你要設(shè)置的屬性value="333"就是你要設(shè)置該屬性的值，我們細(xì)心看看的話，可能會(huì)發(fā)現(xiàn)，每個(gè)狀態(tài)里面設(shè)置的屬性，都是width,height,x,y這四個(gè)屬性，我們看看上面的最終效果就知道無(wú)論切換哪個(gè)狀態(tài)，組件間的變換來(lái)來(lái)去去都是移動(dòng)位置與大小改變，就是說(shuō)當(dāng)你變換狀態(tài)時(shí)，需要改動(dòng)哪些屬性的，就將它的目標(biāo)值設(shè)置在<mx:SetProperty>標(biāo)簽里。再看看下面的<mx:transitions>標(biāo)簽，這個(gè)也是個(gè)集合，里面放著不同的變換方法<mx:Transition>，我們來(lái)看看變換標(biāo)簽的代碼：

formState與toState屬性是要設(shè)置該狀態(tài)變換是怎樣觸發(fā)的，里面要填上狀態(tài)的名字，<mx:State name="C">   C就是狀態(tài)的名字，即是如果你formState="A",toState="C"的話，只有從A狀態(tài)切換到C狀態(tài)時(shí)，才會(huì)產(chǎn)生以上的變換動(dòng)畫效果，如果不附合該規(guī)則如A切換到B狀態(tài)的話，則只會(huì)按狀態(tài)的屬性設(shè)置值來(lái)直接生成視圖，而沒有動(dòng)畫漸變效果了。如果填上“*”的話，就是無(wú)論是哪個(gè)狀態(tài)切換到哪個(gè)，都會(huì)運(yùn)行動(dòng)畫效果，至于變換期間用到哪種動(dòng)畫效果來(lái)進(jìn)行漸變，就在它的下級(jí)標(biāo)簽里定義了，這里它用到了<mx:Parallel>并列播放移動(dòng)與重整大小的動(dòng)畫效果，之前文章講過，這里不多說(shuō)了。基本上，一個(gè)變換就做好了，但我們還需要觸發(fā)它，也就是去改變程序當(dāng)前的顯示狀態(tài)：click="currentState='A'" 在每個(gè)組件的click事件里，改變程序的currentState值，就是改變程序的當(dāng)前顯示狀態(tài)！之后動(dòng)畫效果就會(huì)觸發(fā)了！

遲點(diǎn)有時(shí)間，再做一個(gè)3D的動(dòng)畫效果，將會(huì)用到PV3D的框架，再整理一個(gè)代碼與教程也貼出來(lái)跟大家分享吧，不過不知道大家對(duì)PV3D這個(gè)東東熟悉不，不熟悉的話，可能看得痛苦點(diǎn)，至于PV3D方面的教程，我也看看抽點(diǎn)時(shí)間寫寫吧！先謝過大家的支持！