입력 기반 애니메이션

이 문서에서는 WinUI 및 Windows 앱 SDK 앱의 InputAnimation API를 소개하고 UI에서 이러한 유형의 애니메이션을 사용하는 방법을 권장합니다.

사전 요구 사항

여기서는 다음 문서에서 설명하는 개념을 잘 알고 있다고 가정합니다.

• 관계 기반 애니메이션

사용자 상호 작용에서 구동되는 부드러운 동작

Fluent 디자인 언어에서 최종 사용자와 앱 간의 상호 작용이 가장 중요합니다. 앱은 적절하게 보이는 것뿐만 아니라, 사용자와의 상호작용에 자연스럽고 동적으로 응답해야 합니다. 즉, 화면에 손가락을 놓으면 UI는 입력 변화에 매끄럽고 자연스럽게 반응해야 합니다. 스크롤은 부드럽게 움직이며 화면을 가로지르는 손가락을 따라야 합니다.

사용자 입력에 동적으로 유동적으로 응답하는 UI를 빌드하면 사용자 참여가 높아집니다. 이제 동작은 멋지게 보일 뿐만 아니라 사용자가 다른 UI 환경과 상호 작용할 때 좋은 느낌과 자연스러운 느낌을 줍니다. 이렇게 하면 최종 사용자가 애플리케이션에 더 쉽게 연결할 수 있으므로 더 기억에 남고 즐거운 경험을 할 수 있습니다.

터치 기능을 넘어 확장

터치는 최종 사용자가 UI 콘텐츠를 조작하는 데 사용하는 보다 일반적인 인터페이스 중 하나이지만 마우스 및 펜과 같은 다양한 다른 입력 형식도 사용합니다. 이러한 경우 최종 사용자는 사용하려는 입력 형식에 관계없이 UI가 입력에 동적으로 응답한다는 것을 인식하는 것이 중요합니다. 입력 기반 동작 환경을 디자인할 때 다양한 입력 형식을 인식해야 합니다.

다양한 Input-Driven 동작 경험

InputAnimation 공간은 동적으로 응답하는 동작을 만들 수 있는 여러 가지 환경을 제공합니다. Windows 앱 SDK 컴퍼지션 애니메이션 시스템의 나머지 부분과 마찬가지로 이러한 입력 기반 애니메이션은 독립적인 스레드에서 작동하므로 동적 동작 환경에 도움이 됩니다. 그러나 환경이 기존 XAML 컨트롤 및 구성 요소를 활용하는 경우 이러한 환경의 일부는 여전히 UI 스레드에 바인딩됩니다.

동적 입력 기반 동작 애니메이션을 빌드할 때 만드는 세 가지 핵심 환경이 있습니다.

1. 기존 ScrollView 환경 향상 – XAML ScrollViewer의 위치를 사용하여 동적 애니메이션 환경을 구동할 수 있습니다.
2. 포인터 위치 기반 경험 – 대상이 된 UIElement에서 커서의 위치를 활용하여 동적 애니메이션 경험을 구동합니다.
3. InteractionTracker를 사용한 사용자 지정 조작 환경 – InteractionTracker를 사용하여 완전히 사용자 지정된 오프 스레드 조작 환경을 만듭니다(예: 스크롤/확대/축소 캔버스).

기존 ScrollViewer 환경 향상

보다 동적 환경을 만드는 일반적인 방법 중 하나는 기존 XAML ScrollViewer 컨트롤을 기반으로 빌드하는 것입니다. 이러한 상황에서는 ScrollViewer의 스크롤 위치를 활용하여 간단한 스크롤 환경을 보다 동적으로 만드는 추가 UI 구성 요소를 만듭니다. 일부 예로는 고정/숨김 헤더 및 패럴랙스 효과가 있습니다.

이러한 유형의 환경을 만들 때 따라야 할 일반적인 수식이 있습니다.

1. 애니메이션을 구동하려는 XAML ScrollViewer에서 ScrollManipulationPropertySet에 액세스합니다.
   • ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement 요소) API를 통해 완료
   • Translation이라는 속성이 포함된 CompositionPropertySet을 반환합니다.
2. Translation 속성을 참조하는 수식을 사용하여 Composition ExpressionAnimation을 만듭니다.
3. CompositionObject의 속성에서 애니메이션을 시작합니다.

이러한 환경을 빌드하는 방법에 대한 자세한 내용은 기존 ScrollViewer 환경 향상을 참조하세요.

포인터 위치 기반 사용자 경험

입력과 관련된 또 다른 일반적인 동적 환경은 마우스 커서와 같은 포인터의 위치에 따라 애니메이션을 구동하는 것입니다. 이러한 상황에서 개발자는 스포트라이트 표시와 같은 환경을 만들 수 있도록 하는 XAML UIElement 내에서 적중이 테스트될 때 커서의 위치를 활용합니다.

이러한 유형의 환경을 만들 때 따라야 할 일반적인 수식이 있습니다.

1. 적중 테스트를 수행할 때 커서 위치를 알고자 하는 XAML UIElement에서 PointerPositionPropertySet에 액세스합니다.
   • ElementCompositionPreview.GetPointerPositionPropertySet(UIElement 요소) API를 통해 완료
   • Position이라는 속성이 포함된 CompositionPropertySet을 반환합니다.
2. Position 속성을 참조하는 수식을 사용하여 CompositionExpressionAnimation을 만듭니다.
3. CompositionObject의 속성에서 애니메이션을 시작합니다.

InteractionTracker를 사용하는 사용자 지정 조작 환경

XAML ScrollViewer를 활용하는 경우의 과제 중 하나는 UI 스레드에 바인딩된다는 것입니다. 따라서 UI 스레드가 바빠지면 스크롤 및 확대/축소 환경에서 종종 지연과 흔들림이 발생하여 사용자 경험이 매력적이지 않을 수 있습니다. 또한 ScrollViewer 환경의 여러 측면을 사용자 지정할 수 없습니다. InteractionTracker는 독립 스레드에서 실행되는 사용자 지정 조작 환경을 만들기 위한 구성 요소 집합을 제공하여 두 문제를 모두 해결하기 위해 만들어졌습니다.

InteractionTracker를 사용하여 환경을 만들 때 따라야 할 일반적인 수식이 있습니다.

1. InteractionTracker 개체를 만들고 해당 속성을 정의합니다.
2. InteractionTracker에서 사용할 입력을 캡처해야 하는 CompositionVisual에 대한 VisualInteractionSources를 만듭니다.
3. InteractionTracker의 Position 속성을 참조하는 수식을 사용하여 Composition ExpressionAnimation을 만듭니다.
4. InteractionTracker에서 구동하려는 컴퍼지션 비주얼의 속성에서 애니메이션을 시작하세요.