小菜学Flex2（三 对state编程实现）

        上次我们谈到了设置currentState为实现动态效果，而其实我们更多的时候state是需要变化的，所以编程来定义state可以更加灵活。下面我们来看一个例子。

1. 128-129为一个Canvas容器，其宽和高都是0，这样初始状态就看不到它
2. 3-17行，为此Canvas的样式
3. 18-115行为AS3脚本，详细说明见代码注释
4. 116-125为转化效果设定，目前设置了移动和更改大小的延迟时间都为300毫秒
5. 126-127是一个linkButton，即一个按钮，当click时，执行showPop()方法，当鼠标移出后执行hiddenPop()方法。

此段代码的目的是，当点击按钮后，showPop()方法会先去执行getEndState()方法，来增加一个toEnd的状态，此状态要求有x,y,width,height的信息，这就定义了Canvas在toLeft时的位置和大小。然后给currentState赋值toEnd，所以就决定了Canvas的状态要变成宽500高300位置在按钮右侧50与按钮同高样子，由于有了Transition设置了移动和改变大小的延迟，所以就产生了动态效果。

在Asp.net Ajax中的Animation也可以实现同样的效果，不过它是用javascript来实现的，这里是用flex实现的。一般这种效果用在局部的帮助提示，会有比较好的客户感受。

  1<?xml version="1.0" encoding="utf-8"?>
  2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3         <mx:Style>
  4        .PopupCanvas { 
  5           cornerRadius: 10;
  6           headerHeight: 0;
  7           borderThickness: 0;
  8           shadowDirection: right;
  9           backgroundAlpha: 1;
 10           borderAlpha: 0.24;
 11           borderThicknessLeft: 0;
 12           borderThicknessRight: 0;
 13           borderThicknessTop: 0;
 14           borderStyle: solid;
 15           backgroundColor: #66ffff;
 16        } 
 17        </mx:Style>
 18         <mx:Script>
 19             <![CDATA[
 20                 import mx.managers.PopUpManager;
 21                import mx.states.*;
 22        
 23                ///得到结束状态
 24                ///目标对象：canvasTemp
 25                ///x 横坐标
 26                ///y 纵坐标
 27                ///width宽
 28                ///height高
 29                private function getEndState(canvasTemp:Canvas,x:Number,y:Number,Number,height:Number): State
 30                {
 31                    //声明一个State对象newState
 32                    var newState:State;
 33                    //实例化
 34                    newState = new State();
 35                    //命名此状态为toEnd
 36                    newState.name = "toEnd";
 37                    //声明一个SetStyle对象myLeft，为设置样式用
 38                    var myLeft:SetStyle = new SetStyle();
 39                    //要设置的样式是left
 40                    myLeft.name="left";
 41                    //left的值为参数X
 42                    myLeft.value= x;
 43                    //目标为参数的Canvas
 44                    myLeft.target = canvasTemp;
 45                    //给newState增加myLeft
 46                    newState.overrides[0] = myLeft;
 47                    var myTop:SetStyle = new SetStyle();
 48                    myTop.name="top";
 49                    myTop.value= y;
 50                    myTop.target = canvasTemp;
 51                    newState.overrides[1] = myTop;
 52                    var myWidth:SetProperty = new SetProperty();
 53                    myWidth.name="width";
 54                    myWidth.value= width;
 55                    myWidth.target = canvasTemp;
 56                    newState.overrides[2] = myWidth;
 57                    var myHeight:SetProperty = new SetProperty();
 58                    myHeight.name="height";
 59                    myHeight.value= height;
 60                    myHeight.target = canvasTemp;
 61                    newState.overrides[3] = myHeight;
 62                    
 63                    return newState;
 64
 65                }
 66                
 67                //得到起始状态,注意起始状态宽和高都是0，即不显示
 68                private function getStartState(canvasTemp:Canvas,x:Number,y:Number): State
 69                {
 70                    var newState:State;
 71                    newState = new State();
 72                    newState.name = "toStart";
 73                    var myLeft:SetStyle = new SetStyle();
 74                    myLeft.name="left";
 75                    myLeft.value= x;
 76                    myLeft.target = canvasTemp;
 77                    newState.overrides[0] = myLeft;
 78                    var myTop:SetStyle = new SetStyle();
 79                    myTop.name="top";
 80                    myTop.value= y;
 81                    myTop.target = canvasTemp;
 82                    newState.overrides[1] = myTop;
 83                    var myWidth:SetProperty = new SetProperty();
 84                    myWidth.name="width";
 85                    myWidth.value= "0";
 86                    myWidth.target = canvasTemp;
 87                    newState.overrides[2] = myWidth;
 88                    var myHeight:SetProperty = new SetProperty();
 89                    myHeight.name="height";
 90                    myHeight.value= "0";
 91                    myHeight.target = canvasTemp;
 92                    newState.overrides[3] = myHeight;
 93                    
 94                    return newState;
 95
 96                }
 97                
 98                //显示弹出的层
 99                private function showPop():void
100                {
101                    //给states增加状态toEnd
102                    states.push(getEndState(Canvas1,lbRemark.x+lbRemark.width+50,lbRemark.y+lbRemark.height,500,300));
103                    Canvas1.x=lbRemark.x+lbRemark.width;
104                    Canvas1.y=lbRemark.y+lbRemark.height;
105                    currentState="toEnd";
106                }
107                //隐藏弹出的层
108                private function hiddenPop():void
109                {
110                    //给states增加toStart状态
111                    states.push(getStartState(Canvas1,lbRemark.x+lbRemark.width+50+250,lbRemark.y+lbRemark.height+150));
112                    currentState="toStart";
113                }
114             ]]>
115         </mx:Script>
116         <mx:transitions>
117               <mx:Transition fromState="*" toState="*">
118                   <mx:Sequence id="t1" target="{Canvas1}">            
119                       <mx:Parallel>
120                         <mx:Move duration="300"/>
121                         <mx:Resize duration="300"/>
122                       </mx:Parallel>    
123                </mx:Sequence>
124            </mx:Transition>
125           </mx:transitions>
126         <mx:LinkButton label="点击我" x="100" y="40" id="lbRemark" fontSize="12" click="showPop();" mouseOut="hiddenPop();">
127         </mx:LinkButton>
128         <mx:Canvas  styleName="PopupCanvas"  id="Canvas1" width="0" height="0">
129         </mx:Canvas>
130</mx:Application>

样例展现：