0

我使用 Flex 4.5 来编写一个简单的用户界面。

我想添加弹出窗口缓动动画,尤其是 Elastic (spark.effects.easing.Elastic)。

有没有办法改变弹性动画的属性?它来回反弹太多,有没有办法改变这种行为或使用其他一些提供我需要的选项的缓动动画来模仿这种行为?

示例代码可以在以下位置找到:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/easing/Elastic.html

谢谢

4

1 回答 1

1

您可以将 spark Elastic ease 类子类化以公开更多自定义变量,如下所示:

package
{
    import mx.effects.easing.Elastic;
    import spark.effects.easing.Elastic;

    /** Expose some properties on the spark Elastic easer */
    public class MyElastic extends spark.effects.easing.Elastic
    {
        /**
         *  (Copied from the ASDoc for mx.effects.easing.Elastic.easeout()):
         *  @param b Specifies the initial position of a component.
         *  @param c Specifies the total change in position of the component.
         *  @param d Specifies the duration of the effect, in milliseconds.
         *  @param a Specifies the amplitude of the sine wave.
         *  @param p Specifies the period of the sine wave.
         */
        public var b:Number = 0;
        public var c:Number = 1;
        public var d:Number = 1;
        public var a:Number = 0;
        public var p:Number = 0;

        override public function ease(fraction:Number):Number
        {
            return mx.effects.easing.Elastic.easeOut(fraction, b, c, d, a, p);

            // if these properties aren't enough control then you can copy and paste 
            // the code from mx.effects.easing.Ellastic.easeOut() directly into this 
            // overridden method and tweak the code for your needs from there.
        }
    }
}

如果这些变量没有提供您正在寻找的控制,那么您只需将代码从 mx.effects.easing.Ellastic.easeOut() 复制并粘贴到 MyElastic.ease() 并完全控制您需要的调整在那里做。

这是一个演示这个子类的简单示例应用程序:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:local="*">

    <s:Button click="mover.play()" label="move" x="100" y="50" />

    <s:Button id="btn" y="100" x="50" />
    <s:Button id="btn2" y="150" x="50" />

    <fx:Declarations>
        <s:Parallel id="mover">
            <s:Move target="{btn}" xBy="100">
                <s:easer>
                    <s:Elastic />
                </s:easer>
            </s:Move>
            <s:Move target="{btn2}" xBy="100">
                <s:easer>
                    <local:MyElastic a="3" />
                </s:easer>
            </s:Move>
        </s:Parallel>
    </fx:Declarations>

</s:WindowedApplication>
于 2011-11-06T18:49:44.130 回答