zoukankan      html  css  js  c++  java
  • 小菜学Flex2(二 currentState初步使用)

    currentState意思是当前的状态,Flex可以设置当前页面的多个状态(states),只需要将页面的currentState属性设置为其中某个状态,就会让当前页面变成这个状态时的样式,其中可以设置由A状态转化(transitions)为B状态的过程
    下面是实现的代码

    1. 38-39为一个Panel,ID为catalogPanel,其中有Click事件
    2. 5-15行,为AS3脚本,目的是执行在点击Panel时的改变当前的状态
    3. 19-26行为状态集,分别为toLeft和toRight两个状态,toLeft就是设置目标为catalogPanel的left样式值为1,即让此Panel左边距为1,toRight同理
    4. 28-36行为转化集,其中Sequence表示按顺序转化,Parallel表示同时转化,这里由于只有Move一种转化,所以不存在顺序或同时转化的情况,duration表示延迟的时间,毫秒为单位。

    总的来说,此段代码的意思就是最开始时,即在Application里设置当前状态为toLeft,所以Panel在左边。然后当点击Panel时,Panel的状态变为了toRight,由于设置了变化过程是Move,在1000毫秒完成,所以就有了移动的效果,再次点击,状态又改回为toLeft,则Panal就移回了左侧。

     1<?xml version="1.0" encoding="utf-8"?>
     2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" currentState="toLeft">
     3    <mx:Script>
     4        <![CDATA[
     5            public function movePanel(): void
     6            {
     7                if (currentState == 'toLeft')
     8                {
     9                    currentState = 'toRight';
    10                }
    11                else
    12                {
    13                    currentState = 'toLeft';
    14                }
    15            }
    16        ]]>
    17    </mx:Script>
    18    
    19    <mx:states>
    20       <mx:State name="toLeft">
    21          <mx:SetStyle target="{catalogPanel}" name="left" value="1"/>
    22       </mx:State>        
    23       <mx:State name="toRight">
    24           <mx:SetStyle target="{catalogPanel}" name="right" value="1"/>
    25        </mx:State>
    26    </mx:states>
    27    
    28    <mx:transitions>
    29       <mx:Transition fromState="*" toState="*">
    30           <mx:Sequence id="t1" target="{catalogPanel}">            
    31               <mx:Parallel>
    32                     <mx:Move duration="1000"/>
    33               </mx:Parallel>    
    34            </mx:Sequence>
    35        </mx:Transition>
    36    </mx:transitions>
    37    
    38    <mx:Panel id="catalogPanel" width="400" height="300" x="0" y="0" click="movePanel();">
    39    </mx:Panel>
    40    
    41</mx:Application>
    42

    样例展现:

     

  • 相关阅读:
    新年献礼 技术胖262集前端免费视频 让您走的更容易些
    Eruda 一个被人遗忘的调试神器
    你(可能)不知道的web api
    含有阶乘的幂级数和
    sin x 特解的假设
    将y=arctanx展开为x的幂级数
    判断数项级数是否收敛
    ubuntu中用安装字体的方法解决文档中的音标乱码
    英语单词
    用递归实现汉诺塔
  • 原文地址:https://www.cnblogs.com/cj723/p/681658.html
Copyright © 2011-2022 走看看