关于Flex动画的一点感想

最新推荐文章于 2022-01-21 23:48:28 发布

最新推荐文章于 2022-01-21 23:48:28 发布 · 120 阅读

文章标签：

本文讨论了在使用Flex进行动画制作时遇到的布局约束问题，特别是关于移动和调整大小效果时需要使用绝对布局的情况。同时，文章提供了解决在不同分辨率下保持效果一致并避免滚动条的方法，以及在动画结束时还原控件位置的技巧。

刚刚学了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>