Flex的动画效果与变换！（三）完结篇

原文转自：

http://www.blogjava.net/cph8066/archive/2008/07/29/218410.html

 

这篇文章是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值，就是改变程序的当前显示状态！之后动画效果就会触发了！