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

来源:https://www.cnblogs.com/dino623/archive/2020/03/31/Use_AlphaMaskEffect_To_Improve_Animation_Performance.html

前幾天發佈了 "抄抄《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

AlphaMaskEffect Class

合成畫筆 - UWP applications Microsoft Docs


您的分享是我們最大的動力!

更多相關文章
  • 《深入淺出 C#》 (第3版) [作者] (美) Andrew Stellman (美) Jennifer Greene[譯者] (中) 徐陽 丁小峰 等譯[出版] 中國電力出版社[版次] 2016年08月 第1版[印次] 2018年04月 第4次 印刷[定價] 148.00元 【引子】 要學習編程 ...
  • [toc] 1.應用背景 底端設備有大量網路報文(位元組數組):心跳報文,數據採集報文,告警報文上報。需要有對應的報文結構去解析這些位元組流數據。 2.結構體解析 由此,我第一點就想到了用結構體去解析。原因有以下兩點: 2.1.結構體存在棧中 類屬於引用類型,存在堆中;結構體屬於值類型,存在棧中,在一個 ...
  • 前言 有一個東西叫做鴨子類型,所謂鴨子類型就是,只要一個東西表現得像鴨子那麼就能推出這玩意就是鴨子。 C 裡面其實也暗藏了很多類似鴨子類型的東西,但是很多開發者並不知道,因此也就沒法好好利用這些東西,那麼今天我細數一下這些藏在編譯器中的細節。 不是只有 和 才能 在 C 中編寫非同步代碼的時候,我們經 ...
  • 做下對文件複製操作相關的筆記: /// <summary> /// 文件幫助類 /// </summary> public class FileHelper { /// <summary> /// 複製一個目錄下所有文件到一個新目錄下 /// </summary> /// <param name=" ...
  • Xamarin.Forms讀取並展示Android和iOS通訊錄 TerminalMACS客戶端 本文同步更新地址: https://dotnet9.com/11520.html https://terminalmacs.com/861.html 閱讀導航: 一、功能說明 二、代碼實現 三、源碼獲取 ...
  • 對閉包的理解 1.對於成員變數和局部變數:成員變數就是方法外部,類的內部定義的變數;局部變數就是方法或語句塊內部定義的變數。局部變數必須初始化。 形式參數是局部變數,局部變數的數據存在於棧記憶體中。棧記憶體中的局部變數隨著方法的消失而消失。成員變數存儲在堆中的對象裡面,由垃圾回收器負責回收。 成員變數它 ...
  • 首先創建一個asp.net core web應用程式 第二步 目前官方預置了7種模板項目供我們選擇。從中我們可以看出,既有我們熟悉的MVC、WebAPI,又新添加了Razor Page,以及結合比較流行的Angular、React前端框架的模板項目。 空項目模板 Program.cs using S ...
  • 控制條控制項: progressBar 不能按照你程式的進程自動變化,需認為計算,調整變化量 private void progressBar1_Click(object sender, EventArgs e) { this.progressBar1.Maximum = 100;//設置進度條最大長 ...
一周排行
  • 文章篇幅較長,閱讀完大概20min,建議收藏閱讀, 讀完會有收穫。歡迎點贊關註 原文鏈接:https://www.softwaretestinghelp.com/types-of-software-testing/ 有多少軟體測試類型呢? 我們作為測試人員瞭解很多種不同的軟體測試類型,例如功能測試( ...
  • 過場CG: 接到公司領導的文件指示,“小熊”需要在6月底去海外執行一個行動代號為【定時任務】的營救計劃,這個計劃關係到公司某個項目的生死(數據安全漏洞),作戰部擬定兩個作戰方案: 方案一:使用務定時任務框架quartz; 方案二:使用windows Service服務。 最終的作戰方案為:兩者配套使 ...
  • 為什麼編寫TaskSchedulerEx類? 因為.NET預設線程池只有一個線程池,如果某個批量任務一直占著大量線程,甚至耗盡預設線程池,則會嚴重影響應用程式域中其它任務或批量任務的性能。 特點: 1、使用獨立線程池,線程池中線程分為核心線程和輔助線程,輔助線程會動態增加和釋放,且匯流排程數不大於參數 ...
  • 前幾天,公眾號後臺有朋友在問Core的中間件,所以專門抽時間整理了這樣一篇文章。 一、前言 中間件(Middleware)最初是一個機械上的概念,說的是兩個不同的運動結構中間的連接件。後來這個概念延伸到軟體行業,大家把應用操作系統和電腦硬體之間過渡的軟體或系統稱之為中間件,比方驅動程式,就是一個典型 ...
  • 參考文檔: https://www.cnblogs.com/liaods/p/10101513.html https://www.cnblogs.com/zyz-Notes/p/12030281.html 本示例使用MVC項目做演示(不推薦,推薦直接用WebAPI),框架版本使用 4.6.2 為了支 ...
  • 引用NModbus 在NuGet搜索NModbus,添加引用。 封裝ModbusTcp類 public class ModbusTCP { private ModbusFactory modbusFactory; private IModbusMaster master; private TcpCl ...
  • 系列文章 基於 abp vNext 和 .NET Core 開發博客項目 - 使用 abp cli 搭建項目 基於 abp vNext 和 .NET Core 開發博客項目 - 給項目瘦身,讓它跑起來 基於 abp vNext 和 .NET Core 開發博客項目 - 完善與美化,Swagger登場 ...
  • Microsoft.AspNetCore.Mvc.Versioning //引入程式集 .net core 下麵api的版本控製作用不需要多說,可以查閱https://www.cnblogs.com/dc20181010/p/11313738.html 普通的版本控制一般是通過鏈接、header此類 ...
  • 結合 AOP 輕鬆處理事件發佈處理日誌 Intro 前段時間,實現了 EventBus 以及 EventQueue 基於 Event 的事件處理,但是沒有做日誌(EventLog)相關的部分,原本想增加兩個介面, 處理事件發佈日誌和事件處理日誌,最近用了 AOP 的思想處理了 EntityFrame ...
  • 什麼是sam 轉換 Single Abstract Method 實際上這是java8中提出的概念,你就把他理解為是一個方法的介面的就可以了 看一下我們每天都在使用的線程池 ExecutorService executorService= Executors.newScheduledThreadPo ...