`
hacker47
  • 浏览: 339971 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

FLEX入门实例--------transition,state的综合运用

阅读更多

                          FLEX入门实例--------transition,state的综合运用

废话少说,看代码:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="black">
	<mx:states>
		<mx:State name="can1State">
			<mx:SetProperty target="{can3}" name="width" value="100"/>
			<mx:SetProperty target="{can3}" name="height" value="100"/>
			<mx:SetProperty target="{can3}" name="x" value="10"/>
			<mx:SetProperty target="{can3}" name="y" value="120"/>
			<mx:SetProperty target="{can1}" name="width" value="300"/>
			<mx:SetProperty target="{can1}" name="height" value="300"/>
			<mx:SetProperty target="{can1}" name="x" value="120"/>
			
			<mx:SetProperty target="{can2}" name="y" value="10"/>
		</mx:State>
		<mx:State name="can2State" basedOn="can1State">
			<mx:SetProperty target="{can1}" name="width" value="100"/>
			<mx:SetProperty target="{can1}" name="height" value="100"/>
			<mx:SetProperty target="{can1}" name="x" value="10"/>
			<mx:SetProperty target="{can1}" name="y" value="120"/>
			
			<mx:SetProperty target="{can2}" name="width" value="300"/>
			<mx:SetProperty target="{can2}" name="height" value="300"/>
			<mx:SetProperty target="{can2}" name="x" value="120"/>
			
			<mx:SetProperty target="{can3}" name="y" value="10"/>
		</mx:State>
	</mx:states>
	<mx:Script>
		<![CDATA[
			import mx.effects.easing.Bounce;
			[Bindable]
			private var ss:*=can3;
			
			[Bindable]
			private var up:*=can2;
			
			[Bindable]
			private var down:*=can3;
		]]>
	</mx:Script>
	<mx:Style>
		Canvas{
			borderThickness:"3";
			 borderStyle:"solid";
			 horizontalScrollPolicy:"off";
			 verticalScrollPolicy:"off";
		}
	</mx:Style>
	<mx:transitions>
		<mx:Transition>
			<mx:Parallel targets="{[can1,can2,can3]}">
				<mx:Resize duration="200" easingFunction="Bounce.easeOut"/>
				<mx:Move xTo="120" duration="500" yTo="10" target="{ss}"/>
				<mx:Move xTo="10" yTo="10" duration="500" target="{up}"/>
				<mx:Move xTo="10" yTo="120" duration="500" target="{down}"/>
				<mx:Resize widthFrom="100" widthTo="300" heightFrom="100" heightTo="300" duration="1000" target="{ss}"/>
				<mx:Sequence>
					<mx:Blur duration="500" blurYFrom="1.0" blurYTo="20.0"/>
					<mx:Blur duration="500" blurYFrom="20.0" blurYTo="1"/>
				</mx:Sequence>
			</mx:Parallel>
		</mx:Transition>
	</mx:transitions>
	<mx:Canvas borderColor="red" backgroundColor="black"  id="can1" width="100" height="100" x="10" y="10" click="ss=can1;up=can2;down=can3;currentState='can1State';">
		<mx:Image source="asset/1.jpg" width="100%" height="100%" scaleX="1" scaleY="1"/>
	</mx:Canvas>
	<mx:Canvas borderColor="green" backgroundColor="white" id="can2" width="100" height="100" x="10" y="120" click="ss=can2;up=can3;down=can1;currentState='can2State';">
		<mx:Image source="asset/2.jpg" width="100%" height="100%"/>
	</mx:Canvas>
	<mx:Canvas borderColor="blue" backgroundColor="red" id="can3" width="300" height="300" x="120" y="10" click="ss=can3;up=can1;down=can2;currentState='';">
		<mx:Image source="asset/3.jpg" width="100%" height="100%"/>
	</mx:Canvas>
</mx:Application>

 

  • Transition.rar (934 Bytes)
  • 描述: 这是项目文件大家运行一下看看效果....... 如果大家整出更炫的效果,拿出来分享下哦
  • 下载次数: 465
5
3
分享到:
评论
3 楼 aogu_xt 2012-04-04  
要是看代码还不如看flex的demo了。
2 楼 yysct2005 2010-01-03  
japankn 写道
还不如讲讲它们之间的关系呢!!



我也觉得是
1 楼 japankn 2009-12-21  
还不如讲讲它们之间的关系呢!!

相关推荐

    ffmpeg-gl-transition

    在运行项目之前,通常需要编译和配置源代码,这可能涉及到克隆`ffmpeg-gl-transition-master`仓库,然后遵循提供的构建指南。 在实际应用中,你可能会遇到一些技术挑战,比如兼容性问题(取决于你的硬件和驱动程序...

    Implementierung des State-Transition-Diagram-Editors

    综上所述,“State-Transition-Diagram-Editor”的实施是一个综合性的项目,它不仅涉及到了软件工程的基本原理和技术细节,还考虑到了用户的实际需求和体验。通过这样的编辑器,开发者能够更加高效地创建和维护复杂...

    Flex Builder Plug-in and Adobe

    The transition from Flex Builder to Eclipse as the primary development environment is a common one, particularly in teams with a strong Java background. This shift leverages the flexibility and ...

    vp-drawer-transition.zip

    在给定的"vp-drawer-transition.zip"压缩包中,包含了一个自定义的ElementUI组件——vp-drawer-transition,以及一个可能用于展示或测试该组件的"index.vue"文件。 首先,我们来深入了解ElementUI中的Drawer组件。...

    前端开源库-glsl-transition-fade

    "glsl-transition-fade"就是一个这样的开源库,专为实现GLSL(OpenGL Shading Language)中的淡入淡出过渡效果而设计。GLSL是一种着色语言,用于为图形渲染添加更精细的控制,特别是在WebGL中,它允许我们直接在GPU...

    styled-transition-group

    入门将styled-transition-group及其对等项依赖关系添加到您的包中: styled-transition-group@1与styled-components v2-v3兼容。 styled-transition-group@2与styled-components v4兼容。 yarn add styled-...

    Vueg----page-transition-plugin:为Vue应用添加页面间的转场特效(vue-router的页面级转换插件)

    use ( vueg , new Router ( ) , Options ) // 传入实例化后的router, Options为可选的插件配置 插件指令 插件注册了某个v-transition的指令,接收一个可选的Options参数,其包含的配置优先级高于配置。 启用插件: ...

    phaser-state-transition:Phaser.js的状态转换插件

    只需下载dist/phaser-state-transition.umd.js文件,即可完成操作,但这不是推荐的方法。 您应该通过npm使用它。 您可以更好地控制本地保留的版本。 用法 使用它的最简单方法是仅输入一个过渡即可。 import { ...

    前端开源库-glsl-transition-vignette-grid

    前端开源库-glsl-transition-vignette-gridglsl transition vignette网格,高效呈现glsl transition vignette网格(缓存 拉入webgl画布)

    前端开源库-glsl-transition-core

    《前端开源库-glsl-transition-core:开启WebGL视觉特效的新篇章》 在现代网页开发中,前端技术的迭代日新月异,为了提供更丰富、更动态的用户体验,开发者们不断探索新的工具和技术。其中,"glsl-transition-core...

    transition-x,用于编排android转换的声明性kotlin dsl.zip

    《transition-x:Android转换的声明性Kotlin DSL详解》 在Android应用开发中,界面间的过渡动画和状态切换是提升用户体验的重要环节。transition-x库是一个开源项目,它为Android提供了声明性的Kotlin DSL,使得...

    animated-transition-effects

    在"animated-transition-effects-master"中,你可能找到以下几类常见的动画效果: 1. **淡入淡出**:这是一种简单但经典的过渡效果,一个页面逐渐消失,另一个页面同时出现,使页面切换看起来无缝连接。 2. **滑动...

    前端项目-d3-transition.zip

    在"前端项目-d3-transition-master"这个文件夹中,可能包含以下内容: - `index.html`:项目的主入口文件,包含了HTML结构和内联的JavaScript代码,用于加载和运行D3可视化。 - `style.css`:CSS样式表,定义了图表...

    react-transition-group:当React组件进入或离开DOM时执行动画的一种简便方法

    要直接替换react-addons-transition-group和react-addons-css-transition-group ,请使用v1版本。 该版本的文档和代码可在分支上获得。 我们不再更新v1代码库,请尽可能升级到最新版本一组用于随时间管理组件状态...

    前端开源库-glsl-transition-vignette

    【前端开源库-glsl-transition-vignette】是一个用于前端开发的开源库,专注于实现GLSL(OpenGL Shading Language)过渡效果,特别是渐晕(Vignette)效果。这个库为Web开发者提供了一种动态且可自定义的方式来在...

    Python库 | discovery-transition-ds-2.11.7.tar.gz

    标题中的"Python库 | discovery-transition-ds-2.11.7.tar.gz"指的是一个针对Python编程语言的特定库,该库已经打包成tar.gz格式的压缩文件,名为"discovery-transition-ds-2.11.7",版本号为2.11.7。在Python生态...

    vue-transition-components:Vue.js的过渡组件集合

    `vue-transition-components` 是一个专门为Vue.js设计的过渡组件集合,它提供了一系列预定义的过渡效果,使开发者能够轻松地在项目中实现丰富的动画效果。 ### 安装与使用 要将`vue-transition-components`添加到...

Global site tag (gtag.js) - Google Analytics