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

이 문서에서는 InteractionTracker를 사용하여 사용자 지정 조작 환경을 만드는 방법을 보여 줍니다.

사전 요구 사항

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

• 입력 기반 애니메이션
• 관계 기반 애니메이션

사용자 지정 조작 환경을 만드는 이유는 무엇인가요?

대부분의 경우 미리 빌드된 조작 컨트롤을 활용하면 UI 환경을 만들 수 있습니다. 그러나 일반적인 컨트롤과 차별화하려면 어떻게 해야 할까요? 입력으로 구동되는 특정 환경을 만들거나 기존 조작 동작으로 충분하지 않은 UI를 사용하려는 경우 어떻게 해야 할까요? 여기서 사용자 지정 환경을 만들 수 있습니다. 이를 통해 앱 개발자와 디자이너는 더 창의적으로 브랜딩 및 사용자 지정 디자인 언어를 더 잘 보여주는 실제 모션 환경을 구현할 수 있습니다. 처음부터 적절한 구성 요소 집합에 대한 액세스 권한을 부여받아 조작 환경을 완전히 사용자 지정할 수 있습니다. 즉, 화면에서 손가락의 움직임에 따라 동작이 어떻게 반응해야 하는지, 스냅 포인트 설정 및 입력 체인을 완전히 조정할 수 있습니다.

다음은 사용자 지정 조작 환경을 만들 때의 몇 가지 일반적인 예입니다.

• 사용자 지정 살짝 밀기, 삭제/해제 동작 추가
• 입력 기반 효과(팬 동작 시 콘텐츠가 흐리게 표시됨)
• 맞춤형 조작 동작이 있는 사용자 지정 컨트롤(사용자 지정 ListView, ScrollViewer 등)

InteractionTracker를 사용하는 이유는 무엇인가요?

InteractionTracker는 WinUI 및 Windows 앱 SDK 앱용 Microsoft.UI.Composition.Interactions 네임스페이스에서 사용할 수 있습니다. InteractionTracker를 사용하면 다음을 수행할 수 있습니다.

• 완전한 유연성 – 조작 환경의 모든 측면을 사용자 지정하고 조정할 수 있기를 바랍니다. 특히 입력 중 또는 응답에서 발생하는 정확한 동작입니다. InteractionTracker를 사용하여 사용자 지정 조작 환경을 빌드할 때 필요한 모든 노브를 사용할 수 있습니다.
• 부드러운 성능 - 조작 환경의 과제 중 하나는 성능이 UI 스레드에 종속된다는 것입니다. 이는 UI가 사용 중일 때 모든 조작 환경에 부정적인 영향을 미칠 수 있습니다. InteractionTracker는 60FPS의 독립 스레드에서 작동하는 새 애니메이션 엔진을 활용하도록 빌드되어 부드러운 동작을 초래합니다.

개요: InteractionTracker

사용자 지정 조작 환경을 만들 때 상호 작용하는 두 가지 기본 구성 요소가 있습니다. 먼저 다음 사항에 대해 설명합니다.

• InteractionTracker - 활성 사용자 입력 또는 직접 업데이트 및 애니메이션에 의해 속성이 구동되는 상태 머신을 유지 관리하는 핵심 개체입니다. 그런 다음 CompositionAnimation에 연결하여 사용자 지정 조작 동작을 만들기 위한 것입니다.
• VisualInteractionSource – InteractionTracker로 입력이 전송되는 시기 및 조건 아래를 정의하는 보완 개체입니다. 적중 테스트에 사용되는 CompositionVisual과 다른 입력 구성 속성을 모두 정의합니다.

상태 컴퓨터로서 InteractionTracker의 속성은 다음 중 하나로 구동할 수 있습니다.

• 직접 사용자 상호 작용 – 최종 사용자가 VisualInteractionSource 적중 테스트 지역 내에서 직접 조작하고 있습니다.
• ** 프로그램 속도나 사용자 제스처에 의해 발생하는 관성에 따라 InteractionTracker의 속성은 관성 곡선에 따라 애니메이션 처리됩니다.
• CustomAnimation – InteractionTracker의 속성을 직접 대상으로 하는 사용자 지정 애니메이션

InteractionTracker 상태 컴퓨터

앞에서 설명한 것처럼 InteractionTracker는 각각 다른 4개 상태 중 하나로 전환할 수 있는 4개 상태의 상태 컴퓨터입니다. (InteractionTracker가 이러한 상태 간에 전환하는 방법에 대한 자세한 내용은 InteractionTracker 클래스 설명서를 참조하세요.)

시	설명
Idle	활성, 운전 입력 또는 애니메이션 없음
상호 작용 중	활성 사용자 입력이 검색됨
관성	활성 입력 또는 프로그래밍 속도에서 발생하는 활성 동작
CustomAnimation	사용자 지정 애니메이션으로 인한 활성 동작

InteractionTracker의 상태가 변경되는 각 경우에서 수신 대기할 수 있는 이벤트(또는 콜백)가 생성됩니다. 이러한 이벤트를 수신 대기하려면 IInteractionTrackerOwner 인터페이스를 구현하고 CreateWithOwner 메서드를 사용하여 InteractionTracker 개체를 만들어야 합니다. 다음 다이어그램에서는 다른 이벤트가 트리거될 때도 간략하게 설명합니다.

VisualInteractionSource 사용

InteractionTracker를 입력으로 구동하려면 VIS(VisualInteractionSource)를 연결해야 합니다. VIS는 CompositionVisual을 사용하여 다음을 정의하는 보수 개체로 만들어집니다.

1. 입력이 추적되고 좌표 공간 내부에서 제스처가 감지되는 히트 테스트 영역.
2. 검색 및 라우팅될 입력의 구성에는 다음이 포함됩니다.
   • 감지 가능한 제스처: X 및 Y 위치(가로 및 세로 이동), 배율(핀치 제스처)
   • 관성
   • 레일 및 체인
   • 리디렉션 모드: InteractionTracker로 자동으로 리디렉션되는 입력 데이터

메모

VisualInteractionSource는 시각적 개체의 적중 테스트 위치 및 좌표 공간을 기반으로 만들어지므로 이동 중이거나 위치를 변경하는 시각적 개체를 사용하지 않는 것이 좋습니다.

메모

적중 테스트 지역이 여러 개 있는 경우 동일한 InteractionTracker에서 여러 VisualInteractionSource 인스턴스를 사용할 수 있습니다. 그러나 가장 일반적인 경우는 하나의 VIS만 사용하는 것입니다.

VisualInteractionSource는 다른 형식(터치, PTP, 펜)의 입력 데이터가 InteractionTracker로 라우팅되는 경우를 관리합니다. 이 동작은 ManipulationRedirectionMode 속성에 의해 정의됩니다. 기본적으로 모든 포인터 입력은 UI 스레드로 전송되고 정밀 터치 패드 입력은 VisualInteractionSource 및 InteractionTracker로 이동합니다.

따라서 터치 및 펜(크리에이터스 업데이트)을 VisualInteractionSource 및 InteractionTracker를 통해 조작하도록 하려면 VisualInteractionSource.TryRedirectForManipulation 메서드를 호출해야 합니다. XAML 앱의 아래 짧은 코드 조각에서 맨 위 UIElement Grid에서 터치 누름 이벤트가 발생할 때 메서드가 호출됩니다.

private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
    {
        _source.TryRedirectForManipulation(e.GetCurrentPoint(root));
    }
}

ExpressionAnimations와 연결

InteractionTracker를 사용하여 조작 환경을 구동할 때는 주로 Scale 및 Position 속성과 상호 작용합니다. 다른 CompositionObject 속성과 마찬가지로 이러한 속성은 CompositionAnimation의 대상으로 사용될 수 있으며, 특히 ExpressionAnimations에서 참조됩니다.

식 내에서 InteractionTracker를 사용하려면 아래 예제와 같이 추적기 위치(또는 Scale) 속성을 참조합니다. InteractionTracker의 속성은 앞에서 설명한 조건 중 하나로 인해 수정되므로 식의 출력도 변경됩니다.

// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);

// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;

메모

식에서 InteractionTracker의 위치를 참조하는 경우 결과 식의 값을 부정하여 올바른 방향으로 이동해야 합니다. 이는 InteractionTracker가 그래프의 원점에서 진행하면서 원점과의 거리와 같은 "실제" 좌표에서 InteractionTracker의 진행 상황을 생각할 수 있기 때문입니다.

Get Started

InteractionTracker를 사용하여 사용자 지정 조작 환경을 만들려면 다음을 수행합니다.

1. InteractionTracker.Create 또는 InteractionTracker.CreateWithOwner를 사용하여 InteractionTracker 개체를 만듭니다.
   • CreateWithOwner를 사용하는 경우 IInteractionTrackerOwner 인터페이스를 구현해야 합니다.
2. 새로 만든 InteractionTracker의 최소 및 최대 위치를 설정합니다.
3. CompositionVisual을 사용하여 VisualInteractionSource를 만듭니다.
   • 전달하는 비주얼의 크기가 0이 아닌지 확인하세요. 그렇지 않으면 적중 테스트가 제대로 되지 않습니다.
4. VisualInteractionSource의 속성을 설정합니다.
   • 시각적 상호작용 소스 재지정 모드
   • PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
   • 레일 및 체인
5. InteractionTracker.InteractionSources.Add를 사용하여 InteractionTracker에 VisualInteractionSource를 추가합니다.
6. 터치 및 펜 입력이 감지되는 경우 TryRedirectForManipulation을 설정합니다.
   • XAML의 경우 일반적으로 UIElement의 PointerPressed 이벤트에서 수행됩니다.
7. InteractionTracker의 위치를 참조하고 CompositionObject의 속성을 대상으로 하는 ExpressionAnimation을 만듭니다.

다음은 작동 중인 #1 – 5를 보여 주는 간단한 코드 조각입니다.

private void InteractionTrackerSetup(Compositor compositor, Visual hitTestRoot)
{ 
    // #1 Create InteractionTracker object
    var tracker = InteractionTracker.Create(compositor);

    // #2 Set Min and Max positions
    tracker.MinPosition = new Vector3(-1000f);
    tracker.MaxPosition = new Vector3(1000f);

    // #3 Setup the VisualInteractionSource
    var source = VisualInteractionSource.Create(hitTestRoot);

    // #4 Set the properties for the VisualInteractionSource
    source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    source.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
    source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

    // #5 Add the VisualInteractionSource to InteractionTracker
    tracker.InteractionSources.Add(source);
}

InteractionTracker의 고급 사용은 다음 문서를 참조하세요.

• InertiaModifiers를 사용하여 스냅 포인트 만들기
• SourceModifiers를 사용하여 풀 투 새로 고침