前幾天發佈了 "抄抄《CSS 故障藝術》的動畫" 這篇文章，在這篇文章里介紹瞭如何使用Win2D繪製文字然後配合BlendEffect製作故障藝術的動畫。本來打算就這樣收手不玩這個動畫了，但後來又發現性能不符合理想。明明只是做做Resize動畫和用BlendEffect混合，為什麼性能會這麼差呢？ ...
前幾天發佈了抄抄《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
合成畫筆 - UWP applications Microsoft Docs
