Flex的动画效果与变换！（三）完结篇
原文转自：
这篇文章是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>
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>
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值，就是改变程序的当前显示状态！之后动画效果就会触发了！
