[UWP]使用AlphaMaskEffect提升故障藝術動畫的性能（順便介紹怎麼使用性能探測器分析UWP程式）

2020 年 3 月 31 日
筆記

前幾天發布了抄抄《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);  }