actionscript-3 - AS3-过滤区域的动画位置（Bitmapdata）

Question

我知道为任何给定过滤器的数量设置动画很简单，但是假设您在舞台的特定区域（矩形）上有一个过滤器。你将如何动画（补间）这个过滤区域的位置，以便效果在舞台上移动？

Answer 1

想到的一种实现效果的方法是将舞台的内容绘制到一个BitmapData，然后使用BitmapData.applyFilter()。applyFilter() 允许您指定 sourceRect 和 destPoint。因此，在您的情况下，您可以为 sourceRect 的属性设置动画。在这种情况下，destPoint 的 x 和 y 应该与 sourceRect 的 x 和 y 相同。

这是一个工作示例：

package {
    import flash.display.*;
    import flash.events.*;
    import flash.filters.*;
    import flash.geom.*;

    public class Main extends Sprite {

        public function Main():void {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init(e:Event = null):void {
            removeEventListener(Event.ADDED_TO_STAGE, init);

            var bitmapData : BitmapData = new BitmapData(this.stage.stageWidth, this.stage.stageHeight);
            var sourceRectVelocity : Point = new Point(3, 2);
            var sourceRect : Rectangle = new Rectangle(50, 100, 200, 150);
            var bitmap : Bitmap = new Bitmap(bitmapData);

            // draw some random circles on the stage
            for (var i:int = 0; i < 100; i++) {
                this.graphics.beginFill((Math.floor(Math.random()*255) << 16) + (Math.floor(Math.random()*255) << 8) + Math.floor(Math.random()*255), 1);
                this.graphics.drawCircle(Math.random()*this.stage.stageWidth, Math.random()*this.stage.stageHeight, 50 + Math.random()*50);
            }

            this.addChild(bitmap);

            this.addEventListener(Event.ENTER_FRAME, function(event : Event):void {
                sourceRect.x = Math.min(Math.max(sourceRect.x + sourceRectVelocity.x, 0), bitmapData.width - sourceRect.width);
                sourceRect.y = Math.min(Math.max(sourceRect.y + sourceRectVelocity.y, 0), bitmapData.height - sourceRect.height);

                if (sourceRect.right >= bitmapData.width) {
                    sourceRectVelocity.x = -Math.abs(sourceRectVelocity.x);
                } else if (sourceRect.left <= 0) {
                    sourceRectVelocity.x = Math.abs(sourceRectVelocity.x);
                }

                if (sourceRect.bottom >= bitmapData.height) {
                    sourceRectVelocity.y = -Math.abs(sourceRectVelocity.y);
                } else if (sourceRect.top <= 0) {
                    sourceRectVelocity.y = Math.abs(sourceRectVelocity.y);
                }

                // clear the bitmap with white (not needed if the stage doesn't have any transparency)
                bitmapData.fillRect(bitmapData.rect, 0xffffff);

                // draw the stage to the bitmapData, but make sure the Bitmap display object showing the BitmapData isn't visible
                bitmap.visible = false;
                bitmapData.draw(stage);
                bitmap.visible = true;

                // apply greyscale filter
                bitmapData.applyFilter(bitmapData, sourceRect, new Point(sourceRect.x, sourceRect.y), new ColorMatrixFilter([0.3, 0.59, 0.11, 0, 0,0.3, 0.59, 0.11, 0, 0,0.3, 0.59, 0.11, 0, 0,0, 0, 0, 1, 0]));
            });
        }
    }
}

此示例将整个舞台绘制到 BitmapData，但随后仅将过滤器应用于区域。一种更优化的方法（特别是如果区域从不/很少改变大小）是仅将要过滤的区域绘制到具有区域大小的 BitmapData，然后将过滤器应用于整个 BitmapData。