Microsoft.UI.Composition API 允許即時效果套用於具有可動畫效果屬性的影像與使用者介面。 在這份概述中，我們將介紹如何在 WinUI 和 Windows App SDK 應用程式中，為合成視覺化套用效果的功能。
為了支援 WinUI 與 Windows App SDK 應用程式中的一致效果製作，合成效果利用 Win2D 的 IGraphicsEffect 介面，讓你能使用 Microsoft.Graphics.Canvas.Effects 命名空間來描述效果。
筆刷效果是透過對一組現有影像套用效果來繪製應用程式區域。 Windows 應用程式 SDK 中的組成效果 API 專注於 SpriteVisuals。 SpriteVisual 在結合色彩、影像和特效時提供彈性。 視覺化定義矩形的邊界，畫筆定義用於繪製矩形的像素。
效果筆刷用於合成樹中的視覺元素，其內容來自效果圖的輸出。 效果可以參考現有的表面或材質，但不能參考其他合成樹的輸出。
效果也可以透過使用 XamlCompositionBrushBase 的效果筆刷套用到 XAML UIElements 上。
效果特徵
效果函式庫
目前合成支援以下效果：
| 影響 | 說明 |
|---|---|
| 二維仿射轉換 | 對影像套用二維仿射轉換矩陣。 |
| 算術合數 | 使用彈性方程式結合兩張影像。 |
| 混合效應 | 會產生混合效果，將兩張圖片結合起來。 Composition 提供了 Win2D 支援的 26 種 混合模式 中的 21 種。 |
| 色彩來源 | 產生包含純色的影像。 |
| 複合材料 | 結合兩張圖片。 Composition 提供 Win2D 支援的所有 13 種複合模式 。 |
| 對比 | 可以增加或減少影像的對比度。 |
| 暴露 | 增加或減少影像的曝光。 |
| 灰階 | 將影像轉換為單色灰色。 |
| 伽瑪轉移 | 透過應用每通道的伽瑪傳遞函數來改變影像的顏色。 |
| 色相旋轉 | 透過旋轉影像的色調值來改變其顏色。 |
| 反轉 | 將影像的顏色反轉。 |
| 飽和 | 改變影像的飽和度。 |
| 棕褐色 | 將影像轉換成棕褐色調。 |
| 溫度與色調 | 調整影像的溫度和/或色調。 |
欲了解更多詳細資訊，請參閱 Win2D 的 Microsoft.Graphics.Canvas.Effects 命名空間。 未被合成支援的效果標示為[NoComposition]。
連鎖效應
效果可以串接，讓應用程式能同時對一張影像使用多種效果。 效果圖可以支援多個效果，並且這些效果可以互相參照。 描述你的效果時，只要把一個效果作為輸入就行了。
IGraphicsEffect graphicsEffect =
new Microsoft.Graphics.Canvas.Effects.ArithmeticCompositeEffect
{
Source1 = new CompositionEffectSourceParameter("source1"),
Source2 = new SaturationEffect
{
Saturation = 0,
Source = new CompositionEffectSourceParameter("source2")
},
MultiplyAmount = 0,
Source1Amount = 0.5f,
Source2Amount = 0.5f,
Offset = 0
}
上述範例描述了一個具有兩個輸入的算術複合效應。 第二個輸入則有飽和效果，飽和度約為 0.5。
動畫支援
效果屬性支援動畫，在編譯效果期間，你可以指定哪些效果屬性可以被動畫化，以及哪些可以作為常數被「預先嵌入」。 可動畫屬性透過「效果名稱.屬性名稱」這樣的字串來指定。 這些屬性可以在多次實例中獨立地動畫化。
恆定效果與動畫效果屬性
在效果編譯過程中，你可以指定效果屬性為動態屬性，或是以常數形式「內建」的屬性。 動態屬性透過「<效果名稱>.<屬性名稱>」來指定。 動態屬性可以設定為特定值，或使用合成動畫系統來進行動畫化。
在編譯上述效果描述時，您可以選擇將飽和度固定設為 0.5，也可以設定為動態變化，或透過動畫進行設定。
在內建飽和效果的情況下編譯效果：
var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
編譯具有動態飽和特性的特效：
var effectFactory = _compositor.CreateEffectFactory(graphicsEffect, new[]{"SaturationEffect.Saturation"});
_catEffect = effectFactory.CreateBrush();
_catEffect.SetSourceParameter("mySource", surfaceBrush);
_catEffect.Properties.InsertScalar("saturationEffect.Saturation", 0f);
上述效果的飽和特性可以設定為靜態值，或使用 Expression 或 ScalarKeyFrame 動畫來動畫化。
你可以建立一個 ScalarKeyFrame，用來動畫化像這樣的效果的飽和屬性：
ScalarKeyFrameAnimation effectAnimation = _compositor.CreateScalarKeyFrameAnimation();
effectAnimation.InsertKeyFrame(0f, 0f);
effectAnimation.InsertKeyFrame(0.50f, 1f);
effectAnimation.InsertKeyFrame(1.0f, 0f);
effectAnimation.Duration = TimeSpan.FromMilliseconds(2500);
effectAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
從效果的飽和屬性開始動畫，就像這樣：
catEffect.Properties.StartAnimation("saturationEffect.Saturation", effectAnimation);
具有獨立屬性的多重效果實例
透過在效果編譯過程中指定參數為動態，該參數即可依每個效應實例進行變更。 這讓兩個視覺效果都能使用相同效果，但呈現出不同的效果屬性。
入門構圖效果
這個快速入門教學教你如何運用效果的一些基本功能。
安裝 Visual Studio
- 如果你沒有安裝支援的 Visual Studio 版本，請前往 這裡的 Visual Studio 下載頁面。
創建新專案
- 移至 [ 檔案>新>專案]。
- 如果更符合你的應用程式模式，選擇「空白應用程式，已打包（WinUI 3 桌面版）」範本，或選擇「空白應用程式，未封裝版」（桌面版為 WinUI 3）。
- 輸入你選擇的專案名稱。
- 點擊 建立。
安裝 Win2D
Win2D 是以 NuGet.org 套件形式釋出，必須先安裝才能在 WinUI 專案中使用這些效果。
- 啟動 NuGet 套件管理器時，請前往工具的>NuGet 套件管理器>，管理NuGet 套件以獲取解決方案。
- 搜尋 Win2D.WinUI ，並安裝該套件給你的專案。
- 接受授權合約。
- 按下 關閉。
接下來的幾步，我們將使用合成 API 對這張貓影像套用飽和效果，去除所有飽和度。 在此模型中，該效果先被創造並套用到影像上。
設定你的作文基礎
_compositor = ElementCompositionPreview.GetElementVisual(MyHost).Compositor;
_root = _compositor.CreateContainerVisual();
ElementCompositionPreview.SetElementChildVisual(MyHost, _root);
建立合成表面畫筆
CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
LoadedImageSurface imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/cat.png"));
surfaceBrush.Surface = imageSurface;
建立、編譯與套用效果
創造圖形效果。
var graphicsEffect = new SaturationEffect { Saturation = 0.0f, Source = new CompositionEffectSourceParameter("mySource") };編譯效果並建立效果筆刷。
var effectFactory = _compositor.CreateEffectFactory(graphicsEffect); var catEffect = effectFactory.CreateBrush(); catEffect.SetSourceParameter("mySource", surfaceBrush);在合成樹中建立 SpriteVisual 並套用效果。
var catVisual = _compositor.CreateSpriteVisual(); catVisual.Brush = catEffect; catVisual.Size = new Vector2(219, 300); _root.Children.InsertAtBottom(catVisual);執行您的應用程式。 你的結果應該是一隻去飽和的貓：
