컴퍼지션 효과Composition effects

애니메이션 효과 api를 사용 하면 이미지 와 ui에 실시간 효과를 적용 하 여 효과 속성을 수 있습니다.The Windows.UI.Composition APIs allows real-time effects to be applied to images and UI with animatable effect properties. 이 개요에서는 효과를 컴퍼지션 시각적 개체에 적용 하는 데 사용할 수 있는 기능을 실행 합니다.In this overview, we’ll run through the functionality available that allows effects to be applied to a composition visual.

응용 프로그램의 효과를 설명 하는 개발자에 게 UWP (유니버설 Windows 플랫폼 ) 일관성을 지원 하기 위해 컴퍼지션 효과는 Win2D's IGraphicsEffect 인터페이스를 활용 하 여 효과 설명을 사용 합니다.To support Universal Windows Platform (UWP) consistency for developers describing effects in their applications, composition effects leverage Win2D’s IGraphicsEffect interface to use effect descriptions via the Microsoft.Graphics.Canvas.Effects Namespace.

브러시 효과는 기존 이미지 집합에 효과를 적용 하 여 응용 프로그램의 영역을 그리는 데 사용 됩니다.Brush effects are used to paint areas of an application by applying effects to a set of existing images. Windows 10 컴퍼지션 효과 Api는 스프라이트 시각적 개체에 초점을 맞추고 있습니다.Windows 10 composition effect APIs are focused on Sprite Visuals. SpriteVisual은 색, 이미지 및 효과를 만들 때 유연 하 고 상호 작용 수 있습니다.The SpriteVisual allows for flexibility and interplay in color, image and effect creation. SpriteVisual는 2D 사각형을 브러시로 채울 수 있는 컴퍼지션 시각적 유형입니다.The SpriteVisual is a composition visual type that can fill a 2D rectangle with a brush. 시각적 개체는 사각형의 경계를 정의 하 고 브러시는 사각형을 그리는 데 사용 되는 픽셀을 정의 합니다.The visual defines the bounds of the rectangle and the brush defines the pixels used to paint the rectangle.

효과 브러시는 효과 그래프의 출력에서 가져온 내용이 있는 컴퍼지션 트리 시각적 개체에 사용 됩니다.Effect brushes are used on composition tree visuals whose content comes from the output of an effect graph. 효과는 기존 표면/질감을 참조할 수 있지만 다른 컴퍼지션 트리의 출력은 참조할 수 없습니다.Effects can reference existing surfaces/textures, but not the output of other composition trees.

XamlCompositionBrushBase를 사용 하 여 효과 브러시를 사용 하 여 XAML UIElements 적용 될 수도 있습니다.Effects can also be applied to XAML UIElements using an effect brush with XamlCompositionBrushBase.

효과 기능Effect Features

효과 라이브러리Effect Library

현재 컴퍼지션은 다음과 같은 효과를 지원 합니다.Currently composition supports the following effects:

효과Effect 설명Description
2D 관계 변형2D affine transform 이미지에 2D 유사 변형 행렬을 적용 합니다.Applies a 2D affine transform matrix to an image. 효과 [샘플](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects)에서 알파 마스크에 애니메이션 효과를 주는 데이 효과를 사용 했습니다.We used this effect to animate alpha mask in our effect [samples](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).
산술 복합Arithmetic composite 유연한 수식을 사용 하 여 두 이미지를 결합 합니다.Combines two images using a flexible equation. [샘플](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects)에서 교차 페이드 효과를 만들기 위해 산술 복합을 사용 했습니다.We used arithmetic composite to create a crossfade effect in our [samples](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).
Blend 효과Blend effect 두 이미지를 결합 하는 blend 효과를 만듭니다.Creates a blend effect that combines two images. 컴퍼지션은 Win2D에서 지원 되는 26 blend 모드 의 21 개를 제공 합니다.Composition provides 21 of the 26 blend modes supported in Win2D.
색 원본Color source 단색을 포함 하는 이미지를 생성 합니다.Generates an image containing a solid color.
복합Composite 두 이미지를 결합 합니다.Combines two images. 컴퍼지션은 Win2D에서 지원 되는 13 개의 복합 모드 를 모두 제공 합니다.Composition provides all 13 composite modes supported in Win2D.
이 예와Contrast 이미지의 대비를 늘리거나 줄입니다.Increases or decreases the contrast of an image.
노출을Exposure 이미지의 노출을 늘리거나 줄입니다.Increases or decreases the exposure of an image.
회색조Grayscale 이미지를 단색 회색으로 변환 합니다.Converts an image to monochromatic gray.
감마 전송Gamma transfer 채널 별 감마 전송 함수를 적용 하 여 이미지 색을 변경 합니다.Alters the colors of an image by applying a per-channel gamma transfer function.
색상 회전Hue rotate 색상 값을 회전 하 여 이미지의 색을 변경 합니다.Alters the color of an image by rotating its hue values.
[Invert 이미지 색을 반전 합니다.Inverts the colors of an image.
SaturateSaturate 이미지의 채도를 변경 합니다.Alters the saturation of an image.
Sepia 이미지를 세피아 톤으로 변환 합니다.Converts an image to sepia tones.
온도 및 색조Temperature and tint 이미지의 온도 및/또는 색조를 조정 합니다.Adjusts the temperature and/or tint of an image.

자세한 내용은 Win2D's 네임 스페이스를 참조 하세요.See Win2D’s Microsoft.Graphics.Canvas.Effects Namespace for more detailed information. 컴퍼지션에서 지원 되지 않는 효과는 nocomposition으로 명시 됩니다 [ ] .Effects not supported in composition are noted as [NoComposition].

연결 효과Chaining Effects

응용 프로그램이 이미지에 여러 효과를 동시에 사용할 수 있도록 효과를 연결할 수 있습니다.Effects can be chained, allowing an application to simultaneously use multiple effects on an image. 효과 그래프는 하나를 참조할 수 있는 여러 효과를 지원할 수 있습니다.Effect graphs can support multiple effects that can refer to one and other. 효과를 설명할 때 효과에 대 한 입력으로 효과를 추가 하기만 하면 됩니다.When describing your effect, simply add an effect as input to your effect.

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
}

위의 예제에서는 두 개의 입력이 있는 산술 복합 효과를 설명 합니다.The example above describes an arithmetic composite effect which has two inputs. 두 번째 입력에는. 5 채도 속성의 포화 효과가 있습니다.The second input has a saturation effect with a .5 saturation property.

애니메이션 지원Animation Support

효과 속성이 애니메이션을 지원 합니다. 효과 컴파일을 수행 하는 동안 효과 속성에 애니메이션을 적용할 수 있으며 상수로 "구운" 할 수 있는 효과를 지정할 수 있습니다.Effect properties support animation, during effect compilation you can specify effect properties can be animated and which can be "baked in" as constants. 애니메이션 효과 속성은 "effect name. 속성 이름" 형식의 문자열을 통해 지정 됩니다.The animatable properties are specified through strings of the form “effect name.property name”. 이러한 속성은 효과의 여러 인스턴스화에 대해 독립적으로 애니메이션을 적용할 수 있습니다.These properties can be animated independently over multiple instantiations of the effect.

상수 및 애니메이션 효과 속성Constant vs Animated Effect Properties

효과 컴파일을 수행 하는 동안에는 효과 속성을 동적으로 지정 하거나 "구운 in" 속성으로 지정할 수 있습니다.During effect compilation you can specify effect properties as dynamic or as properties that are "baked in" as constants. 동적 속성은 "." 형식의 문자열을 통해 지정 됩니다 .The dynamic properties are specified through strings of the form “.”. 동적 속성은 특정 값으로 설정 하거나 컴퍼지션 애니메이션 시스템을 사용 하 여 애니메이션을 적용할 수 있습니다.The dynamic properties can be set to a specific value or can be animated using the composition animation system.

위의 효과 설명을 컴파일하는 경우 굽는 채도의 유연성이 0.5 또는 동적으로 설정 하 여 동적으로 설정 하거나 애니메이션을 적용할 수 있습니다.When compiling the effect description above, you have the flexibility of either baking in saturation to be equal to 0.5 or making it dynamic and setting it dynamically or animating it.

다음에서 채도 구운를 사용 하 여 효과 컴파일:Compiling an effect with saturation baked in:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

동적 채도를 사용 하 여 효과 컴파일:Compiling an effect with dynamic saturation:

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

그런 다음 위의 효과의 채도 속성을 정적 값으로 설정 하거나 Expression 또는 ScalarKeyFrame 애니메이션 중 하나를 사용 하 여 애니메이션을 적용할 수 있습니다.The saturation property of the effect above can then be either set to a static value or animated using either Expression or ScalarKeyFrame animations.

다음과 같이 효과의 채도 속성에 애니메이션 효과를 주는 데 사용 되는 ScalarKeyFrame를 만들 수 있습니다.You can create a ScalarKeyFrame that will be used to animate the Saturation property of an effect like this:

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;

다음과 같이 효과의 채도 속성에서 애니메이션을 시작 합니다.Start the animation on the Saturation property of the effect like this:

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

효과 및 식 사용에 대 한 [AlphaMask 샘플과](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/AlphaMask) 키 프레임을 사용 하 여 애니메이션 효과를 주는 효과 속성은 [Desaturation-애니메이션 샘플](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/Desaturation - Animation) 을 참조 하세요.See the [Desaturation - Animation sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/Desaturation - Animation) for effect properties animated with key frames and the [AlphaMask sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/AlphaMask) for use of effects and expressions.

독립적인 속성이 있는 여러 효과 인스턴스Multiple Effect Instances with Independent Properties

효과를 컴파일하는 동안 매개 변수를 동적으로 지정 하 여 효과를 적용 하는 인스턴스를 기준으로 매개 변수를 변경할 수 있습니다.By specifying that a parameter should be dynamic during effect compilation, the parameter can then be changed on a per-effect instance basis. 이렇게 하면 두 시각적 개체가 동일한 효과를 사용 하지만 다른 효과 속성으로 렌더링 될 수 있습니다.This allows two Visuals to use the same effect but be rendered with different effect properties. 자세한 내용은 ColorSource 및 Blend [샘플](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/ColorSource and Blend) 을 참조 하세요.See the ColorSource and Blend [sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/ColorSource and Blend) for more information.

컴퍼지션 효과 시작Getting Started with Composition Effects

이 빠른 시작 자습서에서는 효과의 기본 기능 중 일부를 활용 하는 방법을 보여 줍니다.This quick start tutorial shows you how to make use of some of the basic capabilities of effects.

Visual Studio 설치Installing Visual Studio

  • 지원 되는 버전의 Visual Studio가 설치 되어 있지 않은 경우 Visual Studio 다운로드 페이지로이동 합니다.If you don't have a supported version of Visual Studio installed, go to the Visual Studio Downloads page here.

새 프로젝트 만들기Creating a new project

  • 파일->새로 만들기->프로젝트 ...로 이동 합니다.Go to File->New->Project...
  • ' Visual c # ' 선택Select 'Visual C#'
  • ' 빈 앱 (Windows 유니버설) ' 만들기 (Visual Studio 2015)Create a 'Blank App (Windows Universal)' (Visual Studio 2015)
  • 선택한 프로젝트 이름 입력Enter a project name of your choosing
  • ' 확인 '을 클릭 합니다.Click 'OK'

Win2D 설치Installing Win2D

Win2D는 Nuget.org 패키지로 릴리스 되었으며 효과를 사용 하려면 먼저 설치 해야 합니다.Win2D is released as a Nuget.org package and needs to be installed before you can use effects.

두 가지 패키지 버전, 즉 Windows 10 용 패키지 버전과 Windows 8.1 용 패키지가 있습니다.There are two package versions, one for Windows 10 and one for Windows 8.1. 컴퍼지션 효과의 경우 Windows 10 버전을 사용 합니다.For Composition effects you’ll use the Windows 10 version.

  • 도구 → NuGet 패키지 관리자 → 솔루션에 대 한 NuGet 패키지 관리로 이동 하 여 NuGet 패키지 관리자를 시작 합니다.Launch the NuGet Package Manager by going to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
  • "Win2D"를 검색 하 고 대상 Windows 버전에 적절 한 패키지를 선택 합니다.Search for "Win2D" and select the appropriate package for your target version of Windows. Windows. UI입니다.Because Windows.UI. 컴퍼지션은 Windows 10 (8.1 아님)을 지원 하 고 Win2D를 선택 합니다.Composition supports Windows 10 (not 8.1), select Win2D.uwp.
  • 사용권 계약에 동의 합니다.Accept the license agreement
  • ' 닫기 '를 클릭 합니다.Click 'Close'

다음 몇 단계에서는 컴퍼지션 API를 사용 하 여이 cat 이미지에 채도 효과를 적용 하 여 모든 채도를 제거 합니다.In the next few steps we will use composition API’s to apply a saturation effect to this cat image which will remove all saturation. 이 모델에서는 효과가 생성 된 다음 이미지에 적용 됩니다.In this model the effect is created and then applied to an image.

원본 이미지

컴퍼지션 기본 설정Setting your Composition Basics

Compositor, root System.windows.media.containervisual>를 설정 하 고 코어 창에 연결 하는 방법에 대 한 예제는 GitHub의 [컴퍼지션 시각적 트리 샘플](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/CompositionImageSample) 을 참조 하세요.See the [Composition Visual Tree Sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/CompositionImageSample) on our GitHub for an example of how to set up Windows.UI.Composition Compositor, root ContainerVisual, and associate with the Core Window.

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

CompositionSurface 브러시 만들기Creating a CompositionSurface Brush

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

효과 생성, 컴파일 및 적용Creating, Compiling and Applying Effects

  1. 그래픽 효과 만들기Create the graphics effect

    var graphicsEffect = new SaturationEffect
    {
      Saturation = 0.0f,
      Source = new CompositionEffectSourceParameter("mySource")
    };
    
  2. 효과를 컴파일하고 효과 브러시를 만듭니다.Compile the effect and create effect brush

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
    
    var catEffect = effectFactory.CreateBrush();
    catEffect.SetSourceParameter("mySource", surfaceBrush);
    
  3. 컴퍼지션 트리에서 SpriteVisual을 만들고 효과를 적용 합니다.Create a SpriteVisual in the composition tree and apply the effect

    var catVisual = _compositor.CreateSpriteVisual();
      catVisual.Brush = catEffect;
      catVisual.Size = new Vector2(219, 300);
      _root.Children.InsertAtBottom(catVisual);
    }
    
  4. 로드할 이미지 원본을 만듭니다.Create your image source to load.

    CompositionImage imageSource = _imageFactory.CreateImageFromUri(new Uri("ms-appx:///Assets/cat.png"));
    CompositionImageLoadResult result = await imageSource.CompleteLoadAsync();
    if (result.Status == CompositionImageLoadStatus.Success)
    
  5. SpriteVisual 화면 크기 및 브러시Size and brush the surface on the SpriteVisual

    brush.Surface = imageSource.Surface;
    
  6. 앱 실행 – 결과는 낮춘 고양이 여야 합니다.Run your app – your results should be a desaturated cat:

낮춘 이미지

추가 정보More Information