如何使用 Apache Royale 对状态变化产生过渡效果？

Question

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

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

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

(update：看SDK源码，我想我需要添加StatesWithTransitionsImpl，所以我更新了我的代码，但是当点击“Description”时，“home card”没有过渡，它会淡出，但不起作用）

<?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 示例的一部分更新了代码。单击“主页”时它可以工作，但奇怪的是 单击“产品”时却没有 strong>. 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）然后它不起作用...

问候

Answer 1

结帐示例/royale/RoyaleStore。它正在使用状态转换。