스프링 애니메이션

이 문서에서는 WinUI에서 Spring NaturalMotionAnimations를 사용하는 방법을 보여 줍니다.

사전 요구 사항

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

• 자연 동작 애니메이션

왜 스프링인가요?

스프링스는 우리 모두가 삶의 어느 시점에서 경험한 일반적인 동작 경험입니다. 반짝이는 장난감에서부터 스프링으로 묶인 블록이 있는 물리학 교실 경험에 이르기까지 다양합니다. 봄의 진동 동작은 종종 그것을 관찰하는 사람들로부터 장난스럽고 가벼운 감정적 반응을 유발합니다. 결과적으로 스프링의 움직임은 애플리케이션 UI에서 보다 역동적인 경험을 제공하는 데 적합하며, 전통적인 Cubic Bezier보다 최종 사용자에게 더욱 눈에 띄고 활기 넘치는 모션을 연출하려는 사람들에게 잘 맞는 변환입니다. 이러한 경우 스프링 모션은 더 활기찬 모션 환경을 만들 뿐만 아니라 신규 또는 현재 애니메이션 콘텐츠에 주의를 끌 수 있습니다. 애플리케이션 브랜딩 또는 동작 언어에 따라 진동이 더 뚜렷하고 표시되지만, 다른 경우에는 더 미묘합니다.

UI에서 스프링 사용

앞에서 설명한 것처럼 스프링은 WinUI 앱에 통합하여 매우 친숙하고 재미있는 UI 환경을 소개하는 데 유용한 동작이 될 수 있습니다. UI에서 스프링의 일반적인 사용은 다음과 같습니다.

Spring 사용 설명	시각적 예제
모션 경험을 더 생동감 있고 활기 있게 만듭니다. (배율 애니메이션)
모션 경험을 조금 더 활기차게 만들기(오프셋 애니메이션)

이러한 각 경우에서 스프링 동작은 새 값으로 튀어나가고 그 주위로 진동하거나, 초기 속도로 현재 값 주위를 진동하여 발생할 수 있습니다.

스프링 동작 정의

NaturalMotionAnimation API를 사용하여 스프링 환경을 만듭니다. 특히 Compositor에서 Create* 메서드를 사용하여 SpringNaturalMotionAnimation을 만듭니다. 그런 다음 동작의 다음 속성을 정의할 수 있습니다.

• DampingRatio – 애니메이션에 사용되는 스프링 모션의 감쇠 수준을 표현합니다.

감쇠 비율 값	설명
DampingRatio = 0	저항이 없는 상태 – 스프링이 오랫동안 진동합니다.
0 < 감쇠비 < 1	언더댐프 - 스프링은 약간에서 크게 진동할 수 있습니다.
DampingRatio = 1	심각한 감쇠 – 스프링은 진동을 수행하지 않습니다.
DampingRatio > 1	오버댐핑된 스프링은 진동 없이 갑작스러운 감속으로 빠르게 목표 지점에 도달합니다.

• 기간 – 스프링이 단일 진동을 수행하는 데 걸리는 시간입니다.
• 최종/시작 값 – 스프링 동작의 시작 및 끝 위치가 정의됩니다(정의되지 않은 경우 시작 값 및/또는 최종 값은 현재 값이 됩니다).
• 초기 속도 – 동작에 대한 프로그래밍 방식의 초기 속도입니다.

KeyFrameAnimations와 동일한 동작의 속성 집합을 정의할 수도 있습니다.

• DelayTime/지연 동작
• StopBehavior

오프셋 및 크기/크기에 애니메이션 효과를 주는 일반적인 경우, 다양한 유형의 스프링에 대해 DampingRatio 및 Period에 대한 Windows 디자인 팀에서 권장하는 값은 다음과 같습니다.

재산	보통 봄	감쇠된 스프링	감쇠가 적은 스프링
상쇄	감쇠 비율 = 0.8 기간 = 50ms	감쇠 비율 = 0.85 기간 = 50ms	감쇠 비율 = 0.65 기간 = 60ms
확대/축소/크기	감쇠 비율 = 0.7 기간 = 50ms	감쇠 비율 = 0.8 기간 = 50ms	감쇠 비율 = 0.6 기간 = 60ms

속성을 정의한 후에는 Spring NaturalMotionAnimation을 CompositionObject의 StartAnimation 메서드 또는 InteractionTracker InertiaModifier의 동작 속성으로 전달할 수 있습니다.

예시

이 예제에서는 사용자가 확장 단추를 클릭하면 탐색 창이 탄력적이고 진동 동작으로 애니메이션 효과를 주는 탐색 및 캔버스 UI 환경을 만듭니다.

먼저 탐색 창이 나타날 때 클릭한 이벤트 내에서 스프링 애니메이션을 정의합니다. 그런 다음 InitialValueExpression 기능을 사용하여 식을 사용하여 FinalValue를 정의하여 애니메이션의 속성을 정의합니다. 또한 창이 열려 있는지 여부를 추적하고 준비가 되면 애니메이션을 시작합니다.

private void Button_Clicked(object sender, RoutedEventArgs e)
{
    _springAnimation = _compositor.CreateSpringScalarAnimation();
    _springAnimation.DampingRatio = 0.75f;
    _springAnimation.Period = TimeSpan.FromSeconds(0.5);

    if (!_expanded)
    {
        _expanded = true;
        _propSet.InsertBoolean("expanded", true);
        _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue + 250";
    }
    else
    {
        _expanded = false;
        _propSet.InsertBoolean("expanded", false);
        _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue - 250";
    }

    _naviPane.StartAnimation("Offset.X", _springAnimation);
}

이 동작을 입력에 연결하려면 어떻게 해야 할까요? 그렇다면 최종 사용자가 살짝 밀면 패널이 스프링 동작으로 튀어나올까요? 더 중요한 것은 사용자가 더 열심히 또는 더 빠르게 살짝 밀면 동작이 최종 사용자의 속도에 따라 조정됩니다.

이렇게 하려면 동일한 Spring 애니메이션을 가져와 InteractionTracker를 사용하여 InertiaModifier에 전달할 수 있습니다. InputAnimations 및 InteractionTracker에 대한 자세한 내용은 InteractionTracker를 사용한 사용자 지정 조작 환경을 참조하세요. 이 코드 예제에서는 InteractionTracker 및 VisualInteractionSource를 이미 설정했습니다. 이 경우 NaturalMotionAnimation의 일환으로 스프링을 입력으로 받을 InertiaModifiers를 만드는 데 집중하겠습니다.

// InteractionTracker and the VisualInteractionSource were previously set up.
// The open and close ScalarSpringAnimations were defined earlier.
private void SetupInput()
{
    // Define the InertiaModifier to manage the open motion.
    var openMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the open animation if the pane is not expanded.
    openMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == false");
    openMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    openMotionModifier.NaturalMotion = _openSpringAnimation;

    // Define the InertiaModifier to manage the close motion.
    var closeMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the close animation if the pane is expanded.
    closeMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == true");
    closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    closeMotionModifier.NaturalMotion = _closeSpringAnimation;

    _tracker.ConfigurePositionXInertiaModifiers(new InteractionTrackerInertiaNaturalMotion[]
    {
        openMotionModifier,
        closeMotionModifier,
    });

    // Take the InteractionTracker output and assign it to the pane.
    var exp = _compositor.CreateExpressionAnimation("-tracker.Position.X");
    exp.SetReferenceParameter("tracker", _tracker);

    ElementCompositionPreview.GetElementVisual(pageNavigation)
        .StartAnimation("Translation.X", exp);
}

이제 UI에 프로그래밍 방식 및 입력 기반 스프링 애니메이션이 모두 있습니다.

요약하면 앱에서 Spring 애니메이션을 사용하는 단계는 다음과 같습니다.

1. Compositor에서 SpringAnimation을 만듭니다.
2. 기본값이 아닌 값을 원하는 경우 SpringAnimation의 속성을 정의합니다.
   • 감쇠비
   • 기간
   • 최종 값
   • 초기 값
   • 초기 속도
3. 대상에 할당합니다.
   • CompositionObject 속성에 애니메이션 효과를 주는 경우 SpringAnimation을 StartAnimation에 매개 변수로 전달합니다.
   • 입력과 함께 사용하려면 InertiaModifier의 NaturalMotion 속성을 SpringAnimation으로 설정합니다.