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

[b]Creating a Custom Animation Effect in Flex 4[/b]

源文链接: [url=http://flexperiential.com/2010/12/19/creating-a-custom-animation-effect-in-flex-4/]Creating a Custom Animation Effect in Flex 4[/url]
原作者: DAVID SALAHI 原文章时间: DECEMBER 19, 2010

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

正如我在前面的文章中讨论的 "[url=http://flexperiential.com/2010/12/19/o%E2%80%99reilly%E2%80%99s-flex-4-cookbook-continues-to-disappoint/]继续对O'Reilly的Flex 4 Coookbook 失望[/url]", 我最近在那里找如何创建一个Flex4自定义特效的示例代码, 结果让我很失望。 尽管Adobe docs在"[url=http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf68e80-7fee.html]有关创建自定义特效[/url]"一文中有一些内容, 但缺少一些细节, 尤其是你想要基于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>

[url=http://flexperiential.com/code/CustomEffect/CustomEffects.fxp]下载这个flex特效的源代码(fxg)[/url]
原创翻译链接: [url]http://www.smithfox.com/?e=63[/url], 转载请保留些声明

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