Как сделать эффект перехода на изменение состояния с Apache Royale? - PullRequest
Новая
       49

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

1 голос
/ 26 сентября 2019

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

После нескольких попыток я не вижу, в чем проблема.Моя первая цель - вызвать альфа-эффект от 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 Store, он работает при нажатии на «Домой», но странно , а не при нажатии на «Продукты» . Ошибка или нет?)

Я обнаружил, что для работы вы должны включить 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) тогда это не работает ...

С уважением

1 Ответ

1 голос
/ 27 сентября 2019

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

...