コンポジション効果

[アーティクル]
03/18/2023

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

アプリケーションの効果を記述する開発者に対してユニバーサル Windows プラットフォーム (UWP) との整合性をサポートするには、コンポジション効果で Win2D の IGraphicsEffect インターフェイスを活用し、Microsoft.Graphics.Canvas.Effects 名前空間を介して効果記述子を使用します。

ブラシ効果は、一連の既存画像に効果を適用することでアプリケーションの領域をペイントするために使用されます。 Windows 10 のコンポジション効果 API ではスプライトビジュアルが重視されます。 SpriteVisual を使うと、色、画像、効果の作成で柔軟性と関係性を得られます。 SpriteVisual は、2D の四角形をブラシで埋めることができるコンポジションビジュアルタイプです。ビジュアルは四角形の境界を定義し、ブラシは四角形のペイントに使用されるピクセルを定義します。

効果ブラシは、コンテンツが効果グラフの出力に基づくコンポジションツリービジュアルで使用されます。効果は既存のサーフェスとテクスチャを参照できますが、他のコンポジションツリーの出力は参照できません。

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

効果機能

効果ライブラリ

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

効果	説明
2D アフィン変換	画像に 2D アフィン変換マトリックスを適用します。
算術コンポジット	柔軟な方程式を使って 2 つの画像を組み合わせます。
ブレンド効果	2 つの画像を組み合わせるブレンド効果を作成します。コンポジションでは、Win2D でサポートされている 26 個のブレンドモードのうち 21 個が用意されています。
カラーソース	単色が含まれている画像を生成します。
Composite	2 つの画像を組み合わせます。コンポジションでは、Win2D でサポートされている 13 個のコンポジットモードがすべて用意されています。
この例を、	画像のコントラストを増減します。
露出	画像の露出を増減します。
グレースケール	画像を灰色のモノクロ画像に変換します。
ガンマ伝達	チャネルあたりのガンマ伝達関数を適用することで、画像の色を変更します。
色相回転	色相値を回転することで、画像の色を変更します。
Invert	画像の色を反転します。
彩度	画像の彩度を変更します。
セピア	画像をセピア調に変換します。
色温度と濃淡	画像の色温度および濃淡を調整します。

詳しくは、Win2D の Microsoft.Graphics.Canvas.Effects 名前空間をご覧ください。コンポジションでサポートされていない効果は [NoComposition] として示されています。

チェーン効果

効果をチェーンして、アプリケーションの画像で複数の効果を同時に使用できます。効果グラフは、相互に参照できる複数の効果をサポートできます。効果を記述するときは、効果に対する入力として効果を追加します。

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 番目の入力の彩度効果では、彩度プロパティを 0.5 に設定しています。

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

効果プロパティはアニメーション化をサポートしています。効果のコンパイル時に、効果プロパティをアニメーション化するか、定数として固定するかを指定できます。アニメーション化可能なプロパティは、「効果名.プロパティ名」という形式の文字列で指定されます。これらのプロパティは、効果の複数のインスタンスで個別にアニメーション化できます。

効果プロパティ: 固定とアニメーション化

効果のコンパイル時に、効果プロパティを動的に設定されるようにするか、定数として固定されるようにするかを指定できます。動的プロパティは、"<効果名>.<プロパティ名>".という形式の文字列で指定されます。動的プロパティを特定の値に設定するか、コンポジションのアニメーションシステムを使ってアニメーション化できます。

先ほどの効果のコンパイル時、彩度を 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);

その後、先ほどの効果の彩度プロパティを静的な値に設定するか、式または ScalarKeyFrame アニメーションのいずれかを使ってアニメーション化できます。

次のように、効果の彩度プロパティのアニメーション化に使われる 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 つのビジュアルに同じ効果を使用しても、異なる効果プロパティを使って表示できます。