컴퍼지션 효과

아티클
03/11/2024

Windows.UI.Composition API를 사용하면 애니메이션 효과를 줄 수 있는 효과 속성을 사용하여 이미지 및 UI에 실시간 효과를 적용할 수 있습니다. 이 개요에서는 컴퍼지션 시각적 개체에 효과를 적용할 때 사용할 수 있는 기능을 설명합니다.

애플리케이션의 효과를 설명하는 개발자를 위한 UWP(유니버설 Windows 플랫폼) 일관성을 지원하기 위해 컴퍼지션 효과는 Win2D의 IGraphicsEffect 인터페이스를 활용해 Microsoft.Graphics.Canvas.Effects 네임스페이스를 통해 효과 설명을 사용합니다.

기존 이미지 집합에 효과를 적용하여 애플리케이션 영역을 그리는 데 브러시 효과가 사용됩니다. Windows 10 컴퍼지션 효과 API는 스프라이트 시각적 개체에 집중됩니다. SpriteVisual은 색상, 이미지 및 효과 생성에 유연한 상호 영향을 줄 수 있습니다. SpriteVisual은 브러시로 2D 사각형을 채울 수 있는 컴퍼지션 시각적 개체 유형입니다. 시각적 개체는 사각형의 경계를 정의하고 브러시는 사각형을 그리는 데 사용되는 픽셀을 정의합니다.

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

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

효과 기능

효과 라이브러리

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

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

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

위의 예제는 두 개의 입력이 있는 산술 합성 효과를 설명합니다. 두 번째 입력에는 .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);

그런 다음 위 효과의 채도 속성을 정적 값으로 설정하거나 식 또는 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);

독립 속성이 있는 여러 효과 인스턴스

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