Sdílet prostřednictvím

Efekty složení

Rozhraní API Microsoft.UI.Composition umožňují použití efektů v reálném čase na obrázky a uživatelské rozhraní s animatovatelnými vlastnostmi efektu. V tomto přehledu si projdeme funkce, které vám umožní aplikovat efekty na kompoziční vizuál v aplikacích WinUI a Windows App SDK.

Pro konzistentní vytváření efektů v aplikacích WinUI a Windows App SDK využívají efekty složení rozhraní IGraphicsEffect z Win2D, což vám umožní popsat efekty pomocí oboru názvů Microsoft.Graphics.Canvas.Effects.

Efekty štětce se používají k vykreslení oblastí aplikace aplikováním efektů na sadu existujících obrázků. API rozhraní sady Windows App SDK zaměřují efekty složení na SpriteVisuals. SpriteVisual poskytuje flexibilitu při kombinování barev, obrázků a vytváření efektů. Vizuál definuje hranice obdélníku a štětec definuje pixely použité k vykreslení.

Štětce efektů se používají u vizuálů stromu kompozice, jejichž obsah pochází z výstupu grafu efektu. Efekty mohou odkazovat na existující povrchy nebo textury, ale nikoli na výstup jiných kompozičních stromů.

Efekty lze také použít na XAML UIElements pomocí štětce pro efekty s XamlCompositionBrushBase.

Vlastnosti efektu

Knihovna efektů

V současné době složení podporuje následující efekty:

Účinek Description
2D affinová transformace Použije 2D afinní transformační matici na obrázek.
Aritmetické složené Kombinuje dva obrázky pomocí flexibilní rovnice.
Efekt prolnutí Vytvoří efekt prolnutí, který kombinuje dva obrázky. Složení poskytuje 21 z 26 režimů mixu podporovaných ve Win2D.
Zdroj barev Vygeneruje obrázek obsahující plnou barvu.
Kompozit Kombinuje dva obrázky. Složení poskytuje všech 13 složených režimů podporovaných ve Win2D.
Kontrast Zvětší nebo zmenší kontrast obrázku.
Vystavení Zvyšuje nebo snižuje expozici obrázku.
Stupně šedé Převede obrázek na monochromatickou šedou.
Přenos gama Změní barvy obrázku použitím funkce přenosu gama pro jednotlivé kanály.
otáčení odstínu Změní barvu obrázku otočením hodnot odstínu.
Invertovat Invertuje barvy obrázku.
Nasycení Změní sytost obrázku.
Sepia Převede obrázek na sépiové tóny.
Teplota a barevný nádech Upraví teplotu a/nebo nádech obrázku.

Podrobnější informace najdete v tématu Obor názvů Microsoft.Graphics.Canvas.Effects systému Win2D. Účinky, které nejsou ve složení podporovány, jsou zaznamenány jako [NoComposition].

Řetězení efektů

Efekty můžou být zřetězený, což aplikaci umožňuje současné použití více efektů na obrázku. Grafy efektů můžou podporovat více efektů, které můžou odkazovat na jeden a druhý. Při popisu efektu jednoduše přidejte efekt jako vstup do efektu.

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
}

Výše uvedený příklad popisuje aritmetický složený efekt, který má dva vstupy. Druhý vstup má efekt sytosti s vlastností sytosti 0,5.

Podpora animací

Vlastnosti efektu podporují animaci a během kompilace efektu můžete určit, které vlastnosti efektu mohou být animovány a které mohou být vloženy jako konstanty. Animovatelné vlastnosti jsou zadány prostřednictvím řetězců ve formátu "název efektu.název vlastnosti". Tyto vlastnosti mohou být animované nezávisle na několika instancích efektu.

Konstanty a animované vlastnosti efektu

Během kompilace efektu můžete zadat vlastnosti efektu jako dynamické nebo jako vlastnosti, které jsou "upečené" jako konstanty. Dynamické vlastnosti jsou zadány prostřednictvím řetězců formuláře "<název> efektu.<název> vlastnosti". Dynamické vlastnosti lze nastavit na určitou hodnotu nebo animovat pomocí kompozičního animačního systému.

Při kompilaci výše uvedeného popisu efektu máte flexibilitu buď nastavit napevno saturaci na hodnotu 0,5, nebo ji dynamicky měnit či animovat.

Kompilace efektu se zabudovanou sytostí:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Kompilace efektu s dynamickou saturací:

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

Vlastnost sytosti výše uvedeného efektu pak může být buď nastavena na statickou hodnotu, nebo animované pomocí animací Expression nebo ScalarKeyFrame.

Můžete vytvořit prvek ScalarKeyFrame, který použijete k animaci vlastnosti sytosti efektu takto:

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;

Spusťte animaci u vlastnosti Sytost efektu takto:

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

Více instancí efektů s nezávislými vlastnostmi

Zadáním, že parametr má být během kompilace efektu dynamický, lze parametr měnit pro jednotlivé instance efektu. To umožňuje, aby dva vizuály používaly stejný efekt, ale byly vykresleny s různými vlastnostmi efektu.

Začínáme s efekty kompozice

V tomto rychlém úvodním kurzu se dozvíte, jak využít některé ze základních funkcí efektů.

Instalace sady Visual Studio

  • Pokud nemáte nainstalovanou podporovanou verzi sady Visual Studio, přejděte sem na stránku se soubory ke stažení sady Visual Studio.

Vytvoření nového projektu

  • Přejděte na Soubor>Nový>Projekt.
  • Vyberte šablonu Prázdná aplikace WinUI (zabalená).
  • Zadejte název projektu podle svého výběru.
  • Klikněte na Vytvořit.

Instalace Win2D

Win2D se vydává jako balíček NuGet.org a před použitím těchto efektů v projektu WinUI je potřeba nainstalovat.

  • Spusťte Správce balíčků NuGet tím, že přejdete na Tools>Správce balíčků NuGet>Spravovat balíčky NuGet pro řešení.
  • Vyhledejte Win2D.WinUI a nainstalujte tento balíček pro váš projekt.
  • Přijměte licenční smlouvu.
  • Klepněte na tlačítko Zavřít.

V několika následujících krocích použijeme složené rozhraní API k aplikaci efektu sytosti na tento obrázek kočky, který odstraní veškerou sytost. V tomto modelu se efekt vytvoří a použije na obrázek.

Zdrojový obrázek

Nastavení základů kompozice

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

Vytvoření štětce CompositionSurface

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

Vytváření, kompilace a použití efektů

  1. Vytvořte grafický efekt.

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

  2. Zkompilujte efekt a vytvořte štětec efektu.

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

  3. Ve stromě kompozice vytvořte SpriteVisual a aplikujte efekt.

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

  4. Spusťte aplikaci. Vaše výsledky by měly být desaturovaná kočka.

Desatuovaný obrázek

Další informace

  • Last updated on