Flex 4 中创建自定义特效

源文链接: Creating a Custom Animation Effect in Flex 4

原作者: DAVID SALAHI   原文章时间: DECEMBER 19, 2010

正如我在前面的文章中讨论的 "继续对O'Reilly的Flex 4 Coookbook 失望", 我最近在那里找如何创建一个Flex4自定义特效的示例代码, 结果让我很失望。 尽管Adobe docs在"有关创建自定义特效"一文中有一些内容, 但缺少一些细节, 尤其是你想要基于Spark动画基类来创建特效时。 当我在Flex4 Cookbook看到11.8"创建定制动画特效"时, 我认为我已经找到了我想要的: 就是在308页的那些继承于Flex4 Spark Animate类的示例代码. 然而，我很快发现308到310页的示例代码简单就是Flex3和Flex4混在一起的东西, 根本不能编译. 在此我就不想多说了。如果你真的对此感兴趣, 你可以看我以前的文章。

在这里，我将分享我最终通过扩展Flex4的Animate类和AnimateInstance类来创建的自定义特效。

就象上面的Adobe doc中所提到的, 你需要写两个类来创建一个自定义动画. 一个类是工厂类, Flex框架会调用它来创建你的动画特效的实例. 另一个类是具体实现你的定制动画的. 一旦你搞清楚这个基本概要, 一切就变得很容易了. 下面是我的工厂类:

 

public class CustomAnimateEffect extends Animate{
	public var finalAlpha:Number;
	public function CustomAnimateEffect (target:Object=null){
		super(target);
		this.instanceClass = CustomAnimateInstance;
	}
 
	// 创建新的实例
	override protectedfunction initInstance(instance:IEffectInstance):void{
		super.initInstance(instance);
		CustomAnimateInstance(instance).finalAlpha = this.finalAlpha;
	}
 
	override publicfunction getAffectedProperties():Array{
		return["alpha"];
	}
}

 

首先，你必须提供一个以你特效命名的特效工厂类。在构造函数中设置instanceClass。 然后你必须设置那些动画所必需的属性。在本例中， 我只需设置finalApla属性的值. 正如你将看到下面这个特效演示，特效目标的alpha开始于当前所设置值。

你可以设置多个属性，并且使他们都参与动画。 这点对定制特效非常有用。 当然你也可以使用Parallel和Sequence对象。 自定义特效可以让你更灵活地用你自己的方式来实现你想要的特效。 例如你可以选择让目标的alpha在整个动画过程是均速变化的，在特效一半时开始变化颜色。你还可以将在特效后面一半时间内将颜色变化提速为前面的两倍(好，你可能已经做到Sequence和startDelay的效果了， 这可是你自己的实现方式哦！)

下面的两个类就来具体实现这个效果:

import flash.display.DisplayObject;
	
	import spark.effects.animation.Animation;
	import spark.effects.animation.MotionPath;
	import spark.effects.animation.SimpleMotionPath;
	import spark.effects.supportClasses.AnimateInstance;
	
	public class CustomAnimateInstance extends AnimateInstance
	{
		
		public var finalAlpha:Number = -1;
		
		public function CustomAnimateInstance(target:Object)
		{
			super(target);
			motionPaths = new Vector.<MotionPath>();
		}
		
		override public function play():void{
			var motionPath:SimpleMotionPath = new SimpleMotionPath("alpha");
			motionPath.valueFrom = (target as DisplayObject).alpha;
			motionPath.valueTo = finalAlpha == -1?1: finalAlpha;
			motionPaths.push(motionPath);
			super.play();
			
			trace(this.toString(), "play",finalAlpha);
		}
		
		override public function animationUpdate(animation:Animation):void{
			(target as DisplayObject).alpha = animation.currentValue.alpha as Number;
			trace(this.toString(), "animationUpdate",animation.currentValue.alpha);
		}
	}

 

这里， 我们重载了IAnimationTarget的两个方法。 大部分的代码只是简单地创建了一个Animate类所需的SimpleMotionPath。 这个Animate类会在每帧计算补间值。请注意motion path必须在play方法中创建而不是在构造函数。 这是因类直到开始play， finalAlpha值才被设置。 那时CustomAnimateEffect的实例化方法才被调用， 在那里这些值才能从client代码中传过来。 下面是client代码:

 

<fx:Declarations>
	<local:CustomAnimateEffect id="customEffect" finalAlpha="1"target="{btn2}"/>
</fx:Declarations>
<s:VGroup gap="10" paddingTop="10" paddingLeft="10">
	<s:Button label="Click to fade in the button below"click="customEffect.play()"/>
	<s:Button id="btn2" label="Fade Me In"fontSize="50"alpha="0.2"/>
</s:VGroup>