刚刚学了FLEX,感觉很不错,尤其是它的动画效果,感觉很炫。但是实验的一下,觉得也并不是那么完美。
首先,要运用绝对布局,你才能够使用动画,当然像Fade之类的效果还是可以用的,我这样主要探讨的的是Risize和Move,那么是必须使用绝对布局的。由于做的时候我是考虑了屏幕分辨率的,所以用了约束,所以又出问题了。使用了约束后比如这样的-------- right="155" left="400" ------oh mygod 那么Move中的x轴上移动是无效的,而且Risize的宽度缩放也是没有效果的。目前我还没有想到解决办法:既要满足不同分辨率下的效果,而且还不能要滚动条,因为有滚动条实在不爽,在这样的条件下使用那两种很常用的效果。
So,为了运用动画,不能把x,y轴都设置约束,做移动动画的时候,还应该注意一个问题,这是我昨天遇到的问题,我做的是状态之间的变化,比如从A->B状态时,有一个控件移出到了屏幕外面去,当从B->A返回时,你又从屏幕外面去把它移回来,你会发现该控件不存在了。呵呵其实它并不是隐藏了,而且在屏幕外边,你看不到而已,我查了一下API文档,发现里面有一个--- effectEnd ---事件,知道怎么做了吧,当动画完成以后,你要把控件的位置还原。
好了,我不善言辞,大家可能听得模模糊糊的,我还是搞个小例子吧。
--------------------------------------
--------------------------------------
--------------------------------------
真是抱歉,刚刚又试了一下,发现动画中有一个属性叫做---disableLayout---将这个值设置为true,那么约束的问题就迎刃而解了,哎 真不该写这篇博客,简直是误人子弟啊,我就是想把自己的快乐分享给大家,比较现在flex的资料实在是太少了,大家都应该共同的努力,创造更多的资料~~~博客怎么不能插入图片啊,应该说是必须是网络地址,我总不能把图片全部上传到空间吧!哎,真不好!---------------------------------------------------------------
---------------------------------------------------------------------
--------------------------------------
<?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" minWidth="955" minHeight="600" currentState="loginState"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <![CDATA[ protected function login_clickHandler(event:MouseEvent):void { this.currentState="mainState"; } protected function logout_clickHandler(event:MouseEvent):void { this.currentState="loginState"; } ]]> </fx:Script> <s:states> <s:State name="loginState"/> <s:State name="mainState"/> </s:states> <s:transitions> <s:Transition fromState="loginState" toState="mainState"> <s:Sequence> <s:Parallel target="{loginPal}" effectEnd="loginPal.x=50"> <s:Fade/> <s:Move target="{loginPal}" xTo="-300"/> </s:Parallel> <s:RemoveAction target="{loginPal}"/> <s:Parallel targets="{[pal1,pal2,pal3]}"> <s:AddAction/> <s:Fade/> <s:Move target="{pal1}" xFrom="-300"/> <s:Move target="{pal2}" yFrom="-300"/> <s:Move target="{pal3}" yFrom="1000"/> </s:Parallel> </s:Sequence> </s:Transition> <s:Transition fromState="mainState" toState="loginState"> <s:Sequence> <s:Parallel targets="{[pal1,pal2,pal3]}" effectEnd="pal1.x=20;pal2.y=27;pal3.y=273"> <s:AddAction/> <s:Fade/> <s:Move target="{pal1}" xTo="-300"/> <s:Move target="{pal2}" yTo="-300"/> <s:Move target="{pal3}" yTo="1000"/> </s:Parallel> <s:RemoveAction targets="{[pal1,pal2,pal3]}"/> <s:Parallel target="{loginPal}"> <s:AddAction/> <s:Fade/> <s:Move xFrom="-300" /> </s:Parallel> </s:Sequence> </s:Transition> </s:transitions> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <s:Panel x="50" y="69" width="250" height="200" id="loginPal" includeIn="loginState"> <s:Button x="63" y="87" label="下一个状态" id="login" click="login_clickHandler(event)"/> </s:Panel> <s:Panel includeIn="mainState" x="20" y="28" width="250" height="537" id="pal1"> <s:Button x="35" y="29" label="返回" id="logout" click="logout_clickHandler(event)"/> </s:Panel> <s:Panel includeIn="mainState" y="27" height="200" id="pal2" right="53" left="300"> </s:Panel> <s:Panel includeIn="mainState" y="273" height="292" id="pal3" right="51" left="302"> </s:Panel> </s:Application>