Kompositionseffekte

Die Windows.UI.Composition-APIs ermöglichen die Anwendung von Echtzeiteffekten auf Bilder und Ui mit animierbaren Effekteigenschaften. In dieser Übersicht werden wir die verfügbaren Funktionen durchlaufen, mit denen Effekte auf eine visuelle Komposition angewendet werden können.

Um Universelle Windows-Plattform (UWP)-Konsistenz für Entwickler zu unterstützen, die Effekte in ihren Anwendungen beschreiben, nutzen Kompositionseffekte die IGraphicsEffect-Schnittstelle von Win2D, um Effektbeschreibungen über die Microsoft.Graphics.Canvas.Effects-Namespace zu verwenden.

Pinseleffekte werden verwendet, um Bereiche einer Anwendung zu zeichnen, indem Effekte auf eine Reihe vorhandener Bilder angewendet werden. Windows 10-Kompositionseffekt-APIs konzentrieren sich auf Sprite Visuals. Das SpriteVisual ermöglicht Flexibilität und Interaktion bei der Farb-, Bild- und Effekterstellung. SpriteVisual ist ein visueller Kompositionstyp, der ein 2D-Rechteck mit einem Pinsel füllen kann. Das visuelle Element definiert die Grenzen des Rechtecks, und der Pinsel definiert die Pixel, die zum Zeichnen des Rechtecks verwendet werden.

Effektpinsel werden für visuelle Kompositionsstrukturelemente verwendet, deren Inhalt aus der Ausgabe eines Effektdiagramms stammt. Effekte können auf vorhandene Oberflächen/Texturen verweisen, aber nicht auf die Ausgabe anderer Kompositionsstrukturen.

Effekte können auch mithilfe eines Effektpinsels mit XamlCompositionBrushBase auf XAML-UIElements angewendet werden.

Effektfeatures

• 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.

Verkettungseffekte

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 Animation, während der Effektkompilierung können Sie Effekteigenschaften animieren und die als Konstanten "eingebacken" 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.

Konstanten- und Animierte Effekteigenschaften

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 Kompilieren der obigen Effektbeschreibung haben Sie die Flexibilität, entweder in der Sättigung zu backen, um 0,5 zu entsprechen, oder sie dynamisch zu gestalten und dynamisch festzulegen 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;

Starten Sie die Animation für die Sättigungseigenschaft des Effekts 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-Pinsels
• Erstellen, Kompilieren und Anwenden von Effekten

Visual Studio installieren

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

Erstellen eines neuen Projekts

• Wechseln Sie zu "Datei-Neu-Projekt>>"...
• Wählen Sie "Visual C#" aus.
• Erstellen einer leeren App (Windows Universal)" (Visual Studio 2015)
• Geben Sie einen Projektnamen Ihrer Wahl ein.
• Klicken Sie auf "OK".

Installieren von Win2D

Win2D wird als Nuget.org-Paket veröffentlicht und muss installiert werden, bevor Sie Effekte verwenden können.

Es gibt zwei Paketversionen, eine für Windows 10 und eine für Windows 8.1. Für Kompositionseffekte verwenden Sie die Windows 10-Version.

• Starten Sie die NuGet-Paket-Manager, indem Sie zu Tools → NuGet Paket-Manager → Manage NuGet Packages for Solution wechseln.
• Suchen Sie nach "Win2D", und wählen Sie das entsprechende Paket für Ihre Zielversion von Windows aus. Da Windows.UI. Composition unterstützt Windows 10 (nicht 8.1), wählen Sie Win2D.uwp aus.
• Akzeptieren des Lizenzvertrags
• 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 = new Compositor();
_root = _compositor.CreateContainerVisual();
_target = _compositor.CreateTargetForCurrentView();
_target.Root = _root;
_imageFactory = new CompositionImageFactory(_compositor)
Desaturate();

Erstellen eines CompositionSurface-Pinsels

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

Erstellen, Kompilieren und Anwenden von Effekten

1. Erstellen des Grafikeffekts

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

2. Kompilieren des Effekts und Erstellen eines Effektpinsels

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

3. Erstellen eines SpriteVisual-Elements in der Kompositionsstruktur und Anwenden des Effekts

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

4. Erstellen Sie die zu ladende Bildquelle.

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

5. Größe und Pinsel der Oberfläche auf dem SpriteVisual

   brush.Surface = imageSource.Surface;
   

6. Führen Sie Ihre App aus – Ihre Ergebnisse sollten eine entaturierte Katze sein:

Weitere Informationen

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