Question

我正在尝试创建一个很好的状态转换，其中我有2个容器（在下面的示例中我使用了面板）。

当状态发生变化时，我想淡出上面板，然后将下面板移动到屏幕顶部，然后在下面我要淡入新的“下面”面板。

在下面的代码中，淡入淡出工作正常，但面板不会移动到框的顶部，它只是转到它的新位置而没有过渡。

此外，“反向”过渡根本不会发生。我试图将autoReverse设置为true，我也尝试构建一个相反的转换，两者都没有结果，没有转换。

当我为VBox替换VGroup（其中一切都发生）时，我得到了稍好的结果，转换以一种方式工作。反向过渡仍然无法发挥作用。

<?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属性来使用这些过渡，是否应始终使用绝对定位？如果是这样，我怎么能在上面的例子中纠正它？

Answer 1

问题是你正在使用一个容器来“布局”它的孩子。您可以尝试创建自己的布局，该布局可以知道其子项当前处于效果状态，并且在完成之前不会触摸它们，或者使用绝对定位的布局容器（如“组”）。

Flex 4状态转换在VGroup中移动效果

1 个答案: