Flex的动画效果与变换！（二）

原文出自

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

Flex的动画效果与变换！（二）

在上篇文章《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 这个类，我们也不能搞特殊，我们自定义的效果也要继承那个类，先看以下整个工厂类的代码：

 1  package  com.jiangzone.flex.effects {
 2       import  mx.effects.Effect;
 3       import  mx.effects.EffectInstance;
 4     
 5       public   class  MyEffect  extends  Effect {
 6           private  var _color:Number  =   0xFF0000 ;
 7                 
 8                   public  function set color(value:Number): void  {
 9                           _color  =  value;
10                  }
11 
12           public  function MyEffect(newTarget:Object  =   null ) {
13               super (newTarget);
14              instanceClass  =  MyEffectInstance;
15          }
16         
17          override  public  function getAffectedProperties( ):Array {
18               return  [];
19          }
20         
21          override  protected  function initInstance(instance:EffectInstance): 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:EffectInstance)
这两个方法都是要复写的，先说说getAffectedProperties( )这个方法，这个方法是获取被改变的属性值，怎么说呢，比如说，你做的动画效果如果要用到组件对象的一些属性的话，就要返回这些属性的名字，如：你的效果是对组件做旋转的话，则：

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

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

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

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

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

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

 1  package  com.jiangzone.flex.effects {
 2       import  mx.effects.EffectInstance;
 3       import  flash.display.Shape;
 4       import  flash.events.Event;
 5     
 6       public   class  MyEffectInstance  extends  EffectInstance {
 7                 
 8           private  var _color:Number;
 9           private  var shape:Shape;
10         
11           public  function set color(value:Number): void  {
12              _color  =  value;
13          }
14         
15           public  function MyEffectInstance(newTarget:Object) {
16               super (newTarget);
17          }
18         
19          override  public  function play( ): void  {
20               super .play( );
21              drawShape();
22          }
23         
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          }
34         
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代码：

 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了，就简单贴出该类的写法与注释吧：

 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;
 6     
 7       public   class  MyEffectInstance  extends  TweenEffectInstance {
 8                 
 9           private  var _color:Number;
10           private  var shape:Shape;
11         
12           public  function set color(value:Number): void  {
13              _color  =  value;
14          }
15         
16           // 构造函数
17           public  function MyEffectInstance(newTarget:Object) {
18               super (newTarget);
19          }
20         
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          }
36         
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          }
43         
44          override  public  function onTweenEnd(value:Object): void  {
45               // 当播放完时会自动调用该方法，这里就做删除该矩形的操作吧
46              target.parent.rawChildren.removeChild(shape);
47          }
48         
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  }