随笔-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 姜大叔 阅读(6888) 评论(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初学者
请问还有别的简短的算法吗?可以不要将那些写得那么死吗?  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: