Question

我正在尝试创建一个具有平滑过渡效果的展开表单，这里是代码：

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               currentState="Login" creationPolicy="all"
               close="PopUpManager.removePopUp(this)">

<fx:Metadata> 
    [ResourceBundle("I18N")]
</fx:Metadata>

<s:states>
    <s:State name="Login" ></s:State>
    <s:State name="Register"></s:State>
</s:states>
<fx:Script>
    <![CDATA[
        import caurina.transitions.Tweener;

        import mx.controls.Alert;
        import mx.managers.PopUpManager;
        [Bindable]private var show:Boolean = false;

        private function extendForm():void
        {
            Tweener.addTween(this, {height:320, time:1, onComplete:this.toogleMode(true)})
        }

        private function reduceForm():void
        {
            Tweener.addTween(this, {height:150, time:1, onComplete:this.toogleMode(false)});
        }

        private function toogleMode(visible:Boolean):void
        {
            this.show = visible;
            if(visible){this.setCurrentState("Register");}
            else{this.setCurrentState("Login")}
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <mx:EmailValidator source="{email}" property="text" required="true"
                       trigger="{submit}" triggerEvent="click"
                       valid="Alert.show('Validation Succeeded!');"/>

    <mx:Validator source="{password}" property="text" required="true"
                  trigger="{submit}" triggerEvent="click"
                  requiredFieldError="{resourceManager.getString('I18N','requiredField')}"/>

    <mx:Validator source="{repeatpw}" property="text"
                  trigger="{submit}" triggerEvent="click"
                  required="{show}" requiredFieldError="{resourceManager.getString('I18N','requiredField')}"/>
</fx:Declarations>

<s:VGroup id="container" width="100%" height="100%" gap="10">
    <s:Group width="100%" height="100%">
        <mx:Form id="formfield" width="100%" height="100%" left="0" layoutDirection="ltr" creationPolicy="all" >
            <mx:FormItem creationPolicy="all" label="{resourceManager.getString('I18N','email')}">
                <s:TextInput id="email" 
                             width="100%"
                             maxChars="40"
                             minWidth="170" />
            </mx:FormItem>  

            <mx:FormItem creationPolicy="all" label="{resourceManager.getString('I18N','password')}">
                <mx:TextInput id="password" 
                              width="100%" 
                              displayAsPassword="true"
                              maxChars="40"
                              minWidth="170"/>
            </mx:FormItem>

            <mx:FormItem creationPolicy="all" includeIn="Register" label="{resourceManager.getString('I18N','repeatpw')}">
                <s:TextInput id="repeatpw" 
                             width="100%"
                             displayAsPassword="true"
                             maxChars="40"
                             minWidth="170" />
            </mx:FormItem>  
        </mx:Form>
    </s:Group>

    <s:HGroup width="100%">
        <s:Group>
            <s:Button includeIn="Login" enabled="{!show}" label="{resourceManager.getString('I18N','register')}" left="5" bottom="5" click="{this.extendForm()}"/>
            <s:Button includeIn="Register" enabled="{show}" label="{resourceManager.getString('I18N','login')}" left="5" bottom="5" click="{this.reduceForm()}"/>

        </s:Group>
        <mx:Spacer width="100%" height="100%"/>
        <s:HGroup>
            <s:Button label="{resourceManager.getString('I18N','submit')}" id="submit"/>
            <s:Button label="{resourceManager.getString('I18N','cancel')}" click="PopUpManager.removePopUp(this)" />
        </s:HGroup>
    </s:HGroup>
</s:VGroup>

但问题是，即使将creationPolicy设置为all，并非所有项目都被初始化。这会导致tweener动画在第一次单击“注册”按钮时滞后。第一次点击后，动画很流畅。

任何人都可以告诉我我做错了什么或是什么导致动画滞后？

Answer 1

我认为你的问题是，即使创造了所有东西，也不能在状态已知之前进行布局。

因此，我建议您避免对转换进行微观管理，而是依赖于集成到Spark架构中的效果语法。 http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf600c1-7fff.html

因此，不要将creationPolicy设置为“all”，而是在主要组件中设置height.Register和height.Login。如果你设置一个fromState为*和toState为*的转换，以及一个目标为this但没有参数的Resize Effect（除了你可能想要调整持续时间），你应该更容易这样做。 / p>

表单项上的Creationpolicy

1 个答案: