구성 효과

Microsoft.UI.Composition API를 사용하면 애니메이션 효과를 적용할 수 있는 효과 속성을 사용하여 이미지 및 UI에 실시간 효과를 적용할 수 있습니다. 이 개요에서는 WinUI 및 Windows 앱 SDK 앱의 컴퍼지션 시각적 개체에 효과를 적용할 수 있는 기능을 살펴봅니다.

WinUI 및 Windows 앱 SDK 앱에서 일관된 효과 작성을 지원하기 위해 컴퍼지션 효과는 Win2D의 IGraphicsEffect 인터페이스를 활용하여 Microsoft.Graphics.Canvas.Effects 네임스페이스를 사용하여 효과를 설명할 수 있습니다.

브러시 효과는 기존 이미지 집합에 효과를 적용하여 애플리케이션 영역을 그리는 데 사용됩니다. Windows 앱 SDK 컴퍼지션 효과 API는 SpriteVisuals에 중점을 줍니다. SpriteVisual은 색상, 이미지 및 효과 생성을 결합할 때 유연성을 제공합니다. 시각적 개체는 사각형의 경계를 정의하고 브러시는 사각형을 그리는 데 사용되는 픽셀을 정의합니다.

효과 브러시는 효과 그래프의 출력에서 콘텐츠가 제공되는 컴퍼지션 트리 비주얼에 사용됩니다. 효과는 기존 표면/질감을 참조할 수 있지만 다른 컴퍼지션 트리의 출력은 참조할 수 없습니다.

XamlCompositionBrushBase와 함께 효과 브러시를 사용하여 XAML UIElements에 효과를 적용할 수도 있습니다.

효과 기능

• 효과 라이브러리
• 체인 효과
• 애니메이션 지원
• 상수 및 애니메이션 효과 속성
• 독립 속성이 있는 다중 효과 인스턴스

효과 라이브러리

현재 컴퍼지션은 다음 효과를 지원합니다.

영향	설명
2D 아핀 변환	이미지에 2D 아핀 변환 매트릭스를 적용합니다.
산술 합성	유연한 수식을 사용하여 두 이미지를 결합합니다.
혼합 효과	두 이미지를 결합하는 혼합 효과를 만듭니다. 컴퍼지션에서는 Win2D에서 지원되는 26개의 혼합 모드 중 21개를 제공합니다.
색상 소스	단색을 포함하는 이미지를 생성합니다.
Composite	두 이미지를 결합합니다. 컴퍼지션은 Win2D에서 지원되는 13 개의 복합 모드 를 모두 제공합니다.
대조	이미지의 대비를 늘리거나 줄입니다.
노출	이미지 노출을 늘리거나 줄입니다.
회색조	이미지를 단색 회색으로 변환합니다.
감마 전송	채널별 감마 전송 함수를 적용하여 이미지의 색을 변경합니다.
색조 회전	해당 색상 값을 회전하여 이미지의 색을 변경합니다.
반전하다	이미지의 색을 반전합니다.
포화	이미지의 채도를 변경합니다.
세피아	이미지를 세피아 톤으로 변환합니다.
온도 및 색조	이미지의 온도 및/또는 색조를 조정합니다.

자세한 내용은 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
}

위의 예제에서는 두 개의 입력이 있는 산술 복합 효과에 대해 설명합니다. 두 번째 입력에는 0.5의 채도 속성이 적용된 채도 효과가 있습니다.

애니메이션 지원

효과 속성은 애니메이션을 지원하며, 효과를 컴파일하는 동안 애니메이션으로 지정할 수 있는 속성과 상수로 "구울 수 있는" 속성을 명시할 수 있습니다. 애니메이션 효과를 줄 수 있는 속성은 "effect name.property 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 애니메이션을 사용하여 애니메이션 효과를 적용할 수 있습니다.

다음과 같이 효과의 채도 속성에 애니메이션 효과를 주는 데 사용할 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);

독립 속성이 있는 다중 효과 인스턴스

효과 컴파일 중에 매개 변수를 동적으로 지정하면 매개 변수를 효과별 인스턴스 기준으로 변경할 수 있습니다. 이렇게 하면 두 시각적 개체가 동일한 효과를 사용하지만 다른 효과 속성으로 렌더링할 수 있습니다.

컴포지션 효과 시작하기

이 빠른 시작 자습서에서는 효과의 기본 기능 중 일부를 사용하는 방법을 보여 줍니다.

• Visual Studio 설치
• 새 프로젝트 만들기
• Win2D 설치
• 컴퍼지션 기본 사항 설정
• CompositionSurface 브러시 만들기
• 효과 만들기, 컴파일 및 적용

Visual Studio 설치

• 지원되는 버전의 Visual Studio가 설치되어 있지 않은 경우 여기에서 Visual Studio 다운로드 페이지로 이동합니다.

새 프로젝트 만들기

• 파일>새로 만들기>프로젝트로 이동합니다.
• WinUI 빈 앱(패키지) 템플릿을 선택합니다.
• 선택한 프로젝트 이름을 입력합니다.
• 만들기를 클릭합니다.

Win2D 설치

Win2D는 NuGet.org 패키지로 릴리스되며 WinUI 프로젝트에서 이러한 효과를 사용하려면 설치해야 합니다.

• 도구>NuGet 패키지 관리자>솔루션용 NuGet 패키지 관리로 이동하여 NuGet 패키지 관리자를 시작합니다.
• Win2D.WinUI를 검색하고 프로젝트에 대한 패키지를 설치합니다.
• 사용권 계약에 동의합니다.
• 닫기를 클릭합니다.

다음 몇 단계에서는 컴퍼지션 API를 사용하여 이 고양이 이미지에 채도 효과를 적용하여 모든 채도를 제거합니다. 이 모델에서는 효과가 만들어지고 이미지에 적용됩니다.

합성 설정 기본 사항

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

CompositionSurface 브러시 만들기

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

효과 만들기, 컴파일 및 적용

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. 앱을 실행합니다. 결과는 채도가 낮은 고양이여야 합니다.

더 많은 정보

• Microsoft – Composition GitHub
• Microsoft.UI.Composition
• 구성 개요
• 시각적 트리 기본 사항
• 합성 브러시
• XamlCompositionBrushBase
• 애니메이션 개요
• BeginDraw 및 EndDraw로 구성되는 네이티브 DirectX와 Direct2D의 상호 운용