<?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="assets/images/111.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="assets/images/i_flag.png" 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="assets/images/3d.png" width="100%" height="100%"/>
</mx:Canvas>
</mx:Application>
分享到:
相关推荐
这是项目文件大家运行一下看看效果....... 如果大家整出更炫的效果,拿出来分享下哦 博文链接:https://hacker47.iteye.com/blog/196366
Implementierung des State-Transition-Diagram-Editors
LINEAR TIME-VARYING SYSTEMS - STATE TRANSITION MATRIX
transition属性是一个复合属性,用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。其基本语法格式如下: transition:property duration...
methods which may transition the object into a new state. A flow-sensitive, permission-based type system helps developers track which state objects are in. First-class typestates are a powerful ...
Stateflow逻辑系统建模2
只需下载dist/phaser-state-transition.umd.js文件,即可完成操作,但这不是推荐的方法。 您应该通过npm使用它。 您可以更好地控制本地保留的版本。 用法 使用它的最简单方法是仅输入一个过渡即可。 import { ...
描述了状态之间的转换模型,作者Anup Kumar Bandyopadhyay
ffmpeg-gl-transition
实现Android动画Transition使用方法
Flash transition effect.
transition.js
State Transition Factor of Three-state Markov Channels
前端开源库-glsl-transition-vignette-gridglsl transition vignette网格,高效呈现glsl transition vignette网格(缓存 拉入webgl画布)
弹出窗口_Elastic Transition
Animate Transition 能够以 12 种预设方式来切换图片,且该插件使用了硬件加速 CSS 转换,所以性能极好。该插件可用于网站外观设计,导航,甚至是移动应用程序中的页面切换。 代码示例: AnimateTransition({ ...
css3 transition属性鼠标悬停图标按钮动画提示框效果
transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and transition-delay。 语法 transition: property duration timing-function delay; 属性: ...