FLEX的动画

1.使用自带效果

在Flex里面不像在Flash里面随意制作动画了，Flex更趋向于应用程序，而不是动画制作了，所以没有了时间轴的概念。在Flex中使用动画效果，可以用Flex自带的Effect，或者自已定制Effect，因为很多人都想借Flash里面的一样操作Flex，比如在Flash里面做一个动态按钮很容易，当鼠标移动到上面时，会有很多发光的点跑出来（荧火虫效果），这种效果在Flash十分容易实现，但在Flex里面要实现这种效果就不是那么简单的了，下面说说在Flex里的的动务效果的使用与自定义制作。

首先介绍一下Flex里面的自带的效果有以下几种：
Blur 模糊效果
Move 移动效果
Fade 淡入淡出效果
Glow 发光效果
Resize 调整大小效果
Rotate 旋转效果
Zoom 缩放效果
WipeLeft 用遮罩实现画面收放效果，下同，分别为不同方向
WipeRight
WipeUp
WipeDown

不同的效果所需要设置的属性也不一样，比如Blur效果需要设置它的X与Y轴的模糊像素
<mx:Blur id="blur" blurXFrom="0" blurXTo="10" />
而Move效果需要设置移动的位置信息
<mx:Move id="moveEffect" xFrom="-100" />
其它设置可以参考Flex语言参考

下面说说如何使用这些效果。要运行这些效果有两种方法：一种是调用该效果的play()方法，另外一种是使用触发器来触发效果。
（1）使用play()方法：

以下代码：

 

Flex代码
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3. <mx:Script>
  4. <![CDATA[
  5. private function onClick(event:Event):void {
  6. be.target = event.currentTarget;
  7. be.play( );
  8. }
  9. ]]>
  10. </mx:Script>
  12. <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="1000" />
  14. <mx:Panel id="p" width="200" height="180" click="onClick(event)" />
  15. </mx:Application>


在代码中看到，要使用效果，先定好一个效果，如上面的<mx:Blur ...>该标签就是模糊效果的MXML标签，定好效果后在Panel的点击事件里再对该效果进行一些设置，如be.target = event.currentTarget 设置该效果将要应用到的目标组件(Component)，之后再调用play()方法后，该效果就会应用在Panel上面播放！

（2）使用触发器播放效果：
使用触发器播放效果的话，可以不用写ActionScript代码，直接在组件的效果触发器上指明使用哪个效果就可以了，比较简单明了，但就不能进行更多的属性定制，而用AS控制播放的话，可以对效果进行很多的设置再相应根据情况播放，先看看触发器播放的代码：

 

Flex代码
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  4. <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="2000" />
  6. <mx:Panel id="p" width="200" height="180" creationCompleteEffect="{be}" />
  7. </mx:Application>

 


看以上代码，先写好了Blur的效果并设置好属性后，duration="2000"这个是播放的时间以毫秒为单位。
在Panel标签里有这样一句：creationCompleteEffect="{be}" 这个就是触发器，是该Panel组件的效果触发器，当Panel组件加载完成时，会由系统自动调用该效果触发器，触发器里面指了触发 be 这个Blur效果
在Flex里面还有很多触发器如：
addedEffect 被添加进容器时触发效果
removedEffect 被从容器中移除时触发效果
creationCompleteEffect 被创建成功时触发效果
focusInEffect 获得焦点时触发
focusOutEffect 失去焦点时触发
hideEffect 被隐藏时(visible=false)触发
showEffect 被显示时(visible=true)触发
rollOverEffect 鼠标经过时触发
rollOutEffect 鼠标离开时触发
mouseDownEffect 鼠标按下时触发
mouseUpEffect 鼠标松开时触发
moveEffect 被移动时触发
resizeEffect 被重整大小时触发

注意：这些都是效果触发器，不要与事件触发器混乱了。事件触发器是rollOver，事件触发器与效果触发器差不多，事件触发器是当用户执行相就操作时触发事件，将会调用自定的事件触发处理函数，而效果触发器是执行相应操作时被触发并由系统自动调用所定的效果的play()方法。

现在说说效果的一些其它属性：
每个效果都有reverse( );方法，该方法是反向播放，原本由小到大的变化，而调用reverse( );后再运行play()的话，效果将会从大到小进行播放。
但要注意的一点是，reverse( );不会自动播放，即是单单调用reverse( );的话，效果并不会播放，他只会记录该效果为倒转，而要再调用play()后倒转效果才会开始播放。而调用pause( )与resume( )就是暂停与继续播放效果

startDelay这个属性是设置效果的播放延时，以毫秒为单位，即要等待多少毫秒后效果才开始播放，如：
<mx:Blur id="be" blurXTo="50" startDelay="3000" />
该模糊效果将会在调用play()之后3秒才开始播放

repeatCount这个属性是设置效果的重复次数，默认为1，设置为0的话就是不停循环播放
<mx:Blur id="be" blurXTo="50" startDelay="3000" repeatCount="5" />

每个效果都有两个事件：effectStart 与 effectEnd
你可以在该效果事件的处理函数里面对效果作相应的操作，如：

 

Flex代码
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3. <mx:Script>
  4. <![CDATA[
  5. import mx.events.EffectEvent;
  6. public function onEffEnd(e:EffectEvent):void{
  7. e.effectInstance.reverse();
  8. e.effectInstance.play();
  9. }
  10. ]]>
  11. </mx:Script>
  12. <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="2000" />
  14. <mx:Panel id="p" width="200" height="180" creationCompleteEffect="{be}" effectEnd="onEffEnd(event)" />
  15. </mx:Application>


当效果播放完时，系统将会自动触发effectEnd事件，在处理函数里面，将该效果Instance即现时播放的效果实例进行倒转并播放，当播放完，又会触发effectEnd事伯，这样一直循环！

现在再来说说效果的组合：
通常如果你觉得只应用一个效果很单调的话，可以进行效果组合应用，即多个效果同时播放或者顺序播放，
如，当加载页面时，你想Panel先模糊到一定程度，再将Panel移动到某个位置，再把Panel还原成原来的清淅度（即消退模糊）。这样分析一下，一共用了三个效果，一，先应用Blur（由清至模）效果，当Blur完成时，再应用Move效果，当Move完成时，再应用另外一个Blur（由模至清）效果。这样三个效果组合就是按顺序组合，先后运行。

 

看看代码：

 

Flex代码
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  4. <mx:Sequence id="sequenceEffect">
  5. <mx:Blur id="beOut" blurXTo="50" blurYTo="50" duration="500" />
  6. <mx:Move id="mv" xTo="200" yTo="150" duration="500" />
  7. <mx:Blur id="beIn" blurXFrom="50" blurYFrom="50" blurXTo="0" blurYTo="0" duration="500" />
  8. </mx:Sequence>
  10. <mx:Panel id="p" width="200" height="180" mouseDownEffect="sequenceEffect" />
  11. </mx:Application>

 

看以上代码，<mx:Sequence id="sequenceEffect">标签就是顺序组合效果标签，当应用sequenceEffect效果的时候，它会按顺序播放该标签里面的三个子效果。

另外的就是同时播放了，

 

Flex代码
  1. <mx:Parallel id="parallelEffect">
  2. <mx:Blur id="beOut" blurXTo="50" blurYTo="50" duration="500" />
  3. <mx:Move id="mv" xTo="200" yTo="150" duration="500" />
  4. </mx:Parallel>

 

这个标签就是同时播放的效果标签，放在它里面的子效果都会同时播放，即一边模糊一边移动。这个都可以自由组合，<mx:Parallel>与<mx:Sequence>标签都可以自由组合，例如先按顺序先播放模糊，再同时播放移动与隐藏等。这里就不多说了。

使用Flex自带的效果基本用法就这些，下篇文章将讨论自定义效果的制作，下篇将会详细说说这篇文章上面说到的 effectInstance 即实例与工厂的概念。

 

2.自己制作Flex动画

 

上面讲到了使用Flex系统里面自带的一些动来效果的使用，但很多开发者都并不满足Flex里提供的简单的渐变大小，透明，移动，遮罩等的效果，如果是Flash的开发者的话，更不用说了，在Flash，多数人都是随意的制作一些动画效果等，而且形态多变。但是不是Flex里就不能实现呢？肯定不是，在Flex里也可以自定义动画效果，只不过就是没有Flash里面那么简单随意了。不过熟悉了之后，也会觉得在Flex里制作动画也不是什么难事，不多说了，转入正题！

在这里我先介绍一下Flex里面的动画效果机制，在Flex里面要使用动画效果的话，先要创建一个效果标签，之后在组件里（如TextInput）写上效果触发器，但可能会有人问，如果程序里我就只定义一个移动效果
<mx:Move>，之后我程序里面有5个组件，每个组件的动画效果都指向这个Move效果，那么它是不是组件一运行了效果后，组件二再触发效果，是不是组件一的效果会消失才会到组件二里播放？其它不是，虽然我们只定义了一个Move，但我们定义的只是Move效果的工厂，这里就用到了设计模式中的“工厂方法”模式，其实5个组件都可以同时运行效果，而5个效果都是不同的一个实例，彼此独立。所谓工厂方法模式，就好比是一家衣服制造工厂，A走进这家工厂说要一件衣服，工厂就制作一件合适A的Size的衣服，B进去，就会生产合适B的衣服，但A与B的衣服都是一样的。就好等于面向对象中的类与对象的关系一样。（我可能说多了-_-）
效果运行的时候，其实运行的不是Move这个对象，而是MoveInstance这个对象，Move只是工厂，既然一个动画效果就主要分这两大部份，我们就先建造一个工厂吧！

在Flex里面所有的效果的工厂都是继承自 mx.effects.Effect 这个类，我们也不能搞特殊，我们自定义的效果也要继承那个类，先看以下整个工厂类的代码：

 

Flex代码
  1. package com.jiangzone.flex.effects {
  2. import mx.effects.Effect;
  3. import mx.effects.IEffectInstance;
  5. public class MyEffect extends Effect {
  6. private var _color:Number = 0xFF0000;
  8. public function set color(value:Number):void {
  9. _color = value;
  10. }
  12. public function MyEffect(newTarget:Object = null) {
  13. super(newTarget);
  14. instanceClass = MyEffectInstance;
  15. }
  17. override public function getAffectedProperties( ):Array {
  18. return [];
  19. }
  21. override protected function initInstance(instance:IEffectInstance):void {
  22. super.initInstance(instance);
  23. MyEffectInstance(instance).color = _color;
  24. }
  25. }
  26. }


大家看看上面的代码，其中先看构造函数，构造函数要接收一个默认为空的Object对象
public function MyEffect(newTarget:Object = null)
之后在该构造函数里面调用父类的构造函数，并且将instanceClass这个属性设置为你的该效果的实例类，因为这个类是工厂类，所以要知道你这个工厂生产什么产品，即上面说的“衣服”，所以这里我们将其命名为MyEffectInstance，注意：在Flex中的所有效果实例类都是在工厂类后面加Instance，也不是一定，只是规范而已。还有注意，下面一会定义的实例类的类名一定要跟这里的一致。
大家还会看到，上面的代码中，复写（override）了二个方法：getAffectedProperties( )与initInstance(instance:IEffectInstance)
这两个方法都是要复写的，先说说getAffectedProperties( )这个方法，这个方法是获取被改变的属性值，怎么说呢，比如说，你做的动画效果如果要用到组件对象的一些属性的话，就要返回这些属性的名字，如：你的效果是对组件做旋转的话，则：

 

Flex代码
  1. override public function getAffectedProperties( ):Array {
  2. return ["rotation"];
  3. }

 

反正你做的效果需要对组件修改什么属性的话，都在这个方法里返回名字，修改多个属性的话就往数组里加就是了。
后面就是这个方法了initInstance，该方法接收一个instance:EffectInstance参数，也就是效果实例类啦，因为每个效果实例类都要继承EffectInstance类，所以这个方法里的参数写的是父类，在里面要做其它的话，需要将 instance 转换为你相应的效果类。在这个方法里面，也是要调用父类的同名方法：super.initInstance(instance);
基本上，一个工厂类就写好了，但这样只是最简单的写法，试想想，每个人穿衣服的Size不同，喜欢的颜色也不同，所以，是不是可以由用户来定义他们想要的效果的颜色等属性呢？当然，你对衣服有什么要求，都是向工厂提出的，没有人会对衣服说吧？所以，这些可设置的属性也是定义在工厂类里面，所以下面，我们为该衣服可定制颜色为例，在工厂类里面加入如下代码：

 

Flex代码
  1. private var _color:Number = 0xFF0000;
  2. public function set color(value:Number):void {
  3. _color = value;
  4. }

 

你想运行时的效果可以设置不同的颜色的话，就可以直接设置MyEffect的color属性，之后将这个属性传给效果实例类：

 

Java代码
  1. override protected function initInstance(instance:EffectInstance):void {
  2. super.initInstance(instance);
  3. MyEffectInstance(instance).color = _color;
  4. }

 

这些对效果实例类的设置，都是要定在initInstance方法里了，你想对运行时的效果设置什么属性的话，都要先告诉工厂类，之后工厂类在这个方法里面转嫁给实例类，这样，同一个效果，可以运行不同的颜色。但前提是你后面要写的实例类要有color这个属性。
现在已做好了工厂类了，下面要做效果实例类了，先贴出完整代码：

 

Flex代码
  1. package com.jiangzone.flex.effects {
  2. import mx.effects.EffectInstance;
  3. import flash.display.Shape;
  4. import flash.events.Event;
  6. public class MyEffectInstance extends EffectInstance {
  8. private var _color:Number;
  9. private var shape:Shape;
  11. public function set color(value:Number):void {
  12. _color = value;
  13. }
  15. public function MyEffectInstance(newTarget:Object) {
  16. super(newTarget);
  17. }
  19. override public function play( ):void {
  20. super.play( );
  21. drawShape();
  22. }
  24. private function drawShape():void{
  25. shape = new Shape();
  26. shape.graphics.beginFill(_color);
  27. shape.graphics.drawRect(target.width * -0.5,target.height * -0.5,target.width,target.height);
  28. shape.graphics.endFill();
  29. shape.x = target.x + target.width * 0.5;
  30. shape.y = target.y + target.height * 0.5;
  31. target.parent.rawChildren.addChild(shape);
  32. target.addEventListener(Event.ENTER_FRAME,onEnterFrame);
  33. }
  35. private function onEnterFrame(e:Event):void{
  36. shape.scaleX += 0.1;
  37. shape.scaleY += 0.1;
  38. shape.alpha -= 0.05;
  39. if(shape.alpha <= 0){
  40. target.parent.rawChildren.removeChild(shape);
  41. target.removeEventListener(Event.ENTER_FRAME,onEnterFrame);
  42. }
  43. }
  44. }
  45. }


我们看到，每一个动画效果实例类，都要继承自EffectInstance这个类，构造函数也是需要接收一个Object，这个Object其实就是你要应用到的组件对象，这个会是系统自动传递的，接收了Object后还要用该Object 调用父类的构造函数：super(newTarget);
之后还有一件必做的事，就是重写play()这个方法：override public function play( ):void
是不是对play()很熟悉？因为第一篇文章中，就用到这个方法来发动效果的播放的，所以，你需要做的动画编程都是在这个方法里。但还是要先调用父类的同名方法，super.play();之后的，就是你想怎么画就怎么画啦。我将画一个与要应用效果的组件一样大小的矩型，之后该矩形会放大并透明，效果都写在drawShape()方法里了。看到这个方法里面的代码，是不是跟Flash里的一样了？
这里再贴上MXML代码：

 

Flex代码
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml"
  3. xmlns:pf="com.jiangzone.flex.effects.*">
  4. <pf:MyEffect id="myEffect" color="0xFFFFFF" />
  5. <mx:VBox x="100" y="43">
  6. <mx:TextInput focusInEffect="{myEffect}" />
  7. <mx:TextInput focusInEffect="{myEffect}" />
  8. <mx:TextInput focusInEffect="{myEffect}" />
  9. <mx:TextInput focusInEffect="{myEffect}" />
  10. </mx:VBox>
  11. </mx:Application>


在这里，我用了ENTER_FRAME的写法，但是如果不用ENTER_FRAME方式制作动画的话，还有另外一种方法的，那就是Tween了，Tween是以“时间”为准，而ENTER_FRAME是以“帧”为准，其实到这里，一个基本的Flex自定义动画效果就完成了，但扩展一下的，还可以用Tween来实现，而且建议用Tween来写动画效果，易控制，清淅一点。用Tween实现的话，效果与写法都是差不多的，要用Tween就要将效果实例类继承自TweenEffectInstance这个类，并重写它的onTweenUpdate( )方法与onTweenEnd( )方法，这种Tween效果的写法，将会比ENTER_FRAME的写法方便，因为它根据的是时间，所以，你可以指定效果播放的时间，并且当播放完毕会自动调用onTweenEnd()方法，你可以在该方法里写一些处理操作，如释放资源等等
由于编幅关系，就不在这里详细介绍TweenEffectInstence了，就简单贴出该类的写法与注释吧：

 

Flex代码
  1. package com.jiangzone.flex.effects {
  2. import mx.effects.effectClasses.TweenEffectInstance;
  3. import flash.display.Shape;
  4. import flash.events.Event;
  5. import mx.effects.Tween;
  7. public class MyEffectInstance extends TweenEffectInstance {
  9. private var _color:Number;
  10. private var shape:Shape;
  12. public function set color(value:Number):void {
  13. _color = value;
  14. }
  16. //构造函数
  17. public function MyEffectInstance(newTarget:Object) {
  18. super(newTarget);
  19. }
  21. //同样的要重写play()方法与调用父类同名方法
  22. override public function play( ):void {
  23. super.play();
  24. drawShape(); //先创建一个矩形
  25. /*注意：用Tween效果写法的话，就一定要创建一个Tween对象
  26. 第一个参数是侦听器，即侦听Update与End的，这两个方法都在这个类里，
  27. 所以这里就写this,第二和第三个参数都是一个数组
  28. 第二个参数是初始值数组，第三个是结果值数组，都要一一对应，第四个是变化时间
  29. 这里的是[1,1]分别是初始时的scale比例与alpha，[3,0]就是最终结果数值
  30. 系统会自动在1000毫秒里平分这些值来得到渐变效果
  31. 并将每一次数值的改变时调用Update方法，结束后调用End方法
  32. 你也可以将时间的参数发布到工厂类属性里，可以方便设置播放时间，像Flex自带效果一样
  33. */
  34. new Tween(this,[1,1],[3,0],1000);
  35. }
  37. override public function onTweenUpdate(value:Object):void{
  38. //这里将改变的数值应用到组件对象中。注意：也要与上面的数值数组相对应。
  39. shape.scaleX = Number(value[0]);
  40. shape.scaleY = Number(value[0]);
  41. shape.alpha = Number(value[1]);
  42. }
  44. override public function onTweenEnd(value:Object):void {
  45. //当播放完时会自动调用该方法，这里就做删除该矩形的操作吧
  46. target.parent.rawChildren.removeChild(shape);
  47. }
  49. private function drawShape():void{
  50. shape = new Shape();
  51. shape.graphics.beginFill(_color);
  52. shape.graphics.drawRect(target.width * -0.5,target.height * -0.5,target.width,target.height);
  53. shape.graphics.endFill();
  54. shape.x = target.x + target.width * 0.5;
  55. shape.y = target.y + target.height * 0.5;
  56. target.parent.rawChildren.addChild(shape);
  57. }
  58. }
  59. }

就写到这里吧，关于Tween其它的，就留作为作业，让大家思考与探索吧！之后如果有时间的话，将会写完下篇文章介绍Flex的“变面”动画，即状态变换！这里先谢谢大家支持！


3.Flex的Transitions

 

这篇文章是Flex动画效果变换的最后一编了，这篇将会讲述Flex中的“变面”（我自已的理解）技术，即是Transitions！
如果看过Flex SDK里面的自带的例子程序，有一个叫“Flex Store”的应用，在里面的手机列表中看某一个手机的详细时，就是这种效果，不多说，这篇会比较简单.

 

看看代码再解析：

 

Flex代码
  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>，我们来看看变换标签的代码：

 

Flex代码
  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 2012-04-22 10:05  ycty  阅读(751)  评论(2)  编辑  收藏  举报