[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);
}