Flex实现组件自定义倒影效果之二：继承于Effect

经过笔者现今总结发现制作自定义组件倒影效果可以继承于UIComponent，还有一种是继承于Effect。按照Flex 的实现机制，创建效果时需要同时创建工厂类和相应的实例类。工厂类用来控制动画播放，而实例类则用来实现动画效果。

工厂类ReflectEffect.as：

package myComponents
{
import mx.effects.Effect;
import mx.effects.IEffectInstance;
public class ReflectEffect extends Effect
{
public function ReflectEffect(target:Object=null)
{
super(target);
instanceClass=ReflectEffectInstance;
}
}
}

实例类ReflectEffectInstance.as：

package myComponents
{
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.GradientType;
import flash.events.Event;
import flash.geom.Matrix;

import mx.core.UIComponent;
import mx.effects.EffectInstance;
import mx.states.AddChild;


public class ReflectEffectInstance extends EffectInstance
{
private var _target:UIComponent;
//创建一个UIComponent对象来绘制倒影
private var uiRef:UIComponent;
//创建一个遮罩对象来实现倒影的渐隐
private var mask:UIComponent;
//创建一个容器以便添加uiRef和mask
private var uiContainer:UIComponent;
//是否创建完成
private var created:Boolean=false;
//创建一个BitmapData对象，以便保存组件的截图
private var bmpRefleData:BitmapData;
//构造函数
public function ReflectEffectInstance(target:Object)
{
super(target);
_target=target as UIComponent;

}
//初始化方法
public function initReflection():void
{
if(created)
return;
uiContainer=new UIComponent();
uiRef=new UIComponent();
mask=new UIComponent();

//使用位图缓存
mask.cacheAsBitmap=true;
uiRef.cacheAsBitmap=true;
_target.parent.addChild(uiContainer);
uiContainer.addChild(uiRef);
uiContainer.addChild(mask);
created=true;
}
//设置倒影位置和大小
private function setPosition():void
{
if(!uiContainer)
return;
var w:Number=_target.width;
var h:Number=_target.height;
uiContainer.x=_target.x;
uiContainer.y=_target.y+h;

}
//绘制倒影
private function drawRefelction(w:Number,h:Number):void
{
if(!uiRef)
return;
bmpRefleData=new BitmapData(w,h,true,0x00000000);
bmpRefleData.draw(_target as DisplayObject);
//创建转换矩阵
var matrix:Matrix=new Matrix(1,0,0,-1,0,h);
uiRef.graphics.clear();
uiRef.graphics.beginBitmapFill(bmpRefleData,matrix,false,true);
uiRef.graphics.drawRect(0,0,w,h);
uiRef.graphics.endFill();
uiRef.width=w;
uiRef.height=h;
}
//绘制遮罩
private function drawMask(w:Number,h:Number):void
{
if(!mask)
return;
//设置遮罩的起止颜色变化值的数组
var colors:Array=[0x989898,0x909090];
//设置透明度的起止值的数组  0为不透明，1为透明
var alphas:Array=[0.6,1];
//设置遮罩显示范围 值 0 表示渐变框中的左侧位置，255 表示渐变框中的右侧位置。 
var ratios:Array=[0,150];
var gmatrix:Matrix=new Matrix();
gmatrix.createGradientBox(w,h,Math.PI/2,0,0);
mask.graphics.clear();
mask.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,gmatrix);
mask.graphics.drawRect(0,0,w,h);
mask.graphics.endFill();
mask.width=w;
mask.height=h;
}
//enterFrame事件处理
private function enterFrame(e:Event):void
{
if(created)
{
var w:Number=_target.width;
var h:Number=_target.height;
drawRefelction(w,h);
drawMask(w,h);

}
else
{
initReflection();
}
}
public override function set target(value:Object):void
{
_target=value as UIComponent;
_target.addEventListener(Event.ENTER_FRAME,enterFrame,false,0,true);
}
public override function get target():Object
{
return _target;
}
public override function play():void
{
super.play();
}
public override function pause():void
{
super.pause();
}
public override function end():void
{
super.end();
}
}
}

这样我们实现倒影的类已经完成，最后就是将他显示出来，代码如下：

<?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"xmlns:MyEffect="myComponents.*"
  xmlns:util="myComponents.*" backgroundColor="0x909090">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务值对象）放在此处 -->
<MyEffect:ReflectEffect id="reflect"/>
</fx:Declarations>

<!-- 使用时应该在指定效果的组件外添加一个父容器，否则会出现错误 -->

<mx:VBox x="427" y="105">
<mx:Panel id="panel1" creationCompleteEffect="{reflect}" x="446" y="106">
<mx:TextInput>

</mx:TextInput>
<mx:Image source="images/3.png" width="173" height="172"/>
</mx:Panel>
</mx:VBox>
</s:Application>

完成后与使用继承于UIComponent的倒影效果对比图：

注：另外笔者在网上搜罗，发现一个利用swc文件导入直接使用的例子，链接：http://www.iteye.com/topic/1115866