Flex Effect Using | Flex 效果使用

Flex中Effect的可以为程序增添特效，可以让程序更生动，下面的源码整理自Using Flex 4.6一书，将常用几种特效都演示一下：

EffectUsingExamples.mxml

<?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" pageTitle="Effect Using Examples"><s:layout><s:VerticalLayout horizontalAlign="center" paddingBottom="40" paddingLeft="40"  paddingRight="40" paddingTop="40"/></s:layout><fx:Script><![CDATA[import mx.geom.TransformOffsets;// Define an instance of TransformOffsets.private var myXForm:TransformOffsets = new TransformOffsets();// Initialize the postLayoutTransformOffsets property of the target.private function initOffsets():void {targetImg7.postLayoutTransformOffsets = myXForm;}// Move the target 20 pixels to the left and// increase its x and y scale by 0.1.private function nudgeImageLeft():void {targetImg7.postLayoutTransformOffsets.x =targetImg7.postLayoutTransformOffsets.x - 20;targetImg7.postLayoutTransformOffsets.scaleX =targetImg7.postLayoutTransformOffsets.scaleX + 0.1;targetImg7.postLayoutTransformOffsets.scaleY =targetImg7.postLayoutTransformOffsets.scaleY + 0.1;}// Move the target 20 pixels to the right and// decrease its x and y scale by 0.1.private function nudgeImageRight():void {targetImg7.postLayoutTransformOffsets.x =targetImg7.postLayoutTransformOffsets.x + 20;targetImg7.postLayoutTransformOffsets.scaleX =targetImg7.postLayoutTransformOffsets.scaleX - 0.1;targetImg7.postLayoutTransformOffsets.scaleY =targetImg7.postLayoutTransformOffsets.scaleY - 0.1;}// Reset the transform.private function resetImage():void {targetImg7.postLayoutTransformOffsets.x = 0;targetImg7.postLayoutTransformOffsets.scaleX = 1.0;targetImg7.postLayoutTransformOffsets.scaleY = 1.0;}]]></fx:Script><fx:Declarations><!-- Place non-visual elements (e.g., services, value objects) here --><s:Animate id="scaleUp"   target="{myB1}"><s:SimpleMotionPath property="scaleX"valueFrom="1.0" valueTo="1.5"/></s:Animate><s:Animate id="scaleDown"   target="{myB1}"><s:SimpleMotionPath property="scaleX"valueFrom="1.5" valueTo="1.0"/></s:Animate><s:Animate id="scaleIncrease"   target="{myB2}"><s:SimpleMotionPath property="scaleX"valueFrom="1.0" valueTo="1.5"/><s:SimpleMotionPath property="scaleY"valueFrom="1.0" valueTo="1.5"/></s:Animate><s:Animate id="scaleDecrease"   target="{myB2}"><s:SimpleMotionPath property="scaleX"valueFrom="1.5" valueTo="1.0"/><s:SimpleMotionPath property="scaleY"valueFrom="1.5" valueTo="1.0"/></s:Animate><s:Parallel id="parallelRMForward1"target="{myImage1}"><s:RotateangleBy="180"/><s:MovexBy="100"yBy="100"/></s:Parallel><s:Parallel id="parallelRMBack1"target="{myImage1}"><s:RotateangleBy="180"/><s:MovexBy="-100"yBy="-100"/></s:Parallel><s:Parallel id="parallelRMForward2"target="{myImage2}"><s:RotateangleBy="180"autoCenterTransform="true"/><s:MovexBy="100"yBy="100"autoCenterTransform="true"/></s:Parallel><s:Parallel id="parallelRMBack2"target="{myImage2}"><s:RotateangleBy="180"autoCenterTransform="true"/><s:MovexBy="-100"yBy="-100"autoCenterTransform="true"/></s:Parallel><s:Move3D id="moveEffect1" target="{targetImg1}"  xBy="100" zBy="100"  repeatCount="2" repeatBehavior="reverse"  effectStart="playButton1.enabled=false;"  effectEnd="playButton1.enabled=true;"/><s:Rotate3D id="rotateEffect1" target="{targetImg2}"angleYFrom="0" angleYTo="360"repeatCount="2" repeatBehavior="reverse"effectStart="playButton2.enabled=false;"effectEnd="playButton2.enabled=true;"/><s:Rotate3D id="rotateEffect2" target="{targetImg3}"angleYFrom="0" angleYTo="360"duration="3000"autoCenterTransform="true"repeatCount="2" repeatBehavior="reverse"effectStart="playButton3.enabled=false;"effectEnd="playButton3.enabled=true;"/><s:Rotate3D id="rotateEffect3" target="{targetImg4}"angleYFrom="0" angleYTo="360"duration="3000"repeatCount="2" repeatBehavior="reverse"effectStart="playButton4.enabled=false;"effectEnd="playButton4.enabled=true;"/><s:Rotate3D id="rotateEffect4" target="{targetImg5}"angleZFrom="0" angleZTo="360"applyChangesPostLayout="false"duration="5000"repeatCount="2" repeatBehavior="reverse"effectStart="playButton5.enabled=false;"effectEnd="playButton5.enabled=true;"/><s:Fade id="vsFade" alphaFrom="0" alphaTo="1" duration="1000"target="{vs}"/></fx:Declarations><s:Label width="100%" fontSize="24" fontFamily="微软雅黑" fontWeight="bold" text="所有示例摘抄自UsingADOBE® FLEX® 4.6"/><s:Group width="100%" height="100%"><s:layout><s:TileLayout columnWidth="300" horizontalGap="15" rowHeight="200" verticalGap="15"/></s:layout><s:Panel width="200" height="200" title="Scale example"><s:layout><s:VerticalLayout/></s:layout><s:Button id="myB1"  label="Scale Button"  mouseDown="scaleUp.end(); scaleUp.play();"  mouseUp="scaleDown.end(); scaleDown.play();"/><s:Button id="myB2"  label="Scale Button"  mouseDown="scaleDecrease.end(); scaleIncrease.play();"  mouseUp="scaleIncrease.end(); scaleDecrease.play();"/></s:Panel><s:Panel width="200" height="200" title="Parallel effect example"><s:layout><s:VerticalLayout/></s:layout><s:Button label="Play Effect Forward"  x="10" y="10"  click="parallelRMForward1.end();parallelRMForward1.play();"/><s:Button label="Play Effect Backward"  x="150" y="10"  click="parallelRMBack1.end();parallelRMBack1.play();" /><s:Image id="myImage1" x="10" y="50" width="100" height="100" source="@Embed('resource/images/castle.png')"/></s:Panel><s:Panel width="200" height="200" title="Parallel effect example"><s:layout><s:VerticalLayout/></s:layout><s:Button label="Play Effect Forward"  x="10" y="10"  click="parallelRMForward2.end();parallelRMForward2.play();"/><s:Button label="Play Effect Backward"  x="150" y="10"  click="parallelRMBack2.end();parallelRMBack2.play();" /><s:Image id="myImage2" width="100" height="100" source="@Embed('resource/images/castle.png')"/></s:Panel><s:Panel title="Move3D Effect Example" width="200" height="200" ><s:Image id="targetImg1" horizontalCenter="0" verticalCenter="0" width="100" height="100" source="@Embed(source='resource/images/castle.png')"/><s:Button id="playButton1"  left="5" bottom="5"  label="Move3D"  click="moveEffect1.play();"/></s:Panel><s:Panel title="Move3D Effect Example" width="200" height="200" ><s:Image id="targetImg2" horizontalCenter="0" verticalCenter="0" width="100" height="100" source="@Embed(source='resource/images/castle.png')"/><s:Button id="playButton2"  left="5" bottom="5"  label="Rotate3D"  click="rotateEffect1.play();"/></s:Panel><s:Panel title="Move3D Effect Example" width="200" height="200" ><s:HGrouphorizontalCenter="0"verticalCenter="0"><s:Image width="100" height="100" source="@Embed(source='resource/images/castle.png')"/><s:Image id="targetImg3" width="100" height="100" source="@Embed(source='resource/images/castle.png')"/><s:Image width="100" height="100" source="@Embed(source='resource/images/castle.png')"/></s:HGroup><s:Button id="playButton3"  left="5" bottom="5"  label="Rotate3D"  click="rotateEffect2.play();"/></s:Panel><s:Panel title="Move3D Effect Example" width="200" height="200" ><s:HGrouphorizontalCenter="0"verticalCenter="0"><s:Image width="100" height="100" source="@Embed(source='resource/images/castle.png')"/><s:Image id="targetImg4" width="100" height="100" source="@Embed(source='resource/images/castle.png')"/><s:Image width="100" height="100" source="@Embed(source='resource/images/castle.png')"/></s:HGroup><s:Button id="playButton4"  left="5" bottom="5"  label="Rotate3D"  click="rotateEffect3.play();"/></s:Panel><s:Panel title="Move3D Effect Example" width="200" height="200" ><s:HGrouphorizontalCenter="0"verticalCenter="0"><s:Image width="100" height="100" source="@Embed(source='resource/images/castle.png')"/><s:Image id="targetImg5" width="100" height="100" source="@Embed(source='resource/images/castle.png')"/><s:Image width="100" height="100" source="@Embed(source='resource/images/castle.png')"/></s:HGroup><s:Button id="playButton5"  left="5" bottom="5"  label="Rotate3D"  click="rotateEffect4.play();"/></s:Panel><s:Panel title="Move3D Effect Example" width="200" height="200" ><s:HGrouphorizontalCenter="0"verticalCenter="0"><s:Imagewidth="100" height="100"source="@Embed(source='resource/images/castle.png')"/><s:Image id="targetImg7" width="100" height="100" source="@Embed(source='resource/images/castle.png')" creationComplete="initOffsets();"/><s:Imagewidth="100" height="100"source="@Embed(source='resource/images/castle.png')"/></s:HGroup><s:HGroup left="5" bottom="5"><s:Button id="nudgeLeftButton"  label="Nudge Left"  click="nudgeImageLeft();"/><s:Button id="nudgeRightButton"  label="Nudge Right"  click="nudgeImageRight();"/><s:Button id="resetButton"  label="Reset"  click="resetImage();"/></s:HGroup></s:Panel></s:Group></s:Application>

效果参加：

http://cachetian.com/blog/tech/flex/examples/EffectUsingExamples.html