次の方法で共有


コンポジション効果

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 つのビジュアルに同じ効果を使用しても、異なる効果プロパティを使って表示できます。

コンポジション効果の概要

このクイック スタート チュートリアルでは、効果のいくつかの基本機能の使用方法を示します。

Visual Studio のインストール

  • サポートされている Visual Studio バージョンがインストールされていない場合は、「Visual Studio ダウンロード」ページをご覧ください。

新しいプロジェクトの作成

  • [ファイル] -> [新規] -> [プロジェクト] に移動します。
  • [Visual C#] を選択します。
  • 「空のアプリ (Windows ユニバーサル)」を作成します (Visual Studio 2015)。
  • 選択したプロジェクト名を入力します。
  • [OK] をクリックします。

Win2D のインストール

Win2D は Nuget.org パッケージとしてリリースされており、効果を使用する前にインストールする必要があります。

Windows 10 用と Windows 8.1 用の 2 つのパッケージ バージョンがあります。 コンポジション効果の場合、Windows 10 バージョンを使います。

  • [ツール]、[NuGet パッケージ マネージャー]、[ソリューションの NuGet パッケージの管理] の順にクリックして、NuGet パッケージ マネージャーを起動します。
  • 「Win2D」を検索し、Windows のターゲット バージョンに適したパッケージを選択します。 Windows.UI.Composition は Windows 10 (8.1 ではない) をサポートするため、Win2D.uwp を選択します。
  • 使用許諾契約書に同意します。
  • [閉じる] をクリックします。

次のいくつかの手順では、コンポジション API を使って、すべての彩度を除去する彩度効果をこの猫の画像に適用します。 このモデルでは効果が作成され、画像に適用されます。

ソース画像

コンポジション設定の基本

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

CompositionSurface ブラシの作成

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

効果の作成、コンパイル、および適用

  1. グラフィックス効果を作成する

    var graphicsEffect = new SaturationEffect
    {
      Saturation = 0.0f,
      Source = new CompositionEffectSourceParameter("mySource")
    };
    
  2. 効果をコンパイルし、効果ブラシを作成する

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
    
    var catEffect = effectFactory.CreateBrush();
    catEffect.SetSourceParameter("mySource", surfaceBrush);
    
  3. コンポジション ツリーに SpriteVisual を作成し、効果を適用する

    var catVisual = _compositor.CreateSpriteVisual();
    catVisual.Brush = catEffect;
    catVisual.Size = new Vector2(219, 300);
    _root.Children.InsertAtBottom(catVisual);    
    
  4. 読み込む画像ソースを作成する。

    CompositionImage imageSource = _imageFactory.CreateImageFromUri(new Uri("ms-appx:///Assets/cat.png"));
    CompositionImageLoadResult result = await imageSource.CompleteLoadAsync();
    if (result.Status == CompositionImageLoadStatus.Success)
    
  5. SpriteVisual のサーフェスのサイズとブラシ

    brush.Surface = imageSource.Surface;
    
  6. アプリを実行する – 結果は彩度を下げた猫になるはずです。

彩度を下げた画像

説明