<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中的“變面”(我自已的理解)技術,即是Transitions!

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


    看到了效果了吧,這種的變換不難實現,再來看看代碼再解析:
     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>標簽,它是一個集合,就是你的程序有多少個狀態,什么是狀態呢?我自已理解就即是有多少個“面譜”,即是現在程序里面有四個顯示界面狀態,所以里面有四個<mx:State>標簽,每個<mx:State>狀態都需要有一個名字name屬性,以區分是哪個界面狀態,在每個狀態里面都有很多<mx:SetProperty>的標簽,看英文都知道了,該標簽用于設置這個狀態下的所有界面元素的屬性(組件的屬性),因為每個界面狀態中各個組件的大小布局都不同,所以在狀態標簽里就要預先設置好該狀態下的組件的位置與大小,那個target="{windowC}"屬性就是設置你要設置的哪個組件的名字拉,name="height"就是你要設置的屬性value="333"就是你要設置該屬性的值,我們細心看看的話,可能會發現,每個狀態里面設置的屬性,都是width,height,x,y這四個屬性,我們看看上面的最終效果就知道無論切換哪個狀態,組件間的變換來來去去都是移動位置與大小改變,就是說當你變換狀態時,需要改動哪些屬性的,就將它的目標值設置在<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屬性是要設置該狀態變換是怎樣觸發的,里面要填上狀態的名字,<mx:State name="C">   C就是狀態的名字,即是如果你formState="A",toState="C"的話,只有從A狀態切換到C狀態時,才會產生以上的變換動畫效果,如果不附合該規則如A切換到B狀態的話,則只會按狀態的屬性設置值來直接生成視圖,而沒有動畫漸變效果了。如果填上“*”的話,就是無論是哪個狀態切換到哪個,都會運行動畫效果,至于變換期間用到哪種動畫效果來進行漸變,就在它的下級標簽里定義了,這里它用到了<mx:Parallel>并列播放移動與重整大小的動畫效果,之前文章講過,這里不多說了。基本上,一個變換就做好了,但我們還需要觸發它,也就是去改變程序當前的顯示狀態:click="currentState='A'" 在每個組件的click事件里,改變程序的currentState值,就是改變程序的當前顯示狀態!之后動畫效果就會觸發了!

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

    評論:
    # re: Flex的動畫效果與變換!(三)(完) 2008-08-21 11:28 | glemon
    一定要這樣寫一大串嗎?不能通過判斷狀態和運算的方式來計算目標位置嗎?MXML不會這么不靈活嗎?  回復  更多評論
      
    # re: Flex的動畫效果與變換!(三)(完)[未登錄] 2008-11-18 14:56 | zhou
    應該是可以簡化的,提供一個函數。在state 的activate事件里調用。這樣簡潔通用一些。樓主只是舉例而已。  回復  更多評論
      
    # re: Flex的動畫效果與變換!(三)(完) 2009-09-27 17:27 | 加油仔
    看你的flex文章收獲不少,更提高了對flex的好奇與喜愛。謝謝你。還希望你加油啊,我會常來的。  回復  更多評論
      
    # re: Flex的動畫效果與變換!(三)(完) 2009-11-04 11:52 | 靜候良機
    不錯的例子,既學習了State,又學習Transition;但是在效果方面應用的稍微少了一些;
    我感覺樓主的意思,是過程,而不是結果,如果為了結果,可以時代碼更簡潔一下;
    收藏樓主的博客,多多向你學習  回復  更多評論
      
    # re: Flex的動畫效果與變換!(三)(完) 2010-07-28 16:50 | 阿斯頓
    不多,學到了不少的東西  回復  更多評論
      
    # re: Flex的動畫效果與變換!(三)(完) 2011-10-07 17:00 | flex初學者
    請問還有別的簡短的算法嗎?可以不要將那些寫得那么死嗎?  回復  更多評論
      
    主站蜘蛛池模板: 亚洲国产香蕉碰碰人人| 国产偷国产偷亚洲清高APP| 国产成人午夜精品免费视频| 亚洲1区1区3区4区产品乱码芒果| 全免费一级毛片在线播放| 男女拍拍拍免费视频网站| 亚洲一级毛片在线播放| 亚洲不卡AV影片在线播放| 一区二区三区无码视频免费福利| 亚洲狠狠成人综合网| 国产亚洲精品成人AA片新蒲金 | 亚洲国产综合精品中文第一区| 国产成人yy免费视频| www在线观看播放免费视频日本| 亚洲天堂中文字幕| 成在线人永久免费视频播放| 久久国产免费一区二区三区| 亚洲а∨精品天堂在线| 亚洲av日韩av激情亚洲| 国产成人免费片在线视频观看| 无码人妻久久一区二区三区免费 | 中文字幕久精品免费视频| 亚洲欧美日韩综合俺去了| 亚洲国产第一站精品蜜芽| 日韩特黄特色大片免费视频| 久久综合国产乱子伦精品免费| 无码天堂va亚洲va在线va| 亚洲经典在线中文字幕| 亚洲色无码专区在线观看| 特级淫片国产免费高清视频| 99视频免费观看| 成人国产精品免费视频| 久久精品熟女亚洲av麻豆| 91亚洲国产成人久久精品网址| 中文字幕一精品亚洲无线一区| 日本无吗免费一二区| 波多野结衣中文字幕免费视频 | 精品亚洲成A人在线观看青青| 色播亚洲视频在线观看| 亚洲乱码国产乱码精品精| 免费国产在线观看|