Question

我已经构建了一个通过SplitViewNavigator构建的菜单。左侧视图是菜单，右侧是内容窗口。默认情况下，左侧视图（meny）可见= false但按下按钮变为visibe = true，而右侧视图（内容）调整为20％宽度，使菜单覆盖屏幕的80％。

如何对visible = true / false应用过渡效果？我希望看起来左侧视图从屏幕左侧滑入，就像菜单中的幻灯片一样。由于可见，菜单现在才会显示，但是可以让它滑动吗？或任何其他类型的过渡效应？

我的应用代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160" xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Declarations>



    </fx:Declarations>

    <fx:Style source="style.css">
    </fx:Style>

    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub

            if (meny.visible){
                meny.visible = false;
                content.width *= 5;
                hannah.visible = true;


            } else {
                meny.visible = true;
                content.width *= 0.2;
                hannah.visible = false;

            }
            }
        ]]>
    </fx:Script>


    <s:SplitViewNavigator backgroundColor="#7b7b7b"  width="100%" height="100%">

        <s:ViewNavigator visible="false" id="meny" width="100%" height="100%" firstView="views.Meny">
            <s:navigationContent>
                <s:Button label="Meny" click="button1_clickHandler(event)"/>
            </s:navigationContent>
            </s:ViewNavigator>
        <s:ViewNavigator title="Content" id="content" width="100%" height="100%" firstView="views.Content">
            <s:navigationContent>
                <s:Button id="hannah" label="Meny" click="button1_clickHandler(event)"/>
            </s:navigationContent>
        </s:ViewNavigator>

    </s:SplitViewNavigator>




</s:Application>

Answer 1

要在转换中使用淡入淡出，请将visible设置为true，将alpha设置为0，然后使用任何类型的补间库将alpha从0补间到所需的值。

Answer 2

从我的角度来看，更舒适的方式是使用状态：

定义最小化和最大化的状态。然后定义宽度取决于状态（width.minimized =＆＃34; {0}＆＃34; width.maximized =＆＃34; x％＆＃34;）并在按下按钮时切换状态。然后你可以轻松地应用转换（我使用resize - 与容器的两个部分并行）进行状态转换（属性fromState =＆＃34;＆＃34;和toState =＆＃34;＆＃34; of火花过渡）

还在研究一个类似的问题，但是在面板上做了相同的程序，编写我自己的splitviewnav并且效果很好。

最好的问候

如何对visible = true / false进行过渡效果？

2 个答案: