Flex的动画效果与变换!(二)
?Flex的动画效果与变换!(二)
?1?
package
?com.jiangzone.flex.effects?{
?2? ???? import ?mx.effects.Effect; ?3? ?mx.effects.EffectInstance; ?4? ??? ?5? public ? class ?MyEffect? extends ?Effect?{ ?6? ???????? private ?var?_color:Number? = 0xFF0000 ; ?7? ??????????????? ?8? ???????????????? ?function?set?color(value:Number): void ?{ ?9? ?????????????????????????_color? ?value; 10? ????????????????} 11? 12? ?function?MyEffect(newTarget:Object? null )?{ 13? ???????????? super (newTarget); 14? ????????????instanceClass? ?MyEffectInstance; 15? ????????} 16? ??????? 17? ????????override? ?function?getAffectedProperties(?):Array?{ 18? return ?[]; 19? 20? 21? protected ?function?initInstance(instance:EffectInstance): 22? .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?
2?
?[
"
rotation
];
3? } 反正你做的效果需要对组件修改什么属性的话,都在这个方法里返回名字,修改多个属性的话就往数组里加就是了。 后面就是这个方法了initInstance,该方法接收一个instance:EffectInstance参数,也就是效果实例类啦,因为每个效果实例类都要继承EffectInstance类,所以这个方法里的参数写的是父类,在里面要做其它的话,需要将 instance 转换为你相应的效果类。在这个方法里面,也是要调用父类的同名方法:super.initInstance(instance); 基本上,一个工厂类就写好了,但这样只是最简单的写法,试想想,每个人穿衣服的Size不同,喜欢的颜色也不同,所以,是不是可以由用户来定义他们想要的效果的颜色等属性呢?当然,你对衣服有什么要求,都是向工厂提出的,没有人会对衣服说吧?所以,这些可设置的属性也是定义在工厂类里面,所以下面,我们为该衣服可定制颜色为例,在工厂类里面加入如下代码: ????????_color?
4?
}
你想运行时的效果可以设置不同的颜色的话,就可以直接设置MyEffect的color属性,之后将这个属性传给效果实例类: ????????MyEffectInstance(instance).color?
}
这些对效果实例类的设置,都是要定在initInstance方法里了,你想对运行时的效果设置什么属性的话,都要先告诉工厂类,之后工厂类在这个方法里面转嫁给实例类,这样,同一个效果,可以运行不同的颜色。但前提是你后面要写的实例类要有color这个属性。 现在已做好了工厂类了,下面要做效果实例类了,先贴出完整代码: ?flash.display.Shape;
?flash.events.Event; ?MyEffectInstance? ?EffectInstance?{ ?var?_color:Number; ?var?shape:Shape; ????????????_color? ?function?MyEffectInstance(newTarget:Object)?{ ?function?play(?): .play(?); ????????????drawShape(); ?function?drawShape(): { ????????????shape? new ?Shape(); ????????????shape.graphics.beginFill(_color); 27? ????????????shape.graphics.drawRect(target.width? * - 0.5 ,target.height? 28? ????????????shape.graphics.endFill(); 29? ????????????shape.x? ?target.x? + ?target.width? 30? ????????????shape.y? ?target.y? ?target.height? 31? ????????????target.parent.rawChildren.addChild(shape); 32? ????????????target.addEventListener(Event.ENTER_FRAME,onEnterFrame); 33? 34? 35? ?function?onEnterFrame(e:Event): 36? ????????????shape.scaleX? += 0.1 37? ????????????shape.scaleY? 38? ????????????shape.alpha? -= 0.05 39? if (shape.alpha? <= 0 ){ 40? ????????????????target.parent.rawChildren.removeChild(shape); 41? ????????????????target.removeEventListener(Event.ENTER_FRAME,128); ">42? ????????????} 43? 44? 45? } 我们看到,每一个动画效果实例类,都要继承自EffectInstance这个类,构造函数也是需要接收一个Object,这个Object其实就是你要应用到的组件对象,这个会是系统自动传递的,接收了Object后还要用该Object 调用父类的构造函数:super(newTarget); 之后还有一件必做的事,就是重写play()这个方法:override public function play( ):void 是不是对play()很熟悉?因为第一篇文章中,就用到这个方法来发动效果的播放的,所以,你需要做的动画编程都是在这个方法里。但还是要先调用父类的同名方法,super.play();之后的,就是你想怎么画就怎么画啦。我将画一个与要应用效果的组件一样大小的矩型,之后该矩形会放大并透明,效果都写在drawShape()方法里了。看到这个方法里面的代码,是不是跟Flash里的一样了? 这里再贴上MXML代码: <?
xml?version="1.0"?encoding="utf-8"
?>
<
mx:Application?
layout
="absolute"
?xmlns:mx
="http://www.adobe.com/2006/mxml"
?3?
????????????????????????????????????????????????????????xmlns:pf
="com.jiangzone.flex.effects.*"
>
pf:MyEffect?
id
="myEffect"
?color
="0xFFFFFF"
/>
mx:VBox?
x
="100"
?y
="43"
mx:TextInput?
focusInEffect
="{myEffect}"
</
mx:VBox
mx:Application
>
这里先看看最终效果: 在这里,我用了ENTER_FRAME的写法,但是如果不用ENTER_FRAME方式制作动画的话,还有另外一种方法的,那就是Tween了,Tween是以“时间”为准,而ENTER_FRAME是以“帧”为准,其实到这里,一个基本的Flex自定义动画效果就完成了,但扩展一下的,还可以用Tween来实现,而且建议用Tween来写动画效果,易控制,清淅一点。用Tween实现的话,效果与写法都是差不多的,要用Tween就要将效果实例类继承自TweenEffectInstance这个类,并重写它的onTweenUpdate( )方法与onTweenEnd( )方法,这种Tween效果的写法,将会比ENTER_FRAME的写法方便,因为它根据的是时间,所以,你可以指定效果播放的时间,并且当播放完毕会自动调用onTweenEnd()方法,你可以在该方法里写一些处理操作,如释放资源等等 由于编幅关系,就不在这里详细介绍TweenEffectInstence了,就简单贴出该类的写法与注释吧: ?mx.effects.effectClasses.TweenEffectInstance;
?mx.effects.Tween; ?TweenEffectInstance?{ // 构造函数 同样的要重写play()方法与调用父类同名方法 .play(); ????????????drawShape();???????? 先创建一个矩形 /* 注意:用Tween效果写法的话,就一定要创建一个Tween对象 ????????????第一个参数是侦听器,即侦听Update与End的,这两个方法都在这个类里, ????????????所以这里就写this,第二和第三个参数都是一个数组 ????????????第二个参数是初始值数组,第三个是结果值数组,都要一一对应,第四个是变化时间 ????????????这里的是[1,1]分别是初始时的scale比例与alpha,[3,0]就是最终结果数值 ????????????系统会自动在1000毫秒里平分这些值来得到渐变效果 ????????????并将每一次数值的改变时调用Update方法,结束后调用End方法 ????????????????????你也可以将时间的参数发布到工厂类属性里,可以方便设置播放时间,像Flex自带效果一样 ????????????????????????? */ ?Tween( this 1 ],0); ">3 1000 ); ?function?onTweenUpdate(value:Object): 这里将改变的数值应用到组件对象中。注意:也要与上面的数值数组相对应。 ?Number(value[ ]); ?function?onTweenEnd(value:Object): 当播放完时会自动调用该方法,这里就做删除该矩形的操作吧 46? ????????????target.parent.rawChildren.removeChild(shape); 47? 48? 49? 50? 51? 52? 53? 54? 55? 56? 57? 58? 59? } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |