[Flex]カスタムエフェクトの作成 #3 - TweenEffectによる複数パラメータの変化

前回はターゲットオブジェクトに対してrotationプロパティだけを変化させてアニメーションを実行した。 では、複数のパラメータを同時に変化させるにはどうしたらいいのだろう？ということで調べてみた。

答えは簡単。

インスタンスクラスで createTween メソッドを実行するときに開始値, 終了値を指定するところに配列を指定してやればいい。

createTween(this, [開始値1, 開始値2, ...], [終了値1, 終了値2, ...]);

前回のサンプルでrotation と同時に scaleX , scaleY も変化するアニメーションに修正してみた。

TestEffect.as

package
{
    import mx.effects.Effect;
    import mx.effects.IEffectInstance;

    public class TestEffect extends Effect
    {
        public function TestEffect(target:Object=null)
        {
            super(target);
            instanceClass= TestEffectInstance;
        }

        override public function getAffectedProperties():Array{
            return ["rotation"];
        }

        override protected function initInstance(inst:IEffectInstance):void{
            super.initInstance(inst);
            TestEffectInstance(inst).angleFrom = 0;
            TestEffectInstance(inst).angleTo = 360;
            TestEffectInstance(inst).scaleFrom = 2;
            TestEffectInstance(inst).scaleTo = 1;
        }
    }
}

TestEffectInstance.as

package
{
    import mx.effects.effectClasses.TweenEffectInstance;

    public class TestEffectInstance extends TweenEffectInstance
    {
        public var angleFrom:Number;
        public var angleTo:Number;
        public var scaleFrom:Number;
        public var scaleTo:Number;

        public function TestEffectInstance(target:Object)
        {
            super(target);
        }

        override public function play():void {
            super.play();
            createTween(this, [angleFrom, scaleFrom], [angleTo, scaleTo], duration);
        }

        override public function onTweenUpdate(val:Object):void {
            target.rotation = val[0];
            target.scaleX = target.scaleY = val[1];
        }
    }
}

TestEffectInstance に scaleX , scaleY の変化を設定するプロパティ scaleFrom と scaleTo を追加。 そして createTween 実行時に以下のように二つの値のFromとToを配列にして実行。

createTween(this, [angleFrom, scaleFrom], [angleTo, scaleTo], duration);

onTweenUpdate メソッドでは引数valに配列が入るため、val[0], val[1]として使用する。 createTween を呼び出したときの配列と同じ順序で値が格納されているようだ。

ということで前回と全く同じMXMLで以下のようにアニメーションが変更された。