Condividi tramite

Effetti di composizione

Le API Microsoft.UI.Composition consentono di applicare effetti in tempo reale alle immagini e all'interfaccia utente con proprietà di effetto animabili. In questa panoramica verrà illustrata la funzionalità che consente di applicare effetti a un oggetto visivo di composizione nelle app WinUI e Windows App SDK.

Per supportare la creazione di effetti coerenti nelle app WinUI e Windows App SDK, gli effetti di composizione sfruttano l'interfaccia IGraphicsEffect di Win2D per poter descrivere gli effetti usando lo spazio dei nomi Microsoft.Graphics.Canvas.Effects .

Gli effetti pennello vengono usati per disegnare aree di un'applicazione applicando effetti a un set di immagini esistenti. Le API degli effetti di composizione di Windows App SDK sono incentrate su SpriteVisuals. SpriteVisual offre flessibilità quando si combinano colori, immagini e creazione di effetti. L'oggetto visivo definisce i limiti del rettangolo e il pennello definisce i pixel usati per disegnarlo.

I pennelli effetto vengono usati negli oggetti visivi dell'albero della composizione il cui contenuto proviene dall'output di un grafico degli effetti. Gli effetti possono fare riferimento a superfici/trame esistenti, ma non all'output di altri alberi di composizione.

Gli effetti possono essere applicati anche a UIElement XAML usando un pennello effetto con XamlCompositionBrushBase.

Caratteristiche dell'effetto

Libreria degli effetti

Attualmente la composizione supporta gli effetti seguenti:

Effetto Descrizione
Trasformazione affine 2D Applica una matrice di trasformazione affine 2D a un'immagine.
Composito aritmetico Combina due immagini usando un'equazione flessibile.
Effetto Blend Crea un effetto blend che combina due immagini. La composizione fornisce 21 delle 26 modalità di fusione supportate in Win2D.
Origine colore Genera un'immagine contenente un colore a tinta unita.
Composite Combina due immagini. La composizione fornisce tutte le 13 modalità composite supportate in Win2D.
Contrasto Aumenta o riduce il contrasto di un'immagine.
Esposizione Aumenta o riduce l'esposizione di un'immagine.
Scala di grigi Converte un'immagine in grigio monocromatico.
Trasferimento gamma Modifica i colori di un'immagine applicando una funzione di trasferimento gamma per canale.
Rotazione tonalità Modifica il colore di un'immagine ruotando i relativi valori di tonalità.
Invertire Inverte i colori di un'immagine.
Saturare Modifica la saturazione di un'immagine.
Seppia Converte un'immagine in toni sepia.
Temperatura e tinta Regola la temperatura e/o la tinta di un'immagine.

Per informazioni più dettagliate, vedere lo spazio dei nomi Microsoft.Graphics.Canvas.Effects di Win2D. Gli effetti non supportati nella composizione sono indicati come [NoComposition].

Effetti di concatenamento

Gli effetti possono essere concatenati, consentendo a un'applicazione di usare simultaneamente più effetti su un'immagine. I grafici degli effetti possono supportare più effetti che possono fare riferimento a uno e all'altro. Quando descrivi il tuo effetto, semplicemente aggiungi un effetto come input al tuo effetto.

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
}

L'esempio precedente descrive un effetto composito aritmetico che ha due input. Il secondo input ha un effetto di saturazione con una proprietà di saturazione di 0,5.

Supporto animazione

Le proprietà degli effetti supportano l'animazione, durante la compilazione degli effetti è possibile specificare le proprietà degli effetti che possono essere animate e che possono essere "inserite in" come costanti. Le proprietà animabili vengono specificate tramite stringhe del formato "nome effetto.nome proprietà". Queste proprietà possono essere animate in modo indipendente su più istanze dell'effetto.

Proprietà degli effetti costanti e animate

Durante la compilazione degli effetti è possibile specificare le proprietà degli effetti come dinamiche o come proprietà "incluse" come costanti. Le proprietà dinamiche vengono specificate tramite stringhe del formato "<nome> dell'effetto.<nome> proprietà". Le proprietà dinamiche possono essere impostate su un valore specifico o possono essere animate usando il sistema di animazione di composizione.

Quando si compila la descrizione dell'effetto precedente, si ha la flessibilità di integrare la saturazione per essere uguale a 0,5 o renderla dinamica, impostandola o animandola.

Compilazione di un effetto con saturazione integrata

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilazione di un effetto con saturazione dinamica:

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

La proprietà saturazione dell'effetto precedente può quindi essere impostata su un valore statico o animata usando animazioni Expression o ScalarKeyFrame.

È possibile creare un scalarKeyFrame che verrà usato per animare la proprietà Saturation di un effetto simile al seguente:

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;

Avviare l'animazione sulla proprietà Saturation dell'effetto come segue:

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

Istanze di più effetti con proprietà indipendenti

Specificando che un parametro deve essere dinamico durante la compilazione dell'effetto, il parametro può quindi essere modificato in base all'istanza per effetto. Ciò consente a due oggetti visivi di usare lo stesso effetto, ma di eseguire il rendering con proprietà di effetto diverse.

Introduzione agli effetti di composizione

Questa esercitazione introduttiva illustra come usare alcune delle funzionalità di base degli effetti.

Installazione di Visual Studio

  • Se non è installata una versione supportata di Visual Studio, passare alla pagina Download di Visual Studio qui.

Creazione di un nuovo progetto

  • Vai su File>Nuovo>Progetto.
  • Selezionare il modello App vuota, In pacchetto (WinUI 3 in Desktop) oppure scegliere App vuota, Non in pacchetto (WinUI 3 in Desktop) se è più adatto al tuo modello di app.
  • Immettere un nome di progetto scelto.
  • Clicca su Crea.

Installazione di Win2D

Win2D viene rilasciato come pacchetto NuGet.org e deve essere installato prima di poter usare questi effetti in un progetto WinUI.

  • Avvia il Gestore pacchetti NuGet passando a Strumenti>NuGet Package Manager>Gestisci pacchetti NuGet per la soluzione.
  • Cercare Win2D.WinUI e installare il pacchetto per il progetto.
  • Accetta il Contratto di licenza
  • Fare clic su Close.

Nei prossimi passaggi si userà l'API di composizione per applicare un effetto di saturazione all'immagine del gatto che rimuoverà tutta la saturazione. In questo modello l'effetto viene creato e quindi applicato a un'immagine.

Immagine di origine

Impostazione delle basi della composizione

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

Creazione di un pennello CompositionSurface

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

Creazione, compilazione e applicazione di effetti

  1. Creare l'effetto grafico.

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

  2. Compilare l'effetto e creare il pennello dell'effetto.

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

  3. Creare un oggetto SpriteVisual nell'albero di composizione e applicare l'effetto.

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

  4. Eseguire l'app. I risultati dovrebbero essere un gatto desaturato:

Immagine desaturata

Altre informazioni

  • Last updated on