[译] 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, 转载请保留些声明

From http://www.smithfox.com/?e=63