留言首页
当前位置：
首页
>
编程社区
>
Flex
> Flex4 - Effect效果总结及使用样例（附demo）

Flex4 - Effect效果总结及使用样例（附demo）

2014-12-09 发布：hangge 阅读：765
1，如何触发效果（Flex4中有下列3类不同的效果触发器）：
（1）由事件触发
         addedEffect：当组件添加到容器中时触发。
         creationCompleteEffect：组件创建完毕时触发。
         focusInEffect：组件获得焦点时触发。
         focusOutEffect：组件失去焦点时触发。
         hideEffect：当组件的visible属性更改为false时触发。
         mouseDownEffect：按下鼠标时触发。
         mouseUpEffect：释放鼠标时触发。
         moveEffect：组件移动时触发。
         removedEffect：组件被移除时触发。
         resizeEffect：组件改变大小时触发。
         rollOutEffect：鼠标从组件上移开时触发。
         rollOverEffect：鼠标移动到组件上时触发。
         showEffect：组件的visible属性更改为true时触发。

注意：自定义组件也可以提供效果触发器，使用下面的元数据标签即可：
[Effect(name="eventNameEffect",event="eventName")]
下面例子是，当鼠标移入图片图片会放大，移出又缩小：
    
<?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">
  <s:layout>
    <s:VerticalLayout paddingLeft="20" paddingTop="20" />
  </s:layout>
  <fx:Declarations>
    <s:Resize id="fxEnlarge" widthTo="100" heightTo="100" />
    <s:Resize id="fxShrink"  widthTo="50" heightTo="50"/>
  </fx:Declarations>
  <s:Group width="50" height="50" 
           rollOverEffect="{fxEnlarge}" rollOutEffect="{fxShrink}">
    <s:Rect id="box" width="100%" height="100%">
      <s:fill>
        <s:SolidColor color="black" />
      </s:fill>
    </s:Rect>
  </s:Group>
</s:Application>
（2）以编程的方式应用效果  
effect.play();
（3）使用状态过渡来触发效果：
下面例子是状态切换时自动调用Resize效果，而且不用指定效果属性的具体值，Transition会根据目标对象的新状态的值相应地应用这些属性。
    
<?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/halo">
  <s:layout>
    <s:VerticalLayout/>
  </s:layout>
  <s:states>
    <s:State name="orange" />
    <s:State name="black" />
  </s:states>
  <s:transitions>
    <s:Transition fromState="*" toState="*">
      <s:Resize target="{box}" />
    </s:Transition>
  </s:transitions>
  <s:HGroup>
    <s:Button label.orange="Black" label.black="Orange">
      <s:click>
        <![CDATA[
        currentState = (currentState == 'orange' ? 'black' : 'orange');
        ]]>
      </s:click>
    </s:Button>
  </s:HGroup>
  <s:Rect id="box" width="100" height="100"
          width.black="50" height.black="50">
    <s:fill>
      <s:SolidColor color.black="#000000" color.orange="#de7800" />
    </s:fill>
  </s:Rect>
</s:Application>

2，Flex内置效果说明
（1）Fade效果
Fade效果就是在一定时间内改变组件的alpha属性。
<?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">
  <s:layout>
    <s:VerticalLayout/>
  </s:layout>
  <fx:Declarations>
    <s:Fade id="effect" alphaFrom="1" alphaTo="0" target="{image}" />
  </fx:Declarations>
  <s:BitmapImage id="image" alpha="1" source="@Embed('images/flex.jpg')" />
  <s:Button id="mybutton" label="测试!" click="effect.play()" />
</s:Application>
（2）Move和Move3D效果
即修改组件的x,y或z属性从一个位置移动到另一位置。下面例子是直接设置组件的xy坐标，从而通过moveEffect事件来触发Move效果: 

<?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">
  <s:layout>
    <s:VerticalLayout/>
  </s:layout>
  <s:Group id="mygroup" moveEffect="Move">
    <s:BitmapImage id="image" source="@Embed('images/flex.jpg')" />
  </s:Group>
  <s:Button id="mybutton" label="测试!">
    <s:click>
      <![CDATA[
        mygroup.x += 50;
      ]]>
    </s:click>
  </s:Button>
</s:Application>
（3）Resize效果
通过改变组件的width和height来实现效果。

（4）Scale和Scale3D效果
通过改变组件的scaleX，scaleY和scaleZ来实现效果。

（5）Rotate效果
通过修改组件的rotation属性值来实现旋转效果，注意两个属性：
applyChangesPostLayout：控制在旋转之前还是之后应用布局更改 
autoCenterTransform：控制旋转是否绕对象中心（width/2，height/2）发生 

<?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">
  <s:layout>
    <s:HorizontalLayout />
  </s:layout>
  <fx:Declarations>
    <s:Rotate id="effect1" target="{image1}" angleBy="45" 
              applyChangesPostLayout="true" autoCenterTransform="true" />
	<s:Rotate id="effect2" target="{image2}" angleBy="45" 
				applyChangesPostLayout="false" autoCenterTransform="true" />
  </fx:Declarations>
	<s:VGroup>
		<s:BitmapImage id="image1" source="@Embed('images/flex.jpg')" />
		<s:Button label="测试!" click="effect1.play()" />
	</s:VGroup>
	<s:VGroup>
		<s:BitmapImage id="image2" source="@Embed('images/flex.jpg')" />
		<s:Button label="测试!" click="effect2.play()" />
	</s:VGroup>
</s:Application>
（6）Rotate3D效果
通过修改组件的rotationX，rotationY，rotationZ来实现效果 

<?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">
  <s:layout>
    <s:VerticalLayout />
  </s:layout>
  <fx:Declarations>
    <s:Rotate3D id="effect1" target="{image1}" angleXFrom="0" angleXTo="360" autoCenterTransform="true" />
	<s:Rotate3D id="effect2" target="{image1}" angleYFrom="0" angleYTo="360" autoCenterTransform="true" />
	<s:Rotate3D id="effect3" target="{image1}" angleZFrom="0" angleZTo="360" autoCenterTransform="true" />
  </fx:Declarations>
	<s:BitmapImage id="image1" source="@Embed('images/flex.jpg')"/>
	<s:HGroup>
		<s:Button label="X" click="effect1.play()" />
		<s:Button label="Y" click="effect2.play()" />
		<s:Button label="Z" click="effect3.play()" />
	</s:HGroup>
</s:Application>
（7）CrossFade效果 
淡入淡出效果，下面给图片和按钮都使用了这个效果 

<?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">
  <s:layout>
    <s:VerticalLayout/>
  </s:layout>
  <s:states>
    <s:State name="flex" />
    <s:State name="flash" />
  </s:states>
  <fx:Declarations>
    <s:CrossFade id="crossfade" targets="{[image, mybutton]}" />
  </fx:Declarations>
  <s:transitions>
    <s:Transition effect="{crossfade}" />
  </s:transitions>
  <s:Group>
    <s:BitmapImage id="image" source="@Embed('images/flex.jpg')"
                   source.flash="@Embed('images/flash.jpg')" />
  </s:Group>
  <s:Button id="mybutton" label="Go Flash!" label.flash="Go Flex!"
            click.flash="currentState='flex'"
            click.flex="currentState='flash'"/>
</s:Application>
（8）Wipe效果 
遮罩滑出显示组件效果，下面例子同样对图片和按钮都使用了这个效果 

<?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">
  <s:layout>
    <s:VerticalLayout/>
  </s:layout>
  <fx:Script>
    <![CDATA[
      import spark.effects.WipeDirection;
    ]]>
  </fx:Script>
  <s:states>
    <s:State name="flex" />
    <s:State name="flash" />
  </s:states>
  <fx:Declarations>
    <s:Wipe id="wipe" targets="{[image, mybutton]}"
            direction="{directions.selectedItem as String}" />
  </fx:Declarations>
  <s:transitions>
    <s:Transition effect="{wipe}" />
  </s:transitions>
  <s:Group>
    <s:BitmapImage id="image" source="@Embed('images/flex.jpg')"
                   source.flash="@Embed('images/flash.jpg')" />
  </s:Group>
  <s:DropDownList id="directions" selectedIndex="0">
    <s:dataProvider>
      <s:ArrayList>
        <fx:String>{WipeDirection.LEFT}</fx:String>
        <fx:String>{WipeDirection.RIGHT}</fx:String>
        <fx:String>{WipeDirection.UP}</fx:String>
        <fx:String>{WipeDirection.DOWN}</fx:String>
      </s:ArrayList>
    </s:dataProvider>
  </s:DropDownList>
  <s:Button id="mybutton" label="Go Flash!" label.flash="Go Flex!"
            click.flash="currentState='flex'"
            click.flex="currentState='flash'"/>
</s:Application>

3，Flex核心效果类
上面的内置效果都是继承这些核心效果类的，我们也可以直接通过使用这些核心类来实现一些效果。
（1）Animate（所有效果的基类，允许进行细粒度的控制）
下面使用Animate来改变按钮宽度，和颜色，同时颜色使用插值器来进行过渡变化： 

<?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">
  <fx:Script>
    <![CDATA[
      import spark.effects.interpolation.RGBInterpolator;
    ]]>
  </fx:Script>
  <fx:Declarations>
    <s:Animate id="effect" target="{mybutton}">
      <s:SimpleMotionPath property="width" valueTo="100" />
      <s:SimpleMotionPath property="color" valueTo="#de7800"
                          interpolator="{new RGBInterpolator()}" />
    </s:Animate>
  </fx:Declarations>
  <s:Button id="mybutton" label="点击测试!" click="effect.play();" />
</s:Application>
（2）AnimateColor（随时间推移发生变化的颜色，在每个通道上对两种颜色使用插值） 

<?xml version="1.0"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Declarations>
		<s:AnimateColor id="colorEffect" targets="{[detailText, playButton]}"
						colorFrom="0x0000FF" colorTo="0xFF0000" repeatCount="2" repeatBehavior="reverse"
						effectStart="playButton.enabled=false" effectEnd="playButton.enabled=true;"/>
	</fx:Declarations>
	
	<s:Label id="detailText" width="200" color="blue"
						 text="AnimateColor效果设置 color属性随时间发生的变化的动画，
						 逐个通道地在给定的 from/to颜色值之间进行插补。
						 设置 color属性的动画时请使用此效果而不是 Animate或其他效果。"/>
	<s:Button id="playButton"  label="AnimateColor"  click="colorEffect.play();"/>
</s:Application>
（3）AnimateFilter（滤镜效果）
a，使用模糊滤镜 - BlurFilter

<?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">
  <s:layout>
    <s:VerticalLayout/>
  </s:layout>
  <fx:Declarations>
    <s:BlurFilter id="blur"/>
    <s:AnimateFilter id="effect" target="{image}" bitmapFilter="{blur}">
		<s:SimpleMotionPath property="blurX" valueFrom="0" valueTo="10"/>
		<s:SimpleMotionPath property="blurY" valueFrom="0" valueTo="10"/>
	</s:AnimateFilter>
  </fx:Declarations>
  <s:BitmapImage id="image" source="@Embed('images/flex.jpg')" />
  <s:Button id="mybutton" label="Click Me!" click="effect.play()" />
</s:Application>
b，使用发光滤镜 - GlowFilter 

<?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"
			   creationComplete="{effect1.play();effect2.play();}">
  <s:layout>
    <s:HorizontalLayout paddingLeft="10" paddingTop="10" gap="20"/>
  </s:layout>
  <fx:Declarations>
    <s:GlowFilter id="glow1" color="#de7800" />
    <s:AnimateFilter id="effect1" target="{image1}" bitmapFilter="{glow1}"
					 repeatBehavior="reverse" repeatCount="0">
		<s:SimpleMotionPath property="blurX" valueFrom="0" valueTo="20"/>
		<s:SimpleMotionPath property="blurY" valueFrom="0" valueTo="20"/>
	</s:AnimateFilter>
	  
	<s:GlowFilter id="glow2" blurX="20" blurY="20" color="#de7800" />
	<s:AnimateFilter id="effect2" target="{image2}" bitmapFilter="{glow2}"
					 repeatBehavior="reverse" repeatCount="0">
		<s:SimpleMotionPath property="alpha" valueFrom="0" valueTo="1"/>
	</s:AnimateFilter> 
  </fx:Declarations>
  <s:BitmapImage id="image1" source="@Embed('images/flex.jpg')"/>
  <s:BitmapImage id="image2" source="@Embed('images/flex.jpg')"/>
</s:Application>

4，组合合成效果
<s:sequence>：顺序执行效果
<s:parallel>：并行执行效果
<s:pause>：暂停一段时间
<s:Sequence id="effect" target="{boxes}" repeatCount="5">
  <s:Parallel>
	<s:Fade alphaFrom="{boxes.alpha}" alphaTo="1" />
	<s:Scale scaleXTo="1" scaleXFrom="{boxes.scaleX}"
	         scaleYTo="1" scaleYFrom="{boxes.scaleY}"/>
  </s:Parallel>
  <s:Pause duration="2000" />
  <s:Parallel>
	<s:Fade alphaFrom="1" alphaTo="0" />
	<s:Scale scaleXTo=".5" scaleXFrom="1"
	         scaleYTo=".5" scaleYFrom="1"/>
  </s:Parallel>
</s:Sequence>

5，Flex内置的缓动器
（1）Bounce：模拟目标在受重力牵引后重新弹起的过程
（2）Elastic：目标对象的移动由一个按指数衰减的正弦波定义
（3）Linear：定义分为3个阶段的缓动：加速，匀速和减速
（4）Power：使用多项式定义缓动功能
（5）Sine：使用Sine函数定义缓动功能
示例：

<?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">
  <s:layout>
    <s:VerticalLayout/>
  </s:layout>
  <fx:Declarations>
    <s:Elastic id="easer" />
    <s:Move id="effect" target="{image}" xFrom="0" xTo="300"
            duration="4000" easer="{easer}"/>
  </fx:Declarations>
  <s:Group>
  	<s:BitmapImage id="image" source="@Embed('images/flex.jpg')" />
  </s:Group>
  <s:Button id="mybutton" label="Click Me!" click="effect.play()" />
</s:Application>
上一篇AS3 - 雪花飘舞效果 下一篇AS3 - stage.width与stage.stageWidth的区别
打赏支持
评论（0）