Я хотел бы иметь анимацию перехода при изменении состояния.
После нескольких попыток я не понимаю, в чем проблема. Моя первая цель - вызвать альфа-эффект от 1 до 0, когда «Card HOME» скрыт.
Поскольку нет 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. Он работает при нажатии на «Домой», но, как ни странно, не работает при нажатии на «Продукты». Баг или нет?)
Я обнаружил, что для работы вы должны включить 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), тогда он не работает...
С Уважением