Effetti di composizioneComposition effects

Le API Windows. UI. Composition consentono di applicare gli effetti in tempo reale alle immagini e all'interfaccia utente con proprietà degli effetti animabili.The Windows.UI.Composition APIs allows real-time effects to be applied to images and UI with animatable effect properties. In questa panoramica verrà descritta la funzionalità disponibile che consente l'applicazione di effetti a un elemento visivo di composizione.In this overview, we’ll run through the functionality available that allows effects to be applied to a composition visual.

Per fornire il supporto dell’uniformità di Universal Windows Platform (UWP) agli sviluppatori che descrivono gli effetti nelle proprie applicazioni, gli effetti di composizione usano l’interfaccia IGraphicsEffect di Win2D per implementare le descrizioni degli effetti tramite lo spazio dei nomi Microsoft.Graphics.Canvas.Effects.To support Universal Windows Platform (UWP) consistency for developers describing effects in their applications, composition effects leverage Win2D’s IGraphicsEffect interface to use effect descriptions via the Microsoft.Graphics.Canvas.Effects Namespace.

Gli effetti pennello vengono usati per disegnare aree di un'applicazione mediante l'applicazione di effetti a un set di immagini esistenti.Brush effects are used to paint areas of an application by applying effects to a set of existing images. Le API di gestione degli effetti di composizione di Windows 10 sono basate sugli elementi visivi di Sprite.Windows 10 composition effect APIs are focused on Sprite Visuals. L'oggetto SpriteVisual consente flessibilità e interazione per la creazione di colori, immagini ed effetti.The SpriteVisual allows for flexibility and interplay in color, image and effect creation. L'oggetto SpriteVisual è un tipo di elemento visivo di composizione che può occupare un rettangolo 2D con un pennello.The SpriteVisual is a composition visual type that can fill a 2D rectangle with a brush. L'elemento visivo definisce i limiti del rettangolo, mentre il pennello definisce i pixel usati per disegnare il rettangolo.The visual defines the bounds of the rectangle and the brush defines the pixels used to paint the rectangle.

I pennelli dell'effetto vengono usati sugli elementi visivi dell'albero di composizione il cui contenuto deriva dall'output di un grafico dell'effetto.Effect brushes are used on composition tree visuals whose content comes from the output of an effect graph. Gli effetti possono fare riferimento a superfici o trame esistenti, ma non all'output di altri alberi di composizione.Effects can reference existing surfaces/textures, but not the output of other composition trees.

Gli effetti possono anche essere applicati agli UIElement XAML usando un pennello effetto con XamlCompositionBrushBase.Effects can also be applied to XAML UIElements using an effect brush with XamlCompositionBrushBase.

Funzionalità degli effettiEffect Features

Libreria di effettiEffect Library

La composizione attualmente supporta gli effetti seguenti:Currently composition supports the following effects:

EffettoEffect DescrizioneDescription
Trasformazione affine 2D2D affine transform Applica una matrice di trasformazione affine 2D a un'immagine.Applies a 2D affine transform matrix to an image. Abbiamo usato questo effetto per l’animazione della maschera alfa nei nostri [esempi](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects) di effetti.We used this effect to animate alpha mask in our effect [samples](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).
Composizione aritmeticaArithmetic composite Combina due immagini mediante un'equazione flessibile.Combines two images using a flexible equation. Abbiamo usato l’effetto Composizione aritmetica per creare un effetto di dissolvenza incrociata negli [esempi](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).We used arithmetic composite to create a crossfade effect in our [samples](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).
Effetto sfumaturaBlend effect Crea una sfumatura che combina due immagini.Creates a blend effect that combines two images. La composizione fornisce 21 delle 26 modalità di sfumatura supportate in Win2D.Composition provides 21 of the 26 blend modes supported in Win2D.
Origine coloreColor source Genera un'immagine che contiene un colore a tinta unita.Generates an image containing a solid color.
CompositeComposite Combina due immagini.Combines two images. La composizione fornisce tutte le 13 modalità di sfumatura supportate in Win2D.Composition provides all 13 composite modes supported in Win2D.
Si confrontiContrast Aumenta o riduce il contrasto di un'immagine.Increases or decreases the contrast of an image.
EsposizioneExposure Aumenta o riduce l'esposizione di un'immagine.Increases or decreases the exposure of an image.
Gradazioni di grigioGrayscale Converte un'immagine in grigio monocromatico.Converts an image to monochromatic gray.
Trasferimento gammaGamma transfer Modifica i colori di un'immagine applicando la funzione di trasferimento gamma in base al canale.Alters the colors of an image by applying a per-channel gamma transfer function.
Rotazione tonalitàHue rotate Modifica il colore di un'immagine ruotando i valori della relativa tonalità.Alters the color of an image by rotating its hue values.
InvertiInvert Inverte i colori di un'immagine.Inverts the colors of an image.
SaturazioneSaturate Modifica la saturazione di un'immagine.Alters the saturation of an image.
SeppiaSepia Converte un'immagine in tonalità seppia.Converts an image to sepia tones.
Temperatura e tintaTemperature and tint Regola la temperatura e/o la tinta di un'immagine.Adjusts the temperature and/or tint of an image.

Vedi lo spazio dei nomi Microsoft.Graphics.Canvas.Effects di Win2D per informazioni più dettagliate.See Win2D’s Microsoft.Graphics.Canvas.Effects Namespace for more detailed information. Gli effetti non supportati nella composizione sono indicati come [ nocomposition ] .Effects not supported in composition are noted as [NoComposition].

Concatenamento di effettiChaining Effects

Gli effetti possono essere concatenati e ciò consente a un'applicazione di usare contemporaneamente più effetti su un'immagine.Effects can be chained, allowing an application to simultaneously use multiple effects on an image. I grafici dell'effetto possono supportare più effetti che possono fare riferimento a uno o più degli effetti in uso.Effect graphs can support multiple effects that can refer to one and other. Quando descrivi l'effetto, aggiungi un effetto come input per l'effetto.When describing your effect, simply add an effect as input to your effect.

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 Composizione aritmetica che prevede due input.The example above describes an arithmetic composite effect which has two inputs. Il secondo input ha un effetto saturazione con proprietà di saturazione 0,5.The second input has a saturation effect with a .5 saturation property.

Supporto per l'animazioneAnimation Support

Le proprietà degli effetti supportano l'animazione. Durante la compilazione degli effetti puoi specificare quali proprietà dell'effetto possono essere animate e quali proprietà possono essere definite come costanti.Effect properties support animation, during effect compilation you can specify effect properties can be animated and which can be "baked in" as constants. Le proprietà animabili vengono specificate tramite stringhe nel formato "nome effetto.nome proprietà".The animatable properties are specified through strings of the form “effect name.property name”. Queste proprietà possono essere animate in modo indipendente su più istanze dell'effetto.These properties can be animated independently over multiple instantiations of the effect.

Proprietà degli effetti costanti o animateConstant vs Animated Effect Properties

Durante la compilazione degli effetti, puoi specificare quali proprietà dell'effetto sono dinamiche e quali possono essere definite come costanti.During effect compilation you can specify effect properties as dynamic or as properties that are "baked in" as constants. Le proprietà dinamiche vengono specificate tramite stringhe nel formato ".".The dynamic properties are specified through strings of the form “.”. Le proprietà dinamiche può essere impostate su un valore specifico o possono essere animate usando il sistema di animazione di composizione.The dynamic properties can be set to a specific value or can be animated using the composition animation system.

Durante la compilazione della descrizione dell'effetto, hai la possibilità di impostare la saturazione come uguale a 0,5 oppure di renderla dinamica e impostarla in modo dinamico o applicarvi un'animazione.When compiling the effect description above, you have the flexibility of either baking in saturation to be equal to 0.5 or making it dynamic and setting it dynamically or animating it.

Compilazione di un effetto con saturazione costante:Compiling an effect with saturation baked in:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilazione di un effetto con saturazione dinamica:Compiling an effect with dynamic saturation:

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

La proprietà Saturation dell'effetto può quindi essere impostata su un valore statico o animata con le animazioni Expression o ScalarKeyFrame.The saturation property of the effect above can then be either set to a static value or animated using either Expression or ScalarKeyFrame animations.

Puoi creare un'animazione ScalarKeyFrame che verrà usata per animare la proprietà Saturation di un effetto come segue:You can create a ScalarKeyFrame that will be used to animate the Saturation property of an effect like this:

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;

Puoi iniziare l'animazione sulla proprietà Saturation dell'effetto come segue:Start the animation on the Saturation property of the effect like this:

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

Vedi l’[esempio di desaturazione dell’animazione](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/Desaturation - Animation) per le proprietà degli effetti animate con fotogrammi chiave e l’[esempio di maschera alfa](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/AlphaMask) per l’uso di effetti ed espressioni.See the [Desaturation - Animation sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/Desaturation - Animation) for effect properties animated with key frames and the [AlphaMask sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/AlphaMask) for use of effects and expressions.

Più istanze dell'effetto con proprietà indipendentiMultiple Effect Instances with Independent Properties

Se specifichi che un parametro deve essere dinamico durante la compilazione dell'effetto, il parametro potrà quindi essere modificato in base alle singole istanze dell'effetto.By specifying that a parameter should be dynamic during effect compilation, the parameter can then be changed on a per-effect instance basis. Ciò consente a due elementi visivi di usare lo stesso effetto. Tuttavia, il relativo rendering verrà eseguito con diverse proprietà dell'effetto.This allows two Visuals to use the same effect but be rendered with different effect properties. Vedi l’[esempio](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/ColorSource and Blend) relativo a ColorSource e Blend per altre informazioni.See the ColorSource and Blend [sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/ColorSource and Blend) for more information.

Introduzione agli effetti di composizioneGetting Started with Composition Effects

Questa esercitazione introduttiva mostra come usare alcune delle funzionalità di base degli effetti.This quick start tutorial shows you how to make use of some of the basic capabilities of effects.

Installazione di Visual StudioInstalling Visual Studio

  • Se non disponi di una versione supportata di Visual Studio installata, vai alla pagina di download di Visual Studio qui.If you don't have a supported version of Visual Studio installed, go to the Visual Studio Downloads page here.

Creazione di un nuovo progettoCreating a new project

  • Vai a File -> Nuovo -> Progetto.Go to File->New->Project...
  • Seleziona 'Visual C#'.Select 'Visual C#'
  • Crea un'app vuota (Windows universale)' (Visual Studio 2015).Create a 'Blank App (Windows Universal)' (Visual Studio 2015)
  • Immetti un nome di progetto di tua scelta.Enter a project name of your choosing
  • Fai clic su 'OK'.Click 'OK'

Installazione di Win2DInstalling Win2D

Win2D viene rilasciato come pacchetto Nuget.org e deve essere installato prima di poter usare gli effetti.Win2D is released as a Nuget.org package and needs to be installed before you can use effects.

Esistono due versioni del pacchetto, ovvero una per Windows 10 e una per Windows 8.1.There are two package versions, one for Windows 10 and one for Windows 8.1. Per gli effetti di composizione userai la versione per Windows 10.For Composition effects you’ll use the Windows 10 version.

  • Per avviare Gestione pacchetti NuGet, vai a Strumenti → Gestione pacchetti NuGet → Gestisci pacchetti NuGet per la soluzione.Launch the NuGet Package Manager by going to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
  • Cerca "Win2D" e seleziona il pacchetto appropriato per la versione di destinazione di Windows.Search for "Win2D" and select the appropriate package for your target version of Windows. Dal momento che Windows.UI.Because Windows.UI. Composition supporta Windows 10 e non 8.1, seleziona Win2D.uwp.Composition supports Windows 10 (not 8.1), select Win2D.uwp.
  • Accetta il contratto di licenza.Accept the license agreement
  • Fai clic su 'Chiudi'.Click 'Close'

Nei prossimi passaggi useremo l'API Composition per applicare un effetto di saturazione all'immagine del gatto. Questa operazione rimuoverà tutte le altre saturazioni.In the next few steps we will use composition API’s to apply a saturation effect to this cat image which will remove all saturation. In questo modello l'effetto viene creato e quindi applicato a un'immagine.In this model the effect is created and then applied to an image.

Immagine di origine

Impostazione delle nozioni di base della composizioneSetting your Composition Basics

Vedi l’[esempio di struttura ad albero visuale di composizione](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/CompositionImageSample) su GitHub per un esempio di come configurare il programma di composizione Windows.UI.Composition, includere ContainerVisual e associare la finestra principale.See the [Composition Visual Tree Sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/CompositionImageSample) on our GitHub for an example of how to set up Windows.UI.Composition Compositor, root ContainerVisual, and associate with the Core Window.

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

Creazione di un pennello CompositionSurfaceCreating a CompositionSurface Brush

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

Creazione, compilazione e applicazione di effettiCreating, Compiling and Applying Effects

  1. Creare l'effetto graficoCreate the graphics effect

    var graphicsEffect = new SaturationEffect
    {
      Saturation = 0.0f,
      Source = new CompositionEffectSourceParameter("mySource")
    };
    
  2. Compila l'effetto e crea il pennello effettoCompile the effect and create effect brush

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
    
    var catEffect = effectFactory.CreateBrush();
    catEffect.SetSourceParameter("mySource", surfaceBrush);
    
  3. Creare un SpriteVisual nell'albero di composizione e applicare l'effettoCreate a SpriteVisual in the composition tree and apply the effect

    var catVisual = _compositor.CreateSpriteVisual();
      catVisual.Brush = catEffect;
      catVisual.Size = new Vector2(219, 300);
      _root.Children.InsertAtBottom(catVisual);
    }
    
  4. Creare l'origine dell'immagine da caricare.Create your image source to load.

    CompositionImage imageSource = _imageFactory.CreateImageFromUri(new Uri("ms-appx:///Assets/cat.png"));
    CompositionImageLoadResult result = await imageSource.CompleteLoadAsync();
    if (result.Status == CompositionImageLoadStatus.Success)
    
  5. Ridimensionare e spazzolare la superficie nel SpriteVisualSize and brush the surface on the SpriteVisual

    brush.Surface = imageSource.Surface;
    
  6. Eseguire l'app. i risultati devono essere un gatto desaturo:Run your app – your results should be a desaturated cat:

Immagine desaturata

Altre informazioniMore Information