4

私は小さな Adob​​e Air アプリを持っており、その中にいくつかの「ビュー」を入れたいと思っています。ViewStack を使用してこれらのビューを実現できますが、それらの間でアニメーション化する良い方法を見つけるのに苦労しています。

これは私が試したものであり、機能しますが、ビューとすべてのコントロールがビューからうまくスライドする DestroyTwitter アプリのように、ビューにスライドする前に 1 つのビューが消えます。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="700" top="100" left="100" creationComplete="onComplete()">
    <mx:Script>
    <![CDATA[
        import mx.core.Application;
        private function onComplete():void
        {
            stack.selectedChild = stack1;
        }

        private function switchTab():void
        {
            if( stack.selectedChild == stack1 )
            {
                stack.selectedChild = stack2;
            }
            else
            {
                stack.selectedChild = stack1;
            }
        }
    ]]>
    </mx:Script>

    <mx:Move id="slideLeft" xFrom="{Application.application.width}" xTo="0" yTo="0" duration="500" />
    <mx:Move id="slideRight" xFrom="0" xTo="{Application.application.width}" duration="500" />

    <mx:ViewStack id="stack" width="200%" height="100%">
        <mx:VBox id="stack1" width="100%" height="100%" backgroundColor="white" hideEffect="{slideRight}" >
            <mx:Label text="Stack 1" />
            <mx:Button label="Switch" click="switchTab()" />
        </mx:VBox>

        <mx:VBox id="stack2" width="100%" height="100%" backgroundColor="#cdcdcd" hideEffect="{slideLeft}" >
            <mx:Label text="Stack 2" />
            <mx:Button label="Switch" click="switchTab()" />
        </mx:VBox>

    </mx:ViewStack>
</mx:WindowedApplication>

誰かが試してみる良いアイデアを持っていますか?反応に感謝しますか?

4

4 に答える 4

2

どのビューがアクティブかを制御する状態を使用し、それらの状態間を移動するための遷移を定義します。

http://livedocs.adobe.com/flex/3/html/help.html?content=transitions_3.html

于 2009-05-15T21:30:39.430 に答える
1

これがまさに私が達成したかったことです：

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="400" height="700" top="100" left="100" 
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    >

    <mx:Script>
        <![CDATA[
            import mx.core.Application;
        ]]>
    </mx:Script>


    <mx:states>
    <mx:State name="One">
            <mx:SetProperty target="{stack1}" name="x" value="0"/>
            <mx:SetProperty target="{stack1}" name="y" value="50"/>
            <mx:SetProperty target="{stack1}" name="width" value="{Application.application.width}"/>

            <mx:SetProperty target="{stack2}" name="x" value="{Application.application.width}"/>
            <mx:SetProperty target="{stack2}" name="y" value="50"/>
            <mx:SetProperty target="{stack2}" name="width" value="{Application.application.width}"/>
    </mx:State>

    <mx:State name="Two">
            <mx:SetProperty target="{stack1}" name="x" value="-{Application.application.width}"/>
            <mx:SetProperty target="{stack1}" name="y" value="50"/>
            <mx:SetProperty target="{stack1}" name="width" value="{Application.application.width}"/>

            <mx:SetProperty target="{stack2}" name="x" value="0"/>
            <mx:SetProperty target="{stack2}" name="y" value="50"/>
            <mx:SetProperty target="{stack2}" name="width" value="{Application.application.width}"/>
    </mx:State>
    </mx:states>


    <!-- Define Transition array with one Transition object.-->
    <mx:transitions>
        <!-- A transition for changing from any state to any state. -->
        <mx:Transition id="myTransition" fromState="*" toState="*">
            <mx:Parallel id="t1" targets="{[stack1,stack2]}">
                <mx:Move    duration="400"/>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>

    <mx:HBox>
        <mx:Button label="Switch To Two" click="currentState='Two'" />
        <mx:Button label="Switch To One" click="currentState='One'" />
    </mx:HBox>

    <mx:Canvas id="stack1" x="0" y="50" width="100%" height="100%" borderThickness="1" borderStyle="solid">
        <mx:VBox width="100%" height="100%" backgroundColor="white">
            <mx:Label text="Stack 1" />
            <mx:Box backgroundColor="red" width="20" height="20" />
        </mx:VBox>
    </mx:Canvas>

    <mx:Canvas id="stack2" x="{Application.application.width}" y="50" width="100%" height="100%" borderThickness="1" borderStyle="solid">
        <mx:VBox width="100%" height="100%" backgroundColor="#cdcdcd">
            <mx:Label text="Stack 2" />
            <mx:Box backgroundColor="green" width="20" height="20" />
        </mx:VBox>
    </mx:Canvas>

</mx:WindowedApplication>
于 2009-05-15T23:27:03.783 に答える
0

上記の受け入れられた回答にぼかしを追加します。トランジションをよりスムーズ/クールに見せます。

Mike Chambers によるこのクールな Arduino スピードメーターからの状態遷移を再現しようとしていましたが、Dan による答えに Blur が追加されてうまくいきました。

<!-- Define Transition array with one Transition object.-->
    <mx:transitions>
        <!-- A transition for changing from any state to any state. -->
        <mx:Transition id="myTransition" fromState="*" toState="*">
            <mx:Sequence id="s1" targets="{[stack1,stack2]}">

                <mx:Blur duration="50" blurXFrom="0.0" blurXTo="5.0"
                         blurYFrom="0.0" blurYTo="5.0"/>

                <mx:Parallel id="t1" targets="{[stack1,stack2]}">
                        <mx:Move duration="400"/>
                </mx:Parallel>

                <mx:Blur duration="50" blurXFrom="5.0" blurXTo="0.0"
                          blurYFrom="5.0" blurYTo="0.0"/>
            </mx:Sequence>

        </mx:Transition>
    </mx:transitions>
于 2010-08-13T08:40:13.317 に答える
0

試してみることができることの 1 つは、ビューのインとアウトのスワップをもう少し高度にすることです。「切り替え」ボタンをクリックすると、移動が実行され、移動が完了するまでスワップは実行されません。

おそらく次のようなものです：

private function switchTab():void {

    var move:Move = new Move(stack.selectedChild as DisplayObject); //not sure about the casting right now...might need to check on that
    // implement move details here...

    //closure to make sure the next child is swapped in after the animation completes
    var done:Function = function(event:Event):void {
        // do the change here in this closure
        if (stack.selectedChild == stack1) {
            stack.selectedChild = stack2;
        }
        else {
            stack.selectedChild = stack1;
        }
        // remove the EventListener..don't want memory leaks :)
        move.removeEventListener(EffectEvent.END, done);
    }
    // make sure 'move' performs the 'done' function when the animation finishes
    move.addEventListener(EffectEvent.END, done);

    move.play();
}
于 2009-05-15T21:04:42.940 に答える