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

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

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

网易考拉推荐

动画状态的过渡  

2010-05-08 17:09:59|  分类: Flex4 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

说明:在状态与状态的变换之间,我们并不希望,状态改变过快,或者是太直接,所以,我们经常会用到过渡的效果,这里,我们更改《在组件中使用动画和特效》让其实现淡入淡出的效果,以及某个状态所代表的Panel移动。

修改代码如下:

<?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>

        <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:transitions>

        <!—定义的一个过渡,在状态从logoutlogin过渡时触发-->

        <s:Transition fromState="logout" toState="login">

            <s:Parallel targets="{[userMsg,log]}"><!—这是一个类别,可以有多个,targets表示目标,多个用数组形势表示,也就是绑定ID-->

                <s:Fade target="{log}" /><!—IDlog的对象实现淡入淡出的效果-->

                <s:Fade target="{userMsg}" />

                <s:Sequence target="{userMsg}"><!—IDuserMsg的对象实现上下晃动的效果-->

                    <s:Move yBy="20" />

                    <s:Move yBy="-20" />

                    <s:Move yBy="20" />

                    <s:Move yBy="-20" />

                    <s:Move yBy="20" />

                    <s:Move yBy="-20" />

                </s:Sequence>

            </s:Parallel>

        </s:Transition>

    </s:transitions>

    <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()"/><!--currentState='login'-->

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

    </s:Panel>

    <s:Panel includeIn="login"

             x="152" y="231"

             width="250"

             height="200"

             title="用户信息"

             id="userMsg">

        <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>

 

2010-05-08

 

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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