1

我想在改变状态时有一个过渡动画。

经过几次尝试，我不明白这是什么问题。我的第一个目标是在隐藏“Card HOME”时触发从 1 到 0 的 alpha 效果

由于没有showEffect或hideEffect，我尝试使用transitions属性

（更新：查看SDK源，我想我需要添加StatesWithTransitionsImpl，所以我更新了我的代码，但是当点击“描述”时，“家庭卡”没有过渡，它会淡出，但不起作用)

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

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:js="library://ns.apache.org/royale/basic" 
                xmlns="*"
                pageTitle="RoyaleStore">

    <fx:Script>
        <![CDATA[   
            import org.apache.royale.core.ValuesManager;


            private function headHome():void
            {
                    initialView.currentState = "HomeState";
            }

            private function headToProducts():void
            {
                    initialView.currentState = "ProductState";                    
            }



        ]]>
    </fx:Script>

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

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>
    <js:beads>
        <js:ApplicationDataBinding />
    </js:beads>

    <js:initialView>
        <js:View >

            <js:beads>
                <js:VerticalLayout />
                <!-- if you comment out this section and comment <fx:Style source="main.css"/> then it isn't working -->
                    <!--  <core:StatesWithTransitionsImpl/>
                    <utils:EffectTimer/>-->
            </js:beads>

            <js:states>
                <js:State name="HomeState"  />
                <js:State name="ProductState"  />
            </js:states>

            <js:transitions>
                <js:Transition fromState="HomeState" toState="*">
                    <js:Fade target="homeView" alphaFrom="1" alphaTo="0" duration="1000" />
                </js:Transition>
                <js:Transition fromState="*" toState="HomeState">
                     <js:Fade target="homeView" alphaFrom="0" alphaTo="1" duration="1000" />
                </js:Transition>
                <js:Transition fromState="ProductState" toState="*">
                    <js:Fade target="productView" alphaFrom="1" alphaTo="0" duration="1000" />
                </js:Transition>
                <js:Transition fromState="*" toState="ProductState">
                    <js:Fade target="productView" alphaFrom="0" alphaTo="1" duration="1000" />
                </js:Transition>
            </js:transitions>


            <js:Group>
                <js:beads>
                    <js:HorizontalLayout />
                </js:beads>
                <js:TextButton text="Home" click="headHome()" />
                <js:TextButton text="Products" click="headToProducts()"/>
            </js:Group>

            <js:Group>
                 <js:Label id="productView" text="productView" includeIn="ProductState"  />
                 <js:Label id="homeView" text="homeView" includeIn="HomeState" />
            </js:Group>

        </js:View>        
    </js:initialView>    
</js:Application>

如何做到这一点？

（更新 2：我已经使用 Royale Store 示例的一部分更新了代码。单击“主页”时它正在工作，但奇怪的是，当单击“产品”时却没有。Bug与否？）

我发现要工作，您必须包含 main.css ：

@namespace basic "library://ns.apache.org/royale/basic";

global {
    IStatesImpl:            ClassReference("org.apache.royale.core.StatesWithTransitionsImpl");
    IEffectTimer:           ClassReference("org.apache.royale.utils.EffectTimer");
}

另一个问题是，如果我尝试像这样添加珠子：

 <js:beads>
       <core:StatesWithTransitionsImpl/>
       <utils:EffectTimer/>
 </js:beads>

（并删除包括main.css）然后它不工作......

问候

4

1 回答 1

1

Checkout examples/royale/RoyaleStore. It is using state transitions.

于 2019-09-27T16:05:35.580 回答