Как сделать эффект перехода при изменении состояния с помощью Apache Royale?

Я хотел бы иметь анимацию перехода при изменении состояния.

После нескольких попыток я не понимаю, в чем проблема. Моя первая цель - вызвать альфа-эффект от 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), тогда он не работает...

С Уважением


person Fred    schedule 26.09.2019    source источник


Ответы (1)


Примеры оформления заказа/royale/RoyaleStore. Он использует переходы состояний.

person Alex Harui    schedule 27.09.2019
comment
Спасибо, Эффектно, мне помогло, теперь работает наполовину... Пытаясь упростить код, спрашиваю себя, есть ошибка или нет. Я обновил код в вопросе - person Fred; 28.09.2019
comment
Что касается использования StatesWithTransitionsImpl в CSS и в списке js:beads (на цепочке): бусины, применяемые в js:beads, похожи на стили, добавленные в HTMLElement через атрибут styles. Они видны только тому экземпляру, к которому вы их применяете, тогда как в CSS любой элемент HTML может найти соответствующий стиль. Различные контейнеры будут искать IStatesImpl в js:beads, а затем в CSS. Если вы примените IStatesImpl только к определенному экземпляру, другие экземпляры его не увидят. - person Alex Harui; 30.09.2019