[UWP]使用AlphaMaskEffect提升故障艺术动画的性能（顺便介绍怎么使用性能探测器分析UWP程序）

前几天发布了抄抄《CSS 故障艺术》的动画这篇文章，在这篇文章里介绍了如何使用Win2D绘制文字然后配合BlendEffect制作故障艺术的动画。本来打算就这样收手不玩这个动画了，但后来又发现性能不符合理想。明明只是做做Resize动画和用BlendEffect混合，为什么性能会这么差呢？

1. 分析原因

其实不用分析都知道哪里出问题了，毕竟这个懒是自己偷的，不过这里顺便介绍介绍Visual Studio的性能分析。Visual Studio不停更新它的性能探测器，最近几年我还挺喜欢的的“应用程序时间线”功能，对桌面应用来说这个功能很好用，可以直观地看到帧率、CPU使用、布局消耗、呈现消耗等信息。

要开始性能分析，首先在顶部菜单选择“调试”->“性能探测器”：

在打开的性能探测器配置页面，选中“CPU使用率”和“应用程序时间线”两个工具后点击“开始”按钮：

之后Visual Studio就会启动性能会话并运行程序，切换到打开的应用程序里，一顿操作后关闭程序，稍等一下就可以看到分析报告。

为了凸显性能问题，我复制粘贴了好几个个故障艺术的动画，可以看到后半段的FPS下降了，且“应用程序代码”占了很大的比例。切换到"CPU使用率"选项卡，能看到具体的CPU消耗都在DrawSurfaceCore这个函数附近

双击DrawSurfaceCore这行进去具体代码，这里颜色越红代表CPU占用率越高，并且会在源码左侧显示具体的CPU占用率，很明显这里的代码很糟糕，那么罪魁祸首就是这堆代码了。

2. 使用AlphaMaskEffect优化性能

上面的这段代码是使用Win2D绘制文字和使用GaussianBlurEffect制作阴影。本来这代码性能应该没问题（当然，在这个动画里有优化空间，例如因为我在这里总是使用BlurAmount = 0的阴影所以根本不需要GaussianBlurEffect也不需要DrawImage），但是我使用了Storyboard控制文字的高度，然后每次高度改变都重新调用这个函数绘制文字。从结果上来说我的代码在不停画图，所以小小的动画造成了巨大的性能消耗。

现在我要做什么才可以改善这种状况？当然上面这段代码有很多优化的空间，但最根本要做的是应该少调用这段代码，少重新绘图。一个很复杂的情况是，我需要使用两个这段代码绘制出来的CompositionSurfaceBrush作为BlendEffect的输入，而CompositionSurfaceBrush本质上是一张位图，而作为Brush又没法修改它的尺寸。CompositionSurfaceBrush关联了一个CompositionDrawingSurface，后者虽然有Resize函数，但使用这个函数会令图片在动画过程中移位，明明单独使用Resize效果不错，但用在动画里就总是错，我也没心思去纠结它的原因。

其实要改变Brush的高度，一种很实在的方法是使用遮罩。CompositionApi提供了CompositionMaskBrush，使用它可以实现OpacityMask的效果，复习一下它的源码：

paint-with-a-compositionbrush-with-opacity-mask-applied

Compositor _compositor;
SpriteVisual _maskVisual;
CompositionMaskBrush _maskBrush;
_compositor = Window.Current.Compositor;
_maskBrush = _compositor.CreateMaskBrush();
CompositionLinearGradientBrush _sourceGradient = _compositor.CreateLinearGradientBrush();
_sourceGradient.ColorStops.Add(_compositor.CreateColorGradientStop(0,Colors.Red));
_sourceGradient.ColorStops.Add(_compositor.CreateColorGradientStop(1,Colors.Yellow));
_maskBrush.Source = _sourceGradient;
LoadedImageSurface loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/circle.png"), new Size(156.0, 156.0));
_maskBrush.Mask = _compositor.CreateSurfaceBrush(loadedSurface);
_maskVisual = _compositor.CreateSpriteVisual();
_maskVisual.Brush = _maskBrush;
_maskVisual.Size = new Vector2(156, 156);

使用CompositionMaskBrush之前首先要有一张作为Mask的图片，用Paint.Net两三下就做好了，比奥特曼打到怪兽还快。

接下来只要用显示文字的CompositionSurfaceBrush作为CompositionMaskBrush的Source，用上面这张图片制作的CompositionSurfaceBrush作为Mask，再对Mask做Scale的动画，高度改变的动画就…………

就报错了。

好吧，我想起来了文档里就说明了CompositionMaskBrush不能玩BlendEffect。

不过幸运的是Win2D本来就提供了AlphaMaskEffect这个类，它的作用几乎和CompositionMaskBrush一样，我之前都没想到会有使用它的一天。使用它的代码大同小异，两三下就写完了：

private (CompositionBrush, CompositionSurfaceBrush) CreateMaskedBrush(CompositionBrush source)
{
    var compositor = Window.Current.Compositor;
    var effect = new AlphaMaskEffect()
    {
        Source = new CompositionEffectSourceParameter("Source"),
        AlphaMask = new CompositionEffectSourceParameter("Mask"),
    };
    var opacityMaskSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/Images/mask.Png"));
    var opacityBrush = Compositor.CreateSurfaceBrush(opacityMaskSurface);
    opacityBrush.Stretch = CompositionStretch.UniformToFill;
    var effectFactory = compositor.CreateEffectFactory(effect);
    var compositionBrush = effectFactory.CreateBrush();
    compositionBrush.SetSourceParameter("Source", source);
    compositionBrush.SetSourceParameter("Mask", opacityBrush);
    return (compositionBrush, opacityBrush);
}

3. 结果

左边是旧的代码（每次改变高度重新绘图），右边是新的代码（对作为Mask的CompositionSurfaceBrush进行Scale动画），可以看到……嗯，好像新动画是刘畅了些。

看起来再玩大些都还撑得住，GPU占用率还算满意，CPU占用率也不高。其实还有不少优化空间，但我还是完全想不到这个动画实际应用场景（恕我想象力贫乏），所以就到吃为止吧。

4. 参考

CompositionMaskBrush Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs

AlphaMaskEffect Class

合成画笔 - UWP applications Microsoft Docs