[译] Flex 4 中创建自定义特效

Creating a Custom Animation Effect in Flex 4

源文链接: Creating a Custom Animation Effect in Flex 4  
原作者: DAVID SALAHI   原文章时间: DECEMBER 19, 2010

原创翻译链接: http://www.smithfox.com/?e=63, 转载请保留些声明

正如我在前面的文章中讨论的 "继续对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 protected function initInstance(instance:IEffectInstance):void {
		super.initInstance(instance);
		CustomAnimateInstance(instance).finalAlpha = this.finalAlpha;
	}
 
	override public function getAffectedProperties():Array {
		return ["alpha"];
	}
}

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

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

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

<

public class CustomAnimateInstance extends AnimateInstance{
	public var finalAlpha:Number = -1;
 
	public function CustomAnimateInstance(target:Object) {
		super(target);
	}
 
	override public function play():void {
		var motionPath:SimpleMotionPath = new SimpleMotionPath("alpha");
		motionPath.valueFrom = (target as DisplayObject).alpha;
		motionPath.valueTo = finalAlpha == -1 ? 1 : finalAlpha;
		motionPaths = new Vector.;
		motionPaths.push(motionPath);
 
		super.play();
	}
 
	override public function animationUpdate(animation:Animation):void {
		(target as DisplayObject).alpha = animation.currentValue.alpha as Number;
	}
}

这里, 我们重载了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>

下载这个flex特效的源代码(fxg)

原创翻译链接: http://www.smithfox.com/?e=63, 转载请保留些声明

smithfox | Tuesday 18 January 2011 at 9:24 pm | | UI        | Used tags: , ,

One comment

LV iPhone 6 Case

built-in to the entire display, eliminating the need for a Home button and making room for a larger display without enlarging the overall size of the smartphone.

LV iPhone 6 Case, (URL) - 04-06-’15 15:08
(optional field)
(optional field)
为阻止垃圾广告, 请在提交评论前, 回答一个简单问题(Please answer an simple question)
Remember personal info?
Notify
Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.