<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    隨筆-31  評論-257  文章-0  trackbacks-0
    這篇文章是Flex動畫效果變換的最后一編了,這篇將會講述Flex中的“變面”(我自已的理解)技術(shù),即是Transitions!

    如果看過Flex SDK里面的自帶的例子程序,有一個叫“Flex Store”的應(yīng)用,在里面的手機列表中看某一個手機的詳細時,就是這種效果,不多說,這篇會比較簡單,先看看效果:


    看到了效果了吧,這種的變換不難實現(xiàn),再來看看代碼再解析:
     1 <?xml version="1.0" encoding="utf-8"?>
     2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="695" height="555">
     3 <mx:states>
     4 <mx:State name="A">
     5     <mx:SetProperty target="{windowA}" name="width" value="500"/>
     6     <mx:SetProperty target="{windowA}" name="height" value="300"/>
     7     <mx:SetProperty target="{windowC}" name="width" value="150"/>
     8     <mx:SetProperty target="{windowC}" name="height" value="150"/>
     9     <mx:SetProperty target="{windowC}" name="y" value="333"/>
    10     <mx:SetProperty target="{windowD}" name="x" value="373"/>
    11     <mx:SetProperty target="{windowD}" name="width" value="150"/>
    12     <mx:SetProperty target="{windowD}" name="height" value="150"/>
    13     <mx:SetProperty target="{windowD}" name="y" value="333"/>
    14     <mx:SetProperty target="{windowB}" name="x" value="23"/>
    15     <mx:SetProperty target="{windowB}" name="y" value="333"/>
    16     <mx:SetProperty target="{windowB}" name="width" value="150"/>
    17     <mx:SetProperty target="{windowB}" name="height" value="150"/>
    18     <mx:SetProperty target="{windowC}" name="x" value="200"/>
    19 </mx:State>
    20 <mx:State name="B">
    21     <mx:SetProperty target="{windowD}" name="width" value="150"/>
    22     <mx:SetProperty target="{windowD}" name="height" value="150"/>
    23     <mx:SetProperty target="{windowC}" name="width" value="150"/>
    24     <mx:SetProperty target="{windowC}" name="height" value="150"/>
    25     <mx:SetProperty target="{windowA}" name="width" value="150"/>
    26     <mx:SetProperty target="{windowA}" name="height" value="150"/>
    27     <mx:SetProperty target="{windowB}" name="width" value="500"/>
    28     <mx:SetProperty target="{windowB}" name="height" value="300"/>
    29     <mx:SetProperty target="{windowA}" name="y" value="333"/>
    30     <mx:SetProperty target="{windowC}" name="x" value="200"/>
    31     <mx:SetProperty target="{windowC}" name="y" value="333"/>
    32     <mx:SetProperty target="{windowB}" name="x" value="23"/>
    33     <mx:SetProperty target="{windowD}" name="x" value="373"/>
    34     <mx:SetProperty target="{windowD}" name="y" value="333"/>
    35 </mx:State>
    36 <mx:State name="C">
    37     <mx:SetProperty target="{windowD}" name="width" value="150"/>
    38     <mx:SetProperty target="{windowD}" name="height" value="150"/>
    39     <mx:SetProperty target="{windowB}" name="width" value="150"/>
    40     <mx:SetProperty target="{windowB}" name="height" value="150"/>
    41     <mx:SetProperty target="{windowA}" name="width" value="150"/>
    42     <mx:SetProperty target="{windowA}" name="height" value="150"/>
    43     <mx:SetProperty target="{windowC}" name="width" value="500"/>
    44     <mx:SetProperty target="{windowC}" name="height" value="300"/>
    45     <mx:SetProperty target="{windowA}" name="y" value="333"/>
    46     <mx:SetProperty target="{windowB}" name="x" value="200"/>
    47     <mx:SetProperty target="{windowB}" name="y" value="333"/>
    48     <mx:SetProperty target="{windowC}" name="x" value="23"/>
    49     <mx:SetProperty target="{windowC}" name="y" value="19"/>
    50     <mx:SetProperty target="{windowD}" name="x" value="373"/>
    51     <mx:SetProperty target="{windowD}" name="y" value="333"/>
    52 </mx:State>
    53 <mx:State name="D">
    54 <mx:SetProperty target="{windowC}" name="width" value="150"/>
    55 <mx:SetProperty target="{windowC}" name="height" value="150"/>
    56 <mx:SetProperty target="{windowB}" name="width" value="150"/>
    57 <mx:SetProperty target="{windowB}" name="height" value="150"/>
    58 <mx:SetProperty target="{windowA}" name="width" value="150"/>
    59 <mx:SetProperty target="{windowA}" name="height" value="150"/>
    60 <mx:SetProperty target="{windowD}" name="width" value="500"/>
    61 <mx:SetProperty target="{windowD}" name="height" value="300"/>
    62 <mx:SetProperty target="{windowA}" name="y" value="333"/>
    63 <mx:SetProperty target="{windowB}" name="x" value="200"/>
    64 <mx:SetProperty target="{windowB}" name="y" value="333"/>
    65 <mx:SetProperty target="{windowD}" name="x" value="23"/>
    66 <mx:SetProperty target="{windowD}" name="y" value="19"/>
    67 <mx:SetProperty target="{windowC}" name="x" value="373"/>
    68 <mx:SetProperty target="{windowC}" name="y" value="333"/>
    69 </mx:State>
    70 </mx:states>
    71 <mx:transitions>
    72 <mx:Transition fromState="*" toState="*">
    73 <mx:Parallel targets="{[windowA, windowB, windowC, windowD]}">
    74 <mx:Move />
    75 <mx:Resize />
    76 </mx:Parallel>
    77 </mx:Transition>
    78 </mx:transitions>
    79 <mx:TitleWindow x="23" y="19" width="250" height="200" layout="absolute" title="A" id="windowA" click="currentState='A'" />
    80 <mx:TitleWindow x="309" y="19" width="250" height="200" layout="absolute" title="B" id="windowB" click="currentState='B'" />
    81 <mx:TitleWindow x="23" y="260" width="250" height="200" layout="absolute" title="C" id="windowC" click="currentState='C'" />
    82 <mx:TitleWindow x="309" y="260" width="250" height="200" layout="absolute" title="D" id="windowD" click="currentState='D'" />
    83 </mx:Application>


    代碼會比較多,我們先看看<mx:states>標簽,它是一個集合,就是你的程序有多少個狀態(tài),什么是狀態(tài)呢?我自已理解就即是有多少個“面譜”,即是現(xiàn)在程序里面有四個顯示界面狀態(tài),所以里面有四個<mx:State>標簽,每個<mx:State>狀態(tài)都需要有一個名字name屬性,以區(qū)分是哪個界面狀態(tài),在每個狀態(tài)里面都有很多<mx:SetProperty>的標簽,看英文都知道了,該標簽用于設(shè)置這個狀態(tài)下的所有界面元素的屬性(組件的屬性),因為每個界面狀態(tài)中各個組件的大小布局都不同,所以在狀態(tài)標簽里就要預(yù)先設(shè)置好該狀態(tài)下的組件的位置與大小,那個target="{windowC}"屬性就是設(shè)置你要設(shè)置的哪個組件的名字拉,name="height"就是你要設(shè)置的屬性value="333"就是你要設(shè)置該屬性的值,我們細心看看的話,可能會發(fā)現(xiàn),每個狀態(tài)里面設(shè)置的屬性,都是width,height,x,y這四個屬性,我們看看上面的最終效果就知道無論切換哪個狀態(tài),組件間的變換來來去去都是移動位置與大小改變,就是說當你變換狀態(tài)時,需要改動哪些屬性的,就將它的目標值設(shè)置在<mx:SetProperty>標簽里。再看看下面的<mx:transitions>標簽,這個也是個集合,里面放著不同的變換方法<mx:Transition>,我們來看看變換標簽的代碼:
    1 <mx:Transition fromState="*" toState="*">
    2 <mx:Parallel targets="{[windowA, windowB, windowC, windowD]}">
    3 <mx:Move />
    4 <mx:Resize />
    5 </mx:Parallel>
    6 </mx:Transition>

    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)時,才會產(chǎn)生以上的變換動畫效果,如果不附合該規(guī)則如A切換到B狀態(tài)的話,則只會按狀態(tài)的屬性設(shè)置值來直接生成視圖,而沒有動畫漸變效果了。如果填上“*”的話,就是無論是哪個狀態(tài)切換到哪個,都會運行動畫效果,至于變換期間用到哪種動畫效果來進行漸變,就在它的下級標簽里定義了,這里它用到了<mx:Parallel>并列播放移動與重整大小的動畫效果,之前文章講過,這里不多說了。基本上,一個變換就做好了,但我們還需要觸發(fā)它,也就是去改變程序當前的顯示狀態(tài):click="currentState='A'" 在每個組件的click事件里,改變程序的currentState值,就是改變程序的當前顯示狀態(tài)!之后動畫效果就會觸發(fā)了!

    遲點有時間,再做一個3D的動畫效果,將會用到PV3D的框架,再整理一個代碼與教程也貼出來跟大家分享吧,不過不知道大家對PV3D這個東東熟悉不,不熟悉的話,可能看得痛苦點,至于PV3D方面的教程,我也看看抽點時間寫寫吧!先謝過大家的支持!
    posted on 2008-07-29 14:28 姜大叔 閱讀(6900) 評論(6)  編輯  收藏 所屬分類: Flash/Flex

    評論:
    # re: Flex的動畫效果與變換!(三)(完) 2008-08-21 11:28 | glemon
    一定要這樣寫一大串嗎?不能通過判斷狀態(tài)和運算的方式來計算目標位置嗎?MXML不會這么不靈活嗎?  回復(fù)  更多評論
      
    # re: Flex的動畫效果與變換!(三)(完)[未登錄] 2008-11-18 14:56 | zhou
    應(yīng)該是可以簡化的,提供一個函數(shù)。在state 的activate事件里調(diào)用。這樣簡潔通用一些。樓主只是舉例而已。  回復(fù)  更多評論
      
    # re: Flex的動畫效果與變換!(三)(完) 2009-09-27 17:27 | 加油仔
    看你的flex文章收獲不少,更提高了對flex的好奇與喜愛。謝謝你。還希望你加油啊,我會常來的。  回復(fù)  更多評論
      
    # re: Flex的動畫效果與變換!(三)(完) 2009-11-04 11:52 | 靜候良機
    不錯的例子,既學(xué)習(xí)了State,又學(xué)習(xí)Transition;但是在效果方面應(yīng)用的稍微少了一些;
    我感覺樓主的意思,是過程,而不是結(jié)果,如果為了結(jié)果,可以時代碼更簡潔一下;
    收藏樓主的博客,多多向你學(xué)習(xí)  回復(fù)  更多評論
      
    # re: Flex的動畫效果與變換!(三)(完) 2010-07-28 16:50 | 阿斯頓
    不多,學(xué)到了不少的東西  回復(fù)  更多評論
      
    # re: Flex的動畫效果與變換!(三)(完) 2011-10-07 17:00 | flex初學(xué)者
    請問還有別的簡短的算法嗎?可以不要將那些寫得那么死嗎?  回復(fù)  更多評論
      
    主站蜘蛛池模板: 亚洲精品乱码久久久久久不卡| 免费大片黄在线观看yw| 国产禁女女网站免费看| 亚洲色大成网站www尤物| 三年片在线观看免费观看高清电影| 亚洲同性男gay网站在线观看| 在线观看免费视频资源| 亚洲冬月枫中文字幕在线看| 歪歪漫画在线观看官网免费阅读| 亚洲一本一道一区二区三区| 色www永久免费视频| 日韩在线观看免费| 国产亚洲精品自在线观看| 免费观看成人久久网免费观看| 久久亚洲sm情趣捆绑调教 | 亚洲黄色中文字幕| 114一级毛片免费| 亚洲第一综合天堂另类专| 亚洲国产精品尤物yw在线 | 成人午夜影视全部免费看| 亚洲精品成人无限看| 97公开免费视频| 亚洲国产无线乱码在线观看 | 亚洲精品成人久久久| A片在线免费观看| 亚洲专区一路线二| 国产免费观看a大片的网站| 国产成人无码区免费网站| 亚洲欧洲日韩国产| 亚洲高清无码专区视频| 91大神免费观看| 四虎精品成人免费视频| 亚洲欧洲第一a在线观看| 日韩免费一区二区三区| 免费看成人AA片无码视频吃奶| 亚洲AV成人影视在线观看| 亚洲综合精品网站| 无码日韩人妻av一区免费| japanese色国产在线看免费| 亚洲伊人久久精品| 日本亚洲国产一区二区三区|