입력 기반 애니메이션Input-driven animations

이 문서에서는 InputAnimation API에 대 한 소개를 제공 하 고 UI에서 이러한 형식의 애니메이션을 사용 하는 방법을 권장 합니다.This article provides an introduction to the InputAnimation API, and recommends how to use these types of animations in your UI.

필수 구성 요소Prerequisites

여기서는 다음 문서에서 설명 하는 개념에 대해 잘 알고 있다고 가정 합니다.Here, we assume that you're familiar with the concepts discussed in these articles:

사용자 상호 작용에서 부드러운 동작 제어Smooth motion driven from user interactions

흐름 디자인 언어에서 최종 사용자와 앱 간의 상호 작용은 가장 중요 합니다.In the Fluent Design language, interaction between end users and apps is of the utmost importance. 앱은 파트를 살펴볼 뿐만 아니라 상호 작용 하는 사용자에 게 자연스럽 게 동적으로 응답 합니다.Apps not only have to look the part, but also respond naturally and dynamically to the users that interact with them. 즉, 화면에 손가락을 배치 하면 UI가 입력의 변경 수준에 적절 하 게 반응 해야 합니다. 스크롤은 부드러운 모양으로 이동 하 고 화면에서 손가락으로 이동 합니다.This means when a finger is placed on the screen, the UI should gracefully react to changing degrees of input; scrolling should feel smooth, and stick to a finger panning across the screen.

사용자 입력 결과에 동적으로 응답 하 고 유동적으로 응답 하는 UI를 빌드하는 작업은 이제 정상 이지만 사용자가 다양 한 UI 환경과 상호 작용 하는 경우 유용 하 고 자연스럽 게 보입니다.Building UI that dynamically and fluidly responds to user input results in higher user engagement - Motion now not only looks good, but feels good and natural when users interact with your different UI experiences. 이렇게 하면 최종 사용자가 더 쉽게 응용 프로그램에 연결 하 여 환경을 기억 하 고 매력적인 수 있습니다.This enables end users to more easily connect with your application, making the experience more memorable and delightful.

이전 터치만 확장Expanding past just touch

터치는 최종 사용자가 UI 콘텐츠를 조작 하는 데 사용 하는 보다 일반적인 인터페이스 중 하나 이지만 마우스 및 펜과 같은 다양 한 다른 입력 소프트웨어나 사용 합니다.Although touch is one of the more common interfaces end users use to manipulate UI content, they will also use various other input modalities such mouse and pen. 이러한 경우, 최종 사용자가 사용 하도록 선택한 입력에 관계 없이 UI가 입력에 동적으로 응답 하는 것을 확인 하는 것이 중요 합니다.In these cases, it is important that end users perceive that your UI responds dynamically to their input, regardless of what input modality they choose to use. 입력 기반 동작 환경을 디자인 하는 경우 다른 입력 소프트웨어나을 cognizant 합니다.You should be cognizant of the different input modalities when designing input-driven motion experiences.

다른 입력 기반 동작 환경Different Input-Driven Motion Experiences

InputAnimation 공간은 동적으로 응답 하는 동작을 만들 수 있는 다양 한 환경을 제공 합니다.The InputAnimation space provides several different experiences for you to create dynamically responding motion. Windows UI 애니메이션 시스템의 나머지 부분과 마찬가지로 이러한 입력 기반 애니메이션은 동적 동작 환경에 기여 하는 독립 스레드에서 작동 합니다.Like the rest of the Windows UI Animation system, these input-driven animations operate on an independent thread, which helps contribute to the dynamic motion experience. 그러나 환경에서 기존 XAML 컨트롤 및 구성 요소를 활용 하는 경우에도 해당 환경의 부분은 UI 스레드를 바인딩합니다.However, in some cases where the experience leverages existing XAML controls and components, parts of those experiences are still UI thread bound.

동적 입력 기반 동작 애니메이션을 빌드할 때 만드는 세 가지 핵심 환경이 있습니다.There are three core experiences that you create when building dynamic input-driven motion animations:

  1. 기존 ScrollView 환경 개선 – XAML ScrollViewer 위치를 사용 하도록 설정 하 여 동적 애니메이션 환경을 구동 합니다.Enhancing Existing ScrollView Experiences – enable the position of a XAML ScrollViewer to drive dynamic animation experiences.
  2. 포인터 위치 중심 환경 – 적중 테스트 된 UIElement에서 커서의 위치를 활용 하 여 동적 애니메이션 환경을 구동 합니다.Pointer Position-driven Experiences – utilize the position of a cursor on a hit tested UIElement to drive dynamic animation experiences.
  3. InteractionTracker를 사용 하는 사용자 지정 조작 환경 – 스크롤/확대/축소 캔버스와 같은 InteractionTracker을 사용 하 여 완전히 사용자 지정 된 스레드 조작 환경을 만듭니다.Custom Manipulation experiences with InteractionTracker – create a fully customized, off-thread manipulation experiences with InteractionTracker (such as a scrolling/zooming canvas).

기존 ScrollViewer 환경 향상Enhancing Existing ScrollViewer Experiences

보다 동적인 환경을 만드는 일반적인 방법 중 하나는 기존 XAML ScrollViewer 컨트롤을 기반으로 빌드하는 것입니다.One of the common ways to create more dynamic experiences is to build on top of an existing XAML ScrollViewer control. 이러한 경우에는 ScrollViewer의 스크롤 위치를 활용 하 여 간단한 스크롤 환경을 보다 동적으로 만드는 추가 UI 구성 요소를 만듭니다.In these situations, you leverage the scroll position of a ScrollViewer to create additional UI components that make a simple scrolling experience more dynamic. 몇 가지 예로는 스티커/감춤 헤더 및 시차 있습니다.Some examples include Sticky/Shy Headers and Parallax.

시차를 사용 하 여 목록 보기

감춤 헤더

이러한 유형의 환경을 만들 때는 다음과 같은 일반적인 수식을 사용할 수 있습니다.When creating these types of experiences, there is a general formula to follow:

  1. 애니메이션을 구동 하려는 XAML ScrollViewer ScrollManipulationPropertySet off에 액세스 합니다.Access the ScrollManipulationPropertySet off of the XAML ScrollViewer you wish to drive an animation.
    • ElementCompositionPreview. GetScrollViewerManipulationPropertySet (UIElement 요소) API를 통해 수행Done via the ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement element) API
    • Translation 이라는 속성을 포함 하는 CompositionPropertySet를 반환 합니다.Returns a CompositionPropertySet containing a property called Translation
  2. Translation 속성을 참조 하는 수식이 포함 된 컴퍼지션 ExpressionAnimation을 만듭니다.Create a Composition ExpressionAnimation with an equation that references the Translation property.
  3. CompositionObject의 속성에서 애니메이션을 시작 합니다.Start the animation on a CompositionObject’s property.

이러한 환경을 빌드하는 방법에 대 한 자세한 내용은 기존 ScrollViewer 환경 향상을 참조 하세요.For more info on building these experiences, see Enhance existing ScrollViewer experiences.

포인터 위치 중심 환경Pointer Position-driven experiences

입력과 관련 된 또 다른 일반적인 동적 환경은 마우스 커서와 같은 포인터의 위치를 기반으로 애니메이션을 구동 하는 것입니다.Another common dynamic experience involving input is to drive an animation based on the position of a pointer such as a Mouse cursor. 이러한 상황에서 개발자는 스포트라이트를 만들 수 있는 것과 같은 환경을 만드는 XAML UIElement 내에서 적중 테스트를 수행할 때 커서의 위치를 활용 합니다.In these situations, developers leverage the location of a cursor when hit tested within a XAML UIElement that makes experiences like Spotlight Reveal possible to create.

포인터 스포트라이트 예

포인터 회전 예제

이러한 유형의 환경을 만들 때는 다음과 같은 일반적인 수식을 사용할 수 있습니다.When creating these types of experiences, there is a general formula to follow:

  1. 적중 테스트를 수행할 때 커서 위치를 알고 싶은 XAML UIElement PointerPositionPropertySet에서 액세스 합니다.Access the PointerPositionPropertySet off a XAML UIElement that you wish to know the cursor position when hit tested.
    • ElementCompositionPreview. GetPointerPositionPropertySet (UIElement 요소) API를 통해 수행Done via the ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element) API
    • Position 이라는 속성을 포함 하는 CompositionPropertySet를 반환 합니다.Returns a CompositionPropertySet containing a property called Position
  2. Position 속성을 참조 하는 수식이 포함 된 CompositionExpressionAnimation를 만듭니다.Create a CompositionExpressionAnimation with an equation that references the Position property.
  3. CompositionObject의 속성에서 애니메이션을 시작 합니다.Start the animation on a CompositionObject’s property.

InteractionTracker를 사용 하는 사용자 지정 조작 환경Custom manipulation experiences with InteractionTracker

XAML ScrollViewer를 활용 하는 문제 중 하나는 UI 스레드에 바인딩되어 있다는 것입니다.One of the challenges with utilizing a XAML ScrollViewer is that it is bound to the UI thread. 결과적으로, UI 스레드가 사용 되 고 있어 매력적인 환경이 발생 하면 스크롤 및 확대/축소 환경이 종종 지연 될 수 있습니다.As a result, the scrolling and zooming experience can often lag and jitter if the UI thread becomes busy and results in an unappealing experience. 또한 ScrollViewer 환경의 여러 측면을 사용자 지정할 수는 없습니다.In addition, it is not possible to customize many aspects of the ScrollViewer experience. InteractionTracker는 독립 스레드에서 실행 되는 사용자 지정 조작 환경을 만드는 일련의 구성 요소를 제공 하 여 두 문제를 해결 하기 위해 만들어졌습니다.InteractionTracker was created to solve both issues by providing a set of building blocks to create custom manipulation experiences that are run on an independent thread.

3D 상호 작용 예제

애니메이션 예제로 가져오기

InteractionTracker를 사용 하 여 환경을 만들 때 다음을 수행 하는 일반적인 수식이 있습니다.When creating experiences with InteractionTracker, there is a general formula to follow:

  1. InteractionTracker 개체를 만들고 해당 속성을 정의 합니다.Create your InteractionTracker object and define its properties.
  2. InteractionTracker에 대 한 입력을 캡처하여 사용할 CompositionVisual에 대 한 VisualInteractionSources를 만듭니다.Create VisualInteractionSources for any CompositionVisual that should capture input for InteractionTracker to consume.
  3. InteractionTracker의 Position 속성을 참조 하는 수식이 있는 컴퍼지션 ExpressionAnimation을 만듭니다.Create a Composition ExpressionAnimation with an equation that references the Position property of InteractionTracker.
  4. InteractionTracker으로 구동 하려는 컴퍼지션 시각적 개체의 속성에서 애니메이션을 시작 합니다.Start the animation on a Composition Visual’s property that you wish to be driven by InteractionTracker.