Flex实现iPhone屏幕切换效果

注：本文出自dox-pro.iteye.com，为Dox.Pro原创，转载请注明出处！

      今天因为公司需要，想着写些Flex特效，拿着手里的iTouch正在思索做什么样的特效呢？突然想到可以做成iPhone视图间切换的效果，于是试着写了一个，与大家分享一下，欢迎高手排砖指教！
      这里贴出air版本的源代码，附件有Flex、Air版本的源代码和发布的Air应用
注：附件下载后去除“.rar”既可使用

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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="610" minHeight="516"
			   maxWidth="610" maxHeight="516"
			   currentState="mainScreen">
	
	<s:states>
		
		<s:State name="mainScreen"/>
		
		<s:State name="secondScreen"/>
		
		<s:State name="thirdScreen"/>
		
		<s:State name="forthScreen"/>
		
	</s:states>
	
	<!-- 
		********** Transitions Defination ************* 
	-->
	<s:transitions>
		
		<!-- to right transition -->
		<s:Transition fromState="mainScreen" toState="secondScreen">
		
			<s:Sequence>
				
				<s:Parallel targets="{[main, second]}">
					
					<s:AddAction/>
					
					<s:Fade target="{main}"/>
					
					<s:Move target="{main}" xTo="-50"/>
					
					<s:Fade target="{second}"/>
					
					<s:Move target="{second}" xFrom="380"/>
					
				</s:Parallel>
				
				<s:RemoveAction targets="{[main, second]}"/>
				
			</s:Sequence>
				
		</s:Transition>
		
		<s:Transition fromState="secondScreen" toState="thirdScreen">
			
			<s:Sequence>
				
				<s:Parallel targets="{[second, third]}">
					
					<s:AddAction/>
					
					<s:Fade target="{second}"/>
					
					<s:Move target="{second}" xTo="-50"/>
					
					<s:Fade target="{third}"/>
					
					<s:Move target="{third}" xFrom="380"/>
					
				</s:Parallel>
				
				<s:RemoveAction targets="{[second, third]}"/>
				
			</s:Sequence>
			
		</s:Transition>
		
		<s:Transition fromState="thirdScreen" toState="forthScreen">
			
			<s:Sequence>
				
				<s:Parallel targets="{[third, forth]}">
					
					<s:AddAction/>
					
					<s:Fade target="{third}"/>
					
					<s:Move target="{third}" xTo="-50"/>
					
					<s:Fade target="{forth}"/>
					
					<s:Move target="{forth}" xFrom="380"/>
					
				</s:Parallel>
				
				<s:RemoveAction targets="{[third, forth]}"/>
				
			</s:Sequence>
			
		</s:Transition>
		
		<!-- to left transition -->
		<s:Transition fromState="secondScreen" toState="mainScreen">
			
			<s:Sequence>
				
				<s:Parallel targets="{[second, main]}">
					
					<s:AddAction/>
					
					<s:Fade target="{second}"/>
					
					<s:Move target="{second}" xTo="380"/>
					
					<s:Fade target="{main}"/>
					
					<s:Move target="{main}" xFrom="-50"/>
					
				</s:Parallel>
				
				<s:RemoveAction targets="{[second, main]}"/>
				
			</s:Sequence>
			
		</s:Transition>
		
		<s:Transition fromState="thirdScreen" toState="secondScreen">
			
			<s:Sequence>
				
				<s:Parallel targets="{[third, second]}">
					
					<s:AddAction/>
					
					<s:Fade target="{third}"/>
					
					<s:Move target="{third}" xTo="380"/>
					
					<s:Fade target="{second}"/>
					
					<s:Move target="{second}" xFrom="-50"/>
					
				</s:Parallel>
				
				<s:RemoveAction targets="{[third, second]}"/>
				
			</s:Sequence>
			
		</s:Transition>
		
		<s:Transition fromState="forthScreen" toState="thirdScreen">
			
			<s:Sequence>
				
				<s:Parallel targets="{[forth, third]}">
					
					<s:AddAction/>
					
					<s:Fade target="{forth}"/>
					
					<s:Move target="{forth}" xTo="380"/>
					
					<s:Fade target="{third}"/>
					
					<s:Move target="{third}" xFrom="-50"/>
					
				</s:Parallel>
				
				<s:RemoveAction targets="{[forth, third]}"/>
				
			</s:Sequence>	
				
		</s:Transition>
		
	</s:transitions>
	
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			private function toLeftScreen():void
			{
				switch (currentState)
				{
					case 'secondScreen':
						currentState = 'mainScreen';
						break;
					case 'thirdScreen':
						currentState = 'secondScreen';
						break;
					case 'forthScreen':
						currentState = 'thirdScreen';
						break;
					default:
						break;
				}
			}
			
			private function toRightScreen():void
			{
				switch (currentState)
				{
					case 'mainScreen':
						currentState = 'secondScreen';
						break;
					case 'secondScreen':
						currentState = 'thirdScreen';
						break;
					case 'thirdScreen':
						currentState = 'forthScreen';
						break;
					default:
						break;
				}
			}
		]]>
	</fx:Script>
	
	<s:Button id="leftButton" label="上一视图"
			  click="toLeftScreen()"
			  height="37" y="389" x="210" width="92"/>
	
	<s:Button id="rightButton" label="下一视图"
			  click="toRightScreen()"
			  height="36" y="390" x="327" width="89"/>
	
	<mx:Image id="main"
			  includeIn="mainScreen" source="image/MainScreen.png" 
			  x.mainScreen="210" y.mainScreen="75" width="206" height="306" 
			  depth="1"/>
	
	<mx:Image id="second"
			  includeIn="secondScreen" source="image/TwoScreen.jpg" 
			  x.secondScreen="210" y.secondScreen="75" width="206" height="306"
			  depth="2"/>
	
	<mx:Image id="third"
			  includeIn="thirdScreen" source="image/ThreeScreen.jpg" 
			  x.thirdScreen="210" y.thirdScreen="75" width="206" height="306"
			  depth="3"/>
	
	<mx:Image id="forth"
			  includeIn="forthScreen" source="image/FourScreen.jpg" 
			  x.forthScreen="210" y.forthScreen="75" width="206" height="306"
			  depth="4"/>
	<s:Label  x="210" y="52" text="Flex实现iPhone视图切换效果"
			  fontWeight="bold" fontSize="15"/>
	
	
</s:WindowedApplication>

评论

1 楼 baixiaozhe 2011-07-27  

不错 收了