0

Flex 4.5 を使用して、単純なユーザー インターフェイスをプログラミングしています。

ポップアップのイージング アニメーション、特にエラスティック (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.Elastic.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 に答える