Блог

Я пытаюсь создать приятный переход состояния, в котором у меня есть 2 контейнера (в примере ниже я использовал панели).

При изменении состояния я хочу убрать верхнюю панель, затем переместить нижнюю панель в верхнюю часть экрана, а под ней я хочу убрать новую «нижнюю» панель.

В приведенном ниже коде затухания работают нормально, но панель не перемещается в верхнюю часть окна, она просто переходит в новое положение без перехода.

Также «обратный» переход вообще не происходит. Я попытался установить для AutoReverse значение true, а также попытался создать противоположный переход, оба безрезультатно, перехода не было.

Когда я заменяю VGroup (в котором все это происходит) на VBox, я получаю немного лучший результат, переход работает одним способом. Обратный переход по-прежнему вообще не работает.

 <?xml version="1.0" encoding="utf-8"?>
  

 <fx:Script>
    <![CDATA[
        private function switchMode():void
        {
            if (currentState == "up")
                currentState = "down";
            else
                currentState = "up";
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="up" />
    <s:State name="down" />
</s:states>

<s:transitions>
    <s:Transition fromState="up" toState="down">
        <s:Sequence>
            <s:Fade target="{upperGrid}" />
            <s:RemoveAction target="{upperGrid}" />
            <s:Move target="{panel1}" />
            <s:AddAction target="{lowerGrid}" />
            <s:Fade target="{lowerGrid}" />
        </s:Sequence>
    </s:Transition>

    <s:Transition fromState="down" toState="up">
        <s:Sequence>
            <s:Fade target="{lowerGrid}" />
            <s:RemoveAction target="{lowerGrid}" />
            <s:Move target="{panel1}" />
            <s:AddAction target="{upperGrid}" />
            <s:Fade target="{upperGrid}" />
        </s:Sequence>
    </s:Transition>
</s:transitions>

<s:VGroup width="100%" height="100%" top="10" left="10" right="10" bottom="10">
    <s:Panel id="upperGrid" width="100%" height="100%" includeIn="up" title="upper panel" />
    <s:Panel id="panel1" width="100%" title="Panel">
        <s:Button label="Switch mode" click="switchMode()" />
    </s:Panel>
    <s:Panel id="lowerGrid" width="100%" height="100%" includeIn="down" title="lower panel" />
</s:VGroup>
  

Когда я избавляюсь от VGroup или VBox и использую абсолютные позиции, переходы работают нормально:

 <s:Panel id="upperGrid" left="10" right="10" top="10" bottom="{panel1.height   20}" includeIn="up" title="upper panel" />
<s:Panel id="panel1" left="10" right="10" top.up="{upperGrid.height   20}" top.down="10" title="Panel">
    <s:Button label="Switch mode" click="switchMode()" />
</s:Panel>
<s:Panel id="lowerGrid" left="10" right="10" top="{panel1.height   20}" bottom="10" includeIn="down" title="lower panel" />
  

Следует ли всегда использовать абсолютное позиционирование, если вы хотите такого рода переходы перемещения, или возможно ли использовать эти переходы в VGroup или VBox в сочетании со свойствами includeIn и excludeFrom? И если да, то как я мог бы исправить это в примере выше?

Проблема в том, что вы используете контейнер, который предназначен для «компоновки» его дочерних элементов. Вы могли бы попытаться создать свой собственный макет, который мог бы знать, когда его дочерние элементы в данный момент находятся в эффекте, и не трогать их, пока они не будут выполнены, или использовать вместо этого абсолютно позиционированный контейнер макета (например, Group).