注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

在组件中使用动画和特效  

2010-05-08 16:18:30|  分类: Flex4 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

说明:动画常常会被认为是过度使用或者不必要的,但是,如果使用得当的话,它能提高用户体验并且与之维持一个有效的对话。下面我们以《运行时控制应用程序状态》为源程序,实现登录不成功,登录框来回晃动的效果。

修改后的程序代码如下:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx"

               xmlns:components="components.*"

               currentState="logout">

    <fx:Declarations>

<!-创建一个Sequence对象,名称为shake,出发的对象是log,Move对象,表示移动,xBy表示移动的像素,duration表示时间间隔,单位为毫秒-->

        <s:Sequence id="shake" target="{log}">

            <s:Move xBy="20" duration="20"/>

            <s:Move xBy="-20" duration="20"/>

            <s:Move xBy="20" duration="20"/>

            <s:Move xBy="-20" duration="20"/>

            <s:Move xBy="20" duration="20"/>

            <s:Move xBy="-20" duration="20"/>

            <s:Move xBy="20" duration="20"/>

            <s:Move xBy="-20" duration="20"/>

        </s:Sequence>

    </fx:Declarations>

    <fx:Script>

        <![CDATA[

            //定义的一个事件

            private function check():void

            {

                if("linda" == account.text && "zhang" == password.text)

                {

                    currentState = 'login';

                }

                else

                {//触发动画效果

                    shake.play();

                }

            }

        ]]>

    </fx:Script>

    <s:layout>

        <s:BasicLayout/>

    </s:layout>

    <s:states>

        <s:State name="logout"/>

        <s:State name="login"/>

    </s:states>

    <s:Panel includeIn="logout"

             x="120" y="104"

             width="250" height="200"

             title=" 登 录 "

             id="log">

        <s:Label x="22" y="38" text=" 账 号 :"/>

        <s:TextInput x="80" y="32" id="account"/>

        <s:Label x="22" y="72" text=" 密 码 :"/>

        <s:TextInput x="80" y="66" id="password"/>

        <s:Button x="34" y="106"

                  label=" 登 录 "

                  id="login"

                  click="check()"/><!—调用事件-->

        <s:Button x="128" y="106" label=" 取 消 " id="cancel"/>

    </s:Panel>

    <s:Panel includeIn="login"

             x="152" y="231"

             width="250"

             height="200"

             title="用户信息">

        <components:Person

            x="53" y="24"

            image="1.jpg"

            names="linda" />

        <s:Button x="158" y="136"

                  label=" 注 销 "

                  id="logout"

                  click="currentState='logout'"/>

    </s:Panel>

</s:Application>

效果:当输入账号:linda ,密码:zhang 则更改当前状态,到登录成功的状态,如果输入错误,状态为lououtPanel实现动画效果。

  评论这张
 
阅读(443)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017