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

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

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


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

-Advertisement-
Play Games
更多相關文章
  • 《深入淺出 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;//設置進度條最大長 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:這個WPF項目通過XAML繪製汽車動態速度表盤,實現了0-300的速度刻度,包括數字、指針,並通過定時器模擬速度變化,展示了動態效果。詳細實現包括界面設計、刻度繪製、指針角度計算等,通過C#代碼與XAML文件結合完成。 新建 WPF 項目: 在 Visual Studio 中創建一個新的 WP ...
  • 概述:在WPF中使用`WpfAnimatedGif`庫展示GIF動畫,首先確保全裝了該庫。通過XAML設置Image控制項,指定GIF路徑,然後在代碼中使用庫提供的方法實現動畫控制。這簡化了在WPF應用中處理GIF圖的過程,提供了方便的介面來管理動畫播放和暫停。 當使用 WpfAnimatedGif  ...
  • 您是否曾經訪問過一個網站,它需要很長時間載入,最終你敲擊 F5 重新載入頁面。 即使用戶刷新了瀏覽器取消了原始請求,而對於伺服器來說,API也不會知道它正在計算的值將在結束時被丟棄,刷新五次,伺服器將觸發 5 個請求。 為瞭解決這個問題,ASP.NET Core 為 Web 伺服器提供了一種機制,就 ...
  • 本章將和大家分享如何通過 Elasticsearch 實現自動補全查詢功能。 一、自動補全-安裝拼音分詞器 1、自動補全需求說明 當用戶在搜索框輸入字元時,我們應該提示出與該字元有關的搜索項,如圖: 2、使用拼音分詞 要實現根據字母做補全,就必須對文檔按照拼音分詞。在 GitHub 上恰好有 Ela ...
  • using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Windows.Forms; namespace OOP { pub ...
  • 概述:以上內容詳細介紹了在C#中如何從另一個線程更新GUI,包括基礎功能和高級功能。對於WinForms,使用`Control.Invoke`;對於WPF,使用`Dispatcher.Invoke`。高級功能使用`SynchronizationContext`實現線程間通信,確保清晰、可讀性高的代碼 ...
  • Nuget包 Microsoft.Extensions.Telemetry.Abstractions 包含的新的日誌記錄source generator,它支持使用[LogProperties]將整個對象作為State與日誌一起記錄。 我將展示一種方法來控制如何使用[LogProperties]對象 ...
  • 支持.Net/.Net Core/.Net Framework,可以部署在Docker, Windows, Linux, Mac。 常見的ORM技術(比如:Entity Framework,Dapper,SqlSugar,NHibernate,等…),它們不是在做Sql語句的程式化變種,就是在做Sq ...
  • 一、引言 在現代應用程式開發中,尤其是在涉及I/O操作(如網路請求、文件讀寫等)時,非同步編程成為了提高性能和用戶體驗的關鍵技術。C#作為.NET框架下的主流開發語言,提供了強大的非同步編程支持,通過async/await關鍵字,可以讓開發者以同步的方式編寫非同步代碼,極大地簡化了非同步編程的複雜性。本文將 ...
  • 一、引言 在.NET開發中,操作Office文檔(特別是Excel和Word)是一項常見的需求。然而,在伺服器端或無Microsoft Office環境的場景下,直接使用Office Interop可能會面臨挑戰。為瞭解決這個問題,開源庫NPOI應運而生,它提供了無需安裝Office即可創建、讀取和 ...