Kompozisyon efektleri

Microsoft.UI.Composition API'leri, gerçek zamanlı efektlerin görüntülere ve kullanıcı arabirimine animasyonlu efekt özellikleriyle uygulanmasına olanak sağlar. Bu genel bakışta, WinUI ve Windows Uygulama SDK'sı uygulamalarındaki bir kompozisyon görseline efekt uygulamanıza olanak tanıyan işlevleri inceleyeceğiz.

WinUI ve Windows Uygulama SDK'sı uygulamalarında tutarlı efekt yazmayı desteklemek için, kompozisyon efektleri Win2D'nin IGraphicsEffect arabiriminden yararlanarak Microsoft.Graphics.Canvas.Effects ad alanını kullanarak efektleri açıklayabilirsiniz.

Fırça efektleri, mevcut görüntüler kümesine efektler uygulanarak uygulamanın alanlarını boyamak için kullanılır. Windows Uygulama SDK oluşturma etkisi API'leri, Sprite Visuals'a odaklanır. SpriteVisual, renk, görüntü ve efekt oluşturma işlemini birleştirirken size esneklik sağlar. Görsel dikdörtgenin sınırlarını tanımlar ve fırça bunu boyamak için kullanılan pikselleri tanımlar.

Efekt fırçaları, içeriği efekt grafiği çıktısından gelen kompozisyon ağacı görsel bileşenlerinde kullanılır. Efektler mevcut yüzeylere/dokulara referans verebilir, ancak diğer kompozisyon ağaçlarının çıkışına referans veremez.

Efektler, XamlCompositionBrushBase ile bir efekt fırçası kullanılarak XAML UIElements'e de uygulanabilir.

Efekt Özellikleri

Efekt Kitaplığı

Şu anda bileşim aşağıdaki etkileri destekler:

Etki	Açıklama
2D affin dönüşümü	Görüntüye iki boyutlu affin dönüşüm matrisi uygular.
Aritmetik bileşik	Esnek denklem kullanarak iki görüntüyü birleştirir.
Blend efekti	İki görüntüyü birleştiren bir blend efekti oluşturur. Kompozisyon, Win2D'de desteklenen 26 karışım modundan 21'ini sağlar.
Renk kaynağı	Düz renk içeren bir görüntü oluşturur.
Kompozit	İki görüntüyü birleştirir. Oluşturma, Win2D'de desteklenen 13 bileşik modun tümünü sağlar.
Karşıtlık	Görüntünün karşıtlığını artırır veya azaltır.
Teşhir	Görüntünün pozlamasını artırır veya azaltır.
Gri Tonlamalı	Bir görüntüyü tek renkli griye dönüştürür.
Gama aktarımı	Kanal başına gama aktarım işlevi uygulayarak görüntünün renklerini değiştirir.
Renk tonu döndürme	Ton değerlerini döndürerek görüntünün rengini değiştirir.
Ters çevir	Görüntünün renklerini ters çevirir.
Doygunlaştırmak	Görüntünün doygunluğunu değiştirir.
Sepya	Görüntüyü sepya tonlarına dönüştürür.
Sıcaklık ve renk tonu	Görüntünün sıcaklığını ve/veya renk tonunu ayarlar.

Daha ayrıntılı bilgi için bkz. Win2D'nin Microsoft.Graphics.Canvas.Effects Ad Alanı. Oluşturmada desteklenmeyen efektler [NoComposition] olarak not edilir.

Zincirleme Efektleri

Efektler zincirlenebilir, böylece uygulama aynı anda görüntü üzerinde birden çok efekt kullanabilir. Efekt grafikleri, birine ve diğerine başvurabilen birden çok efekti destekleyebilir. Efektinizi açıklarken, efektinizi giriş olarak eklemeniz yeterlidir.

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
}

Yukarıdaki örnekte, iki girişi olan bir aritmetik bileşik etki açıklanmaktadır. İkinci giriş, 0,5 doygunluk özelliği ile bir saturasyon etkisine sahiptir.

Animasyon Desteği

Efekt özellikleri animasyonu destekler; efekt derlemesi sırasında, efekt özelliklerinin animasyonlu olabileceğini ve bazı özelliklerin sabit değerler olarak "dahili hale getirilebileceğini" belirtebilirsiniz. Animasyon yapılabilir özellikler, "etki adı.özellik adı" biçimindeki dizeler aracılığıyla belirtilir. Bu özellikler, efektin farklı örneklerinde bağımsız olarak animasyon yapılabilir.

Sabit ve Animasyonlu Efekt Özellikleri

Efekt derlemesi sırasında, efekt özelliklerini dinamik olarak veya sabit olarak gömülü özellikler olarak belirtebilirsiniz. Dinamik özellikler "<efekt adı>" biçimindeki dizeler aracılığıyla belirtilir.<özellik adı>". Dinamik özellikler belirli bir değere ayarlanabilir veya oluşturma animasyon sistemi kullanılarak animasyon oluşturulabilir.

Yukarıdaki efekt açıklamasını derlerken, doygunluğu 0,5'e sabitleme veya doygunluğu dinamik hale getirip dinamik olarak ayarlama ya da animasyonlandırma esnekliğine sahip olursunuz.

Doygunluğun entegre edildiği bir efekti derlemek:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Dinamik doygunluk ile bir etki oluşturma:

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

Yukarıdaki efektin doygunluk özelliği daha sonra ya statik bir değere ayarlanabilir ya da Expression veya ScalarKeyFrame animasyonları kullanılarak animasyon haline getirilebilir.

Aşağıdaki gibi bir efektin Doygunluk özelliğine animasyon eklemek için kullanılacak bir ScalarKeyFrame oluşturabilirsiniz:

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;

Animasyonu efektin Doygunluk özelliğinde şu şekilde başlatın:

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

Bağımsız Özelliklere Sahip Birden Çok Efekt Örneği

Etki derlemesi sırasında bir parametrenin dinamik olması gerektiğini belirterek, parametre efekt başına örnek temelinde değiştirilebilir. Bu, iki Görselin aynı efekti kullanmasına ancak farklı efekt özellikleriyle işlenmesine olanak tanır.