如何使用Apache Royale对状态更改进行过渡效果?

Question

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

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

由于没有显示效果或隐藏效果，我尝试使用transitions属性

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

<?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：我使用皇家商店示例的一部分更新了代码。单击"主页"时它正在工作，但奇怪的是，当点击"产品"时，它不起作用。有没有错误？

我发现要工作，您必须包括 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

Checkout examples/royale/RoyaleStore. 它正在使用状态转换。