組合效果

發行項
03/19/2024

Windows.UI.Composition API 可讓即時效果套用至具有動畫效果屬性的影像和 UI。在此概觀中，我們將執行可讓效果套用至組合視覺效果的功能。

為了支援開發人員在其應用程式中描述效果的通用 Windows 平台 (UWP) 一致性，組合效果會利用 Win2D 的 IGraphicsEffect 介面，透過 Microsoft.Graphics.Canvas.Effects 命名空間使用效果描述。

筆刷效果可將效果套用至一組現有的影像，用來繪製應用程式的區域。 Windows 10 組合效果 API 著重於 Sprite 視覺效果。 SpriteVisual 可讓您在色彩、影像和效果建立方面，擁有彈性和互動性。 SpriteVisual 是一種組合視覺效果類型，可使用筆刷填滿 2D 矩形。視覺效果會定義矩形的邊界，筆刷會定義用來繪製矩形的像素。

效果筆刷用於組合樹狀結構視覺效果，其內容來自效果圖的輸出。效果可以參考現有的介面/紋理，但不能參考其他組合樹狀結構的輸出。

效果也可以套用至 XAML UIElements，其使用效果筆刷搭配 XamlCompositionBrushBase。

效果功能

效果庫

目前組合支援下列效果：

影響	描述
2D 仿射轉換	將 2D 仿射轉換矩陣套用至影像。
算術組合	使用靈活的方程式來結合兩個影像。
混合效果	建立結合兩個影像的混合效果。 Win2D 中支援的混合模式共有 26 種，組合提供了其中 21 種。
色彩來源	產生包含純色的影像。
複合	結合兩個影像。 Win2D 中支援的 13 種複合模式，組合全都提供。
對比	增加或減少影像的對比。
曝光	增加或減少影像的曝光。
灰階	將影像轉換成單色灰階。
Gamma 轉換	藉由套用每個頻道 Gamma 轉換函式來改變影像的色彩。
色調旋轉	藉由旋轉影像的色調值來改變影像的色彩。
反轉	反轉影像的色彩。
飽和	改變影像的飽和度。
復古	將影像轉換成復古色調。
溫度和色調	調整影像的溫度和/或色調。

如需詳細資訊，請參閱 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
}

上述範例描述具有兩個輸入的算術複合效果。第二個輸入擁有一個飽和度效果，其飽和度屬性為 .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 下載頁。

建立新專案

移至 [檔案] -> [新增] -> [專案]
選取 [Visual C#]
建立「空白應用程式」(Windows 通用) (Visual Studio 2015)
輸入您選擇的專案名稱
按一下 [確定]

安裝 Win2D

Win2D 發行為 Nuget.org 套件，而且必須先安裝，才能使用效果。

共有兩個套件版本，一個適用於 Windows 10，另一個適用於 Windows 8.1。針對組合效果，您將使用 Windows 10 版本。

前往 [工具] → [NuGet 套件管理員] → [管理方案的 NuGet 套件]，啟動 NuGet 套件管理員。
搜尋 "Win2D"，然後為您的目標 Windows 版本選取適當的套件。因為 Windows.UI. Composition 支援 Windows 10 (而非 8.1)，請選取 [Win2D.uwp]。
接受授權合約
按一下 [關閉]

在接下來的幾個步驟中，我們將使用組合 API 將飽和度效果套用至這張貓咪影像，以移除所有飽和度。在此模型中，會先建立效果，然後套用至影像。

Source image

設定組合基礎

_compositor = new Compositor();
_root = _compositor.CreateContainerVisual();
_target = _compositor.CreateTargetForCurrentView();
_target.Root = _root;
_imageFactory = new CompositionImageFactory(_compositor)
Desaturate();

建立 CompositionSurface 筆刷

CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
LoadImage(surfaceBrush);

建立、編譯和套用效果

建立圖形效果

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);

建立要載入的影像來源。

CompositionImage imageSource = _imageFactory.CreateImageFromUri(new Uri("ms-appx:///Assets/cat.png"));
CompositionImageLoadResult result = await imageSource.CompleteLoadAsync();
if (result.Status == CompositionImageLoadStatus.Success)

在 SpriteVisual 上調整介面的大小和筆刷
```
brush.Surface = imageSource.Surface;
```
執行您的應用程式 – 您的結果應該是顏色變淡的貓咪：

Desaturated image

Share via