flex transition示例

最新推荐文章于 2023-04-04 18:32:32 发布

转载最新推荐文章于 2023-04-04 18:32:32 发布 · 1.4k 阅读

文章标签：

#transition #flex #application #parallel #encoding #button

49_flex 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一个使用 Flex 实现的登录与注册界面，并详细展示了如何通过代码配置平滑过渡动画效果，包括元素的缩放和平移以及模糊效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="308" height="210">
<mx:Script>
    <![CDATA[
        import mx.effects.easing.Bounce;
    ]]>
</mx:Script>
<mx:transitions>
    <mx:Transition fromState="*" toState="*">
        <mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}"> <!--是targets，不是target-->
            <mx:Resize duration="500" easingFunction="Bounce.easeOut" />
            <mx:Sequence target="{confirm}">
                <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>
                <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1.0"/>
            </mx:Sequence>
        </mx:Parallel>
    </mx:Transition>
</mx:transitions>
<mx:states>
    <mx:State name="Register" basedOn="">    <!--是name,不是id-->
        <mx:AddChild relativeTo="{loginForm}" position="lastChild" creationPolicy="all">
            <mx:FormItem id="confirm" label="Confirm:">
                <mx:TextInput/>
            </mx:FormItem>
        </mx:AddChild>
        <mx:SetProperty target="{loginPanel}" name="title" value="User Register--And8.net"/>
        <mx:SetProperty target="{loginButton}" name="label" value="Register"/>
        <mx:RemoveChild target="{registerLink}"/>
        <mx:AddChild relativeTo="{space1}" position="before">
            <mx:LinkButton label="Login Now!" click="currentState=''"/>
        </mx:AddChild>
    </mx:State>
</mx:states>
<mx:Panel id="loginPanel" title="User Login--And8.net" horizontalScrollPolicy="off" verticalScrollPolicy="off" x="10" y="10" borderColor="#00ff00">
    <mx:Form id="loginForm">
        <mx:FormItem label="Name:">
            <mx:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="Password:">
            <mx:TextInput/>
        </mx:FormItem>
    </mx:Form>
    <mx:ControlBar>
        <mx:LinkButton label="Need to Register?" id="registerLink" click="currentState='Register'"/>
        <mx:Spacer width="100%" id="space1"/>
        <mx:Button id="loginButton" label="Login"/>
    </mx:ControlBar>
</mx:Panel>
   
</mx:Application>