当前位置: > > > Flex4 - Effect效果总结及使用样例(附demo)

Flex4 - Effect效果总结及使用样例(附demo)

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>
评论0