コンポジション効果

Microsoft.UI.Composition API を使用すると、アニメーション化可能な効果プロパティを持つ画像と UI にリアルタイム効果を適用できます。この概要では、WinUI アプリと Windows App SDK アプリのコンポジションビジュアルに効果を適用できる機能について説明します。

WinUI アプリと Windows App SDK アプリで一貫した効果の作成をサポートするために、コンポジション効果は Win2D の IGraphicsEffect インターフェイスを利用するため、 Microsoft.Graphics.Canvas.Effects 名前空間を使用して効果を記述できます。

ブラシ効果は、既存のイメージのセットに効果を適用することによって、アプリケーションの領域を描画するために使用されます。 Windows App SDK コンポジション効果 API は SpriteVisuals に重点を置いています。 SpriteVisual を使用すると、色、画像、効果の作成を柔軟に組み合わせることができます。ビジュアルは四角形の境界を定義し、ブラシは四角形の描画に使用されるピクセルを定義します。

エフェクトブラシは、エフェクトグラフの出力からコンテンツが取得されたコンポジションツリービジュアルで使用されます。効果は既存のサーフェス/テクスチャを参照できますが、他のコンポジションツリーの出力は参照できません。

XamlCompositionBrushBase で効果ブラシを使用して、XAML UIElements に効果を適用することもできます。

効果の特徴

エフェクトライブラリ

現在、コンポジションでは次の効果がサポートされています。

影響	説明
2D アフィン変換	2D アフィン変換行列を画像に適用します。
算術合成	柔軟な数式を使用して 2 つの画像を結合します。
ブレンド効果	2 つのイメージを結合するブレンド効果を作成します。コンポジションは、Win2D でサポートされている 26 種類のブレンドモードのうち 21 個を提供します。
色のソース	純色を含むイメージを生成します。
Composite	2 つの画像を結合します。コンポジションは、Win2D でサポートされているすべての 13 の複合モードを提供します。
コントラスト	イメージのコントラストを増減します。
曝露	画像の露出を増減します。
グレースケール	イメージを単色灰色に変換します。
ガンマ転送	チャネルごとのガンマ伝達関数を適用して、イメージの色を変更します。
Hue の回転	色相の値を回転させて、イメージの色を変更します。
反転	イメージの色を反転します。
飽和	イメージの彩度を変更します。
セピア	イメージをセピアトーンに変換します。
温度と濃淡	イメージの温度や濃淡を調整します。

詳細については、Win2D の Microsoft.Graphics.Canvas.Effects 名前空間を参照してください。合成でサポートされていない効果は[NoComposition]として記載されています。

チェーン効果

効果を連結して、アプリケーションが画像に対して複数の効果を同時に使用できるようにします。効果グラフでは、1 つを参照できる複数の効果をサポートできます。効果を説明するときは、効果に入力として効果を追加するだけです。

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
}

上の例では、2 つの入力を持つ算術複合効果について説明します。 2 番目の入力は、.5 彩度プロパティを持つ彩度効果を持ちます。

アニメーションのサポート

効果プロパティはアニメーションをサポートし、エフェクトのコンパイル中に、エフェクトプロパティをアニメーション化することができ、定数として"ベイクイン"することができます。アニメーション化可能なプロパティは、"effect name.property name" という形式の文字列を使用して指定されます。これらのプロパティは、効果の複数のインスタンス化に対して個別にアニメーション化できます。

定数とアニメーション効果のプロパティ

エフェクトのコンパイル時に、エフェクトプロパティを動的プロパティとして、または定数として "ベイクイン" されるプロパティとして指定できます。動的プロパティは、"<effect name>.<プロパティ名>"という形式の文字列を通じて指定されます。動的プロパティは、特定の値に設定することも、コンポジションアニメーションシステムを使用してアニメーション化することもできます。

上記の効果の説明をコンパイルする場合、飽和度を静的に0.5に固定するか、動的に設定するか、あるいはアニメーション化して柔軟に操作できます。

彩度があらかじめ組み込まれた効果をコンパイルする。

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

動的飽和状態でのエフェクトのコンパイル:

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

上記の効果の彩度プロパティは、静的な値に設定することも、Expression アニメーションまたは ScalarKeyFrame アニメーションを使用してアニメーション化することもできます。

次のような効果の Saturation プロパティをアニメーション化するために使用される ScalarKeyFrame を作成できます。

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;

効果の彩度プロパティで、次のようにアニメーションを開始します。

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

独立したプロパティを持つ複数のエフェクトインスタンス

効果のコンパイル時にパラメーターを動的に指定することで、効果インスタンスごとにパラメーターを変更できます。これにより、2 つのビジュアルで同じ効果を使用できますが、異なる効果プロパティでレンダリングできます。