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

最新推荐文章于 2023-02-15 18:20:16 发布

remote_roamer

最新推荐文章于 2023-02-15 18:20:16 发布

阅读量1.2k

点赞数

本文介绍如何使用 Flex 的 Transitions 实现界面状态之间的平滑过渡动画，通过设置不同状态下的组件属性，并利用 Transition 效果完成动画变换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文转自：

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