动画、特效与集合操作全解析

# 动画、特效与集合操作全解析 ## 1. 卷积滤镜动画 ### 1.1 问题与解决方案 在MXML组件上使用卷积滤镜（ConvolutionFilter）创建动画时，可创建一个`AnimationInstance`类，在`animationUpdate()`事件处理程序中实例化新的`ConvolutionFilter`实例，然后将这些实例分配给目标`DisplayObject`的滤镜数组。 ### 1.2 卷积滤镜的构造参数 卷积滤镜的构造函数签名如下： ```actionscript public function ConvolutionFilter(matrixX:Number = 0, matrixY:Number = 0, matrix:Array = null, divisor:Number = 1.0, bias:Number = 0.0, preserveAlpha:Boolean = true, clamp:Boolean = true, color:uint = 0, alpha:Number = 0.0) ``` 各参数含义如下： | 参数 | 含义 | 默认值 | | ---- | ---- | ---- | | `matrixX` | 矩阵的列数 | 0 | | `matrixY` | 矩阵的行数 | 0 | | `matrix` | 用于确定每个像素如何转换的数组，数组项数需等于`matrixX * matrixY` | null | | `divisor` | 矩阵转换时使用的除数，决定卷积滤镜应用矩阵计算的均匀程度 | 1.0 | | `bias` | 矩阵转换结果要添加的偏差 | 0.0 | | `preserveAlpha` | 是否保留透明度，`true`表示卷积仅应用于颜色通道，`false`表示应用于所有通道 | true | | `clamp` | 对于源图像外的像素，`true`表示通过复制输入图像边缘的颜色值扩展图像，`false`表示使用`color`和`alpha`指定的颜色 | true | | `color` | 源图像外像素的替代十六进制颜色 | 0 | | `alpha` | 替代颜色的透明度 | 0.0 | ### 1.3 代码实现 以下是创建卷积动画的相关代码： ```actionscript package oreilly.cookbook.flex4 { import mx.effects.IEffectInstance; import spark.effects.Animate; public class ConvolutionTween extends Animate { public var alpha:Number = 1.0; public var color:uint = 0xffffff; public var matrix:Array = [5, 5, 5, 5, 0, 5, 5, 5, 5]; public var divisor:Number = 1.0; public var bias:Number = 0.0; public function ConvolutionTween(target:Object=null) { super(target); this.instanceClass = ConvolutionTweenInstance; } override protected function initInstance(instance:IEffectInstance):void { trace(" instance initialized "); super.initInstance(instance); ConvolutionTweenInstance(instance).alpha = alpha; ConvolutionTweenInstance(instance).color = color; ConvolutionTweenInstance(instance).divisor = divisor; ConvolutionTweenInstance(instance).matrix = matrix; ConvolutionTweenInstance(instance).bias = bias; } override public function getAffectedProperties():Array { trace(" return all the target properties "); return []; } } } package oreilly.cookbook.flex4 { import flash.filters.ConvolutionFilter; import spark.effects.animation.Animation; import spark.effects.supportClasses.AnimateInstance; public class ConvolutionTweenInstance extends AnimateInstance { private var convolutionFilter:ConvolutionFilter; public var alpha:Number; public var color:uint; public var matrixX:Number; public var matrixY:Number; public var matrix:Array; public var divisor:Number; public var bias:Number; public function ConvolutionTweenInstance(target:Object) { super(target); } override public function play():void { super.play(); convolutionFilter = new ConvolutionFilter(matrixX, matrixY, matrix, 1.0, 0, true, true, alpha, color); } override public function animationUpdate(animation:Animation) : void { var filters:Array = target.filters; var n:int = filters.length; for (var i:int = 0; i < n; i++) { if (filters[i] is ConvolutionFilter) filters.splice(i, 1); } var currValues:Object = animation.currentValue; trace((currValues.matrix as Array).join(", ")); convolutionFilter = new ConvolutionFilter(3, 3, [currValues.matrix[0], currValues.matrix[1], currValues.matrix[2], currValues.matrix[3], currValues.matrix[4], currValues.matrix[5], currValues.matrix[6], currValues.matrix[7], currValues.matrix[8]], 1.0); filters.push(convolutionFilter); target.filters = filters; } override public function animationStop(animation:Animation) : void { var filters:Array = target.filters; var currValues:Object = animation.currentValue; convolutionFilter = new ConvolutionFilter(3, 3, [currValues.matrix[0], currValues.matrix[1], currValues.matrix[2], currValues.matrix[3], currValues.matrix[4], currValues.matrix[5], currValues.matrix[6], currValues.matrix[7]], 1.0); filters.push(convolutionFilter); target.filters = filters; super.animationStop(animation); } } } ``` ### 1.4 实例化卷积动画 在MXML中实例化卷积动画的示例代码如下： ```xml <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300" xmlns:flex4="oreilly.cookbook.flex4.*" skinClass="oreilly.cookbook.flex4.SimpleSkin" click="convolutionTween.play()"> <fx:Declarations> <flex4:ConvolutionTween target="{this}" id="convolutionTween" duration="4000"> <flex4:motionPaths> <fx:Vector type="spark.effects.animation.MotionPath"> <s:MotionPath property="matrix"> <s:keyframes> <fx:Vector type="Vector"> <s:Keyframe value="{[0, −1, 0, −1, 5, −1, 0, −1, 0]}" time="0"/> <s:Keyframe value="{[−30, 30, 0, −30, 30, 0, −30, ```