Flex动画效果与变换(二)
转自：http://xinsync.xju.edu.cn/index.php/archives/1305


很多开发者都并不满足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 这个类，我们也不能搞特殊，我们自定义的效果也要继承那个类，先看以下整个工厂类的代码：

package com.jiangzone.flex.effects { import mx.effects.effectClasses.TweenEffectInstance; import flash.display.Shape; import flash.events.Event; import mx.effects.Tween; public class MyEffectInstance extends TweenEffectInstance { private var _color:Number; private var shape:Shape; public function set color(value:Number):void { _color = value; } //构造函数 public function MyEffectInstance(newTarget:Object) { super(newTarget); } //同样的要重写play()方法与调用父类同名方法 override public function play( ):void { super.play(); drawShape(); //先创建一个矩形 /*注意：用Tween效果写法的话，就一定要创建一个Tween对象； 第一个参数是侦听器，即侦听Update与End的，这两个方法都在这个类里，所以这里就写this； 第二和第三个参数都是一个数组；二个参数是初始值数组，第三个是结果值数组，都要一一对应，第四个是变化时间； 这里的是[1,1]分别是初始时的scale比例与alpha，[3,0]就是最终结果数值；系统会自动在1000毫秒里平分这些值来得到渐变效果；并将每一次数值的改变时调用Update方法，结束后调用End方法；你也可以将时间的参数发布到工厂类属性里，可以方便设置播放时间，像Flex自带效果一样 */ new Tween(this,[1,1],[3,0],1000); } override public function onTweenUpdate(value:Object):void{ //这里将改变的数值应用到组件对象中。注意：也要与上面的数值数组相对应。 shape.scaleX = Number(value[0]); shape.scaleY = Number(value[0]); shape.alpha = Number(value[1]); } override public function onTweenEnd(value:Object):void { //当播放完时会自动调用该方法，这里就做删除该矩形的操作吧 target.parent.rawChildren.removeChild(shape); } private function drawShape():void{ shape = new Shape(); shape.graphics.beginFill(_color); shape.graphics.drawRect(target.width * -0.5,target.height * -0.5,target.width,target.height); shape.graphics.endFill(); shape.x = target.x + target.width * 0.5; shape.y = target.y + target.height * 0.5; target.parent.rawChildren.addChild(shape); } } }