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
分享到:
相关推荐
在运行项目之前,通常需要编译和配置源代码,这可能涉及到克隆`ffmpeg-gl-transition-master`仓库,然后遵循提供的构建指南。 在实际应用中,你可能会遇到一些技术挑战,比如兼容性问题(取决于你的硬件和驱动程序...
综上所述,“State-Transition-Diagram-Editor”的实施是一个综合性的项目,它不仅涉及到了软件工程的基本原理和技术细节,还考虑到了用户的实际需求和体验。通过这样的编辑器,开发者能够更加高效地创建和维护复杂...
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"压缩包中,包含了一个自定义的ElementUI组件——vp-drawer-transition,以及一个可能用于展示或测试该组件的"index.vue"文件。 首先,我们来深入了解ElementUI中的Drawer组件。...
"glsl-transition-fade"就是一个这样的开源库,专为实现GLSL(OpenGL Shading Language)中的淡入淡出过渡效果而设计。GLSL是一种着色语言,用于为图形渲染添加更精细的控制,特别是在WebGL中,它允许我们直接在GPU...
入门将styled-transition-group及其对等项依赖关系添加到您的包中: styled-transition-group@1与styled-components v2-v3兼容。 styled-transition-group@2与styled-components v4兼容。 yarn add styled-...
use ( vueg , new Router ( ) , Options ) // 传入实例化后的router, Options为可选的插件配置 插件指令 插件注册了某个v-transition的指令,接收一个可选的Options参数,其包含的配置优先级高于配置。 启用插件: ...
只需下载dist/phaser-state-transition.umd.js文件,即可完成操作,但这不是推荐的方法。 您应该通过npm使用它。 您可以更好地控制本地保留的版本。 用法 使用它的最简单方法是仅输入一个过渡即可。 import { ...
前端开源库-glsl-transition-vignette-gridglsl transition vignette网格,高效呈现glsl transition vignette网格(缓存 拉入webgl画布)
《前端开源库-glsl-transition-core:开启WebGL视觉特效的新篇章》 在现代网页开发中,前端技术的迭代日新月异,为了提供更丰富、更动态的用户体验,开发者们不断探索新的工具和技术。其中,"glsl-transition-core...
《transition-x:Android转换的声明性Kotlin DSL详解》 在Android应用开发中,界面间的过渡动画和状态切换是提升用户体验的重要环节。transition-x库是一个开源项目,它为Android提供了声明性的Kotlin DSL,使得...
在"animated-transition-effects-master"中,你可能找到以下几类常见的动画效果: 1. **淡入淡出**:这是一种简单但经典的过渡效果,一个页面逐渐消失,另一个页面同时出现,使页面切换看起来无缝连接。 2. **滑动...
在"前端项目-d3-transition-master"这个文件夹中,可能包含以下内容: - `index.html`:项目的主入口文件,包含了HTML结构和内联的JavaScript代码,用于加载和运行D3可视化。 - `style.css`:CSS样式表,定义了图表...
要直接替换react-addons-transition-group和react-addons-css-transition-group ,请使用v1版本。 该版本的文档和代码可在分支上获得。 我们不再更新v1代码库,请尽可能升级到最新版本一组用于随时间管理组件状态...
【前端开源库-glsl-transition-vignette】是一个用于前端开发的开源库,专注于实现GLSL(OpenGL Shading Language)过渡效果,特别是渐晕(Vignette)效果。这个库为Web开发者提供了一种动态且可自定义的方式来在...
标题中的"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`添加到...