Kompositionseffekte

Die Microsoft.UI.Composition-APIs ermöglichen die Anwendung von Echtzeiteffekten auf Bilder und Ui mit animierbaren Effekteigenschaften. In dieser Übersicht werden wir durch die Funktionalität geführt, mit der Sie Effekte auf eine Visuelle Komposition in WinUI- und Windows App SDK-Apps anwenden können.

Um die konsistente Effekterstellung in WinUI- und Windows App SDK-Apps zu unterstützen, nutzen Kompositionseffekte die IGraphicsEffect-Schnittstelle von Win2D, sodass Sie Effekte mithilfe des Namespace "Microsoft.Graphics.Canvas.Effects " beschreiben können.

Pinseleffekte werden verwendet, um Bereiche einer Anwendung zu zeichnen, indem Effekte auf eine Reihe vorhandener Bilder angewendet werden. Windows App SDK-Kompositionseffekt-APIs konzentrieren sich auf SpriteVisuals. Ein SpriteVisual bietet Ihnen Flexibilität beim Kombinieren von Farbe, Bild und Effekterstellung. Das visuelle Element definiert die Grenzen des Rechtecks, und der Pinsel definiert die Pixel, die zum Zeichnen verwendet werden.

Effektpinsel werden bei visuellen Kompositionselementen verwendet, deren Inhalt aus dem Ergebnis eines Effektdiagramms stammt. Effekte können auf vorhandene Oberflächen/Texturen verweisen, aber nicht auf die Ausgabe anderer Kompositionsbäume.

Effekte können auch auf XAML-UIElements angewendet werden, indem ein Effektpinsel mit XamlCompositionBrushBase verwendet wird.

Effektfunktionen

• Effektbibliothek
• Verkettungseffekte
• Animationsunterstützung
• Konstanten- und Animierte Effekteigenschaften
• Mehrere Effektinstanzen mit unabhängigen Eigenschaften

Effektbibliothek

Derzeit unterstützt die Komposition die folgenden Effekte:

Ausführlichere Informationen finden Sie im Microsoft.Graphics.Canvas.Effects-Namespace von Win2D. Effekte, die in der Komposition nicht unterstützt werden, werden als [NoComposition] angegeben.

Verkettungswirkungen

Effekte können verkettet werden, sodass eine Anwendung mehrere Effekte auf einem Bild gleichzeitig verwenden kann. Effektdiagramme können mehrere Effekte unterstützen, die auf einen und andere verweisen können. Wenn Sie Ihren Effekt beschreiben, fügen Sie einfach einen Effekt als Eingabe zu Ihrem Effekt hinzu.

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
}

Im obigen Beispiel wird ein arithmetischer zusammengesetzter Effekt beschrieben, der zwei Eingaben enthält. Die zweite Eingabe hat einen Sättigungseffekt mit einer Sättigungseigenschaft von 0,5.

Animationsunterstützung

Effekteigenschaften unterstützen Animationen. Während der Effektkompilierung können Sie festlegen, welche Effekteigenschaften animiert werden sollen und welche als Konstanten festgelegt werden können. Die animierbaren Eigenschaften werden über Zeichenfolgen des Formulars "Effect name.property name" angegeben. Diese Eigenschaften können unabhängig über mehrere Instanziierungen des Effekts animiert werden.

Konstante und animierte Effekteigenschaft

Während der Effektkompilierung können Sie Effekteigenschaften als dynamisch oder als Eigenschaften angeben, die als Konstanten "eingebacken" sind. Die dynamischen Eigenschaften werden über Zeichenfolgen des Formulars "<Effektname>" angegeben.<property name>". Die dynamischen Eigenschaften können auf einen bestimmten Wert festgelegt oder mithilfe des Kompositionsanimationssystems animiert werden.

Beim Erstellen der oben beschriebenen Wirkung haben Sie die Flexibilität, entweder die Sättigung fest auf 0,5 zu setzen, oder sie dynamisch zu gestalten und entweder dynamisch zu setzen oder zu animieren.

Kompilieren eines Effekts mit eingebackener Sättigung:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Kompilieren eines Effekts mit dynamischer Sättigung:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect, new[]{"SaturationEffect.Saturation"});
_catEffect = effectFactory.CreateBrush();
_catEffect.SetSourceParameter("mySource", surfaceBrush);
_catEffect.Properties.InsertScalar("saturationEffect.Saturation", 0f);

Die Sättigungseigenschaft des obigen Effekts kann dann entweder auf einen statischen Wert festgelegt oder mithilfe von Expression- oder ScalarKeyFrame-Animationen animiert werden.

Sie können einen ScalarKeyFrame erstellen, der verwendet wird, um die Sättigungseigenschaft eines Effekts wie folgt zu animieren:

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;

Um die Animation der Eigenschaft 'Sättigung' des Effekts zu starten, verfahren Sie wie folgt:

catEffect.Properties.StartAnimation("saturationEffect.Saturation", effectAnimation);

Mehrere Effektinstanzen mit unabhängigen Eigenschaften

Wenn Sie angeben, dass ein Parameter während der Effektkompilierung dynamisch sein soll, kann der Parameter dann pro Effektinstanz geändert werden. Dadurch können zwei visuelle Elemente denselben Effekt verwenden, aber mit unterschiedlichen Effekteigenschaften gerendert werden.

Erste Schritte mit Kompositionseffekten

In diesem Schnellstart-Lernprogramm erfahren Sie, wie Sie einige der grundlegenden Funktionen von Effekten nutzen können.

• Installieren von Visual Studio
• Erstellen eines neuen Projekts
• Installieren von Win2D
• Festlegen der Kompositionsgrundlagen
• Erstellen eines CompositionSurface Brush
• Erstellen, Kompilieren und Anwenden von Effekten

Installieren von Visual Studio

• Wenn Sie keine unterstützte Version von Visual Studio installiert haben, wechseln Sie hier zur Visual Studio-Downloadseite.

Erstellen eines neuen Projekts

• Gehen Sie zu Datei>Neu>Projekt.
• Wählen Sie die Vorlage "Leere App", "Verpackt" (WinUI 3 in Desktop) aus, oder wählen Sie "Leere App", "Entpackt" (WinUI 3 in Desktop) aus, wenn dies ihrem App-Modell besser entspricht.
• Geben Sie einen Projektnamen Ihrer Wahl ein.
• Klicke auf Erstellen.

Installieren von Win2D

Win2D wird als NuGet.org-Paket veröffentlicht und muss installiert werden, bevor Sie diese Effekte in einem WinUI-Projekt verwenden können.

• Starten Sie den NuGet-Paket-Manager, indem Sie zu "Tools>NuGet Package Manager>Manage NuGet Packages for Solution" wechseln.
• Suchen Sie nach Win2D.WinUI , und installieren Sie dieses Paket für Ihr Projekt.
• Akzeptieren Sie den Lizenzvertrag.
• Klicken Sie auf Schließen.

In den nächsten Schritten verwenden wir die Kompositions-API zum Anwenden eines Sättigungseffekts auf dieses Katzenbild, das alle Sättigung entfernt. In diesem Modell wird der Effekt erstellt und dann auf ein Bild angewendet.

Festlegen der Kompositionsgrundlagen

_compositor = ElementCompositionPreview.GetElementVisual(MyHost).Compositor;
_root = _compositor.CreateContainerVisual();
ElementCompositionPreview.SetElementChildVisual(MyHost, _root);

Erstellen eines CompositionSurface-Pinsels

CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
LoadedImageSurface imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/cat.png"));
surfaceBrush.Surface = imageSurface;

Erstellen, Kompilieren und Anwenden von Effekten

1. Erstellen Sie den Grafikeffekt.

   var graphicsEffect = new SaturationEffect
   {
       Saturation = 0.0f,
       Source = new CompositionEffectSourceParameter("mySource")
   };
   

2. Kompilieren Sie den Effekt, und erstellen Sie den Effektpinsel.

   var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
   
   var catEffect = effectFactory.CreateBrush();
   catEffect.SetSourceParameter("mySource", surfaceBrush);
   

3. Erstellen Sie ein SpriteVisual in der Kompositionsstruktur, und wenden Sie den Effekt an.

   var catVisual = _compositor.CreateSpriteVisual();
   catVisual.Brush = catEffect;
   catVisual.Size = new Vector2(219, 300);
   _root.Children.InsertAtBottom(catVisual);
   

4. Führen Sie Ihre App aus. Ihre Ergebnisse sollten ein entsättigtes Bild einer Katze sein.

Weitere Informationen

• Microsoft – Zusammensetzung GitHub
• Microsoft.UI.Composition
• Kompositionsübersicht
• Visual Tree Basics
• Kompositionspinsel
• XamlCompositionBrushBase
• Übersicht über Animationen
• Zusammensetzung der nativen DirectX- und Direct2D-Interoperabilität mit BeginDraw und EndDraw