0

我正在尝试创建一个很好的状态转换，其中我有 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" />

如果您想要这种移动过渡，您应该始终使用绝对定位，还是可以在结合 includeIn 和 excludeFrom 属性的 VGroup 或 VBox 中使用这些过渡？如果是这样，我该如何在上面的示例中纠正它？

4

1 回答 1

0

问题是您使用的容器旨在“布局”它的孩子。您可以尝试创建自己的布局，该布局可以知道它的孩子当前何时生效，并且在它们完成之前不要触摸它们，或者使用绝对定位的布局容器（如 Group）。

于 2011-05-11T15:37:26.343 回答