봄 애니메이션

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

필수 조건

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

• 자연스러운 동작 애니메이션

왜 스프링?

스프링스는 우리 모두가 삶의 어느 시점에서 경험한 일반적인 동작 경험입니다. 반짝이는 장난감에서부터 스프링으로 묶인 블록이 있는 물리학 교실 경험에 이르기까지 다양합니다. 스프링의 진동 운동은 그것을 관찰하는 사람들에게 종종 장난스럽고 가벼운 감정적 반응을 불러일으킵니다. 결과적으로 스프링의 동작은 전통적인 큐빅 베지어보다 최종 사용자에게 더 생동감 있고 '팝'하는 모션 경험을 제공하기를 원하는 사람들을 위한 애플리케이션 UI에 잘 적용됩니다. 이러한 경우 스프링 모션은 더 활기찬 모션 환경을 만들 뿐만 아니라 신규 또는 현재 애니메이션 콘텐츠에 주의를 끌 수 있습니다. 애플리케이션 브랜딩 또는 동작 언어에 따라 진동이 더 뚜렷하고 표시되지만, 다른 경우에는 더 미묘합니다.

스프링 애니메이션모션이 있는 , 입방형 베지어 애니메이션 모션

UI에서 스프링 사용

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

Spring 사용 설명	시각적 예제
모션 경험을 톡톡 튀고 더욱 활기차게 만듭니다. 크기 조정 애니메이션
모션 환경을 미묘하게 더 활기차게 만들기(오프셋 애니메이션)

각 경우에서 스프링 동작은 새 값으로 도약하여 그 주위를 진동하거나, 초기 속도로 현재 값 주위를 진동하여 트리거될 수 있습니다.

스프링 동작 정의

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

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

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

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

• DelayTime / 지연 동작
• StopBehavior

오프셋과 크기/사이즈에 애니메이션 효과를 주는 일반적인 경우, 스프링의 종류에 따라 Windows 디자인 팀이 감쇠비와 주기에 대해 권장하는 값은 다음과 같습니다.

속성을 정의한 후에는 Spring 자연 움직임 애니메이션을 CompositionObject의 StartAnimation 메서드 또는 InteractionTracker InertiaModifier의 운동 속성으로 전달할 수 있습니다.

예시

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

클릭 시, Spring 애니메이션

먼저 탐색 창이 나타날 때 클릭한 이벤트 내에서 스프링 애니메이션을 정의합니다. 그런 다음 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 동작으로 나올까요? 더 중요한 것은 사용자가 더 열심히 또는 더 빠르게 살짝 밀면 동작이 최종 사용자의 속도에 따라 조정됩니다.

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

// InteractionTracker and the VisualInteractionSource previously setup
// The open and close ScalarSpringAnimations defined earlier
private void SetupInput()
{
 // Define the InertiaModifier to manage the open motion
 var openMotionModifer = InteractionTrackerInertiaNaturalMotion.Create(compositor);

 // Condition defines to use open animation if panes in non-expanded view
 // Property set value to track if open or closed is managed in other part of code
 openMotionModifer.Condition = _compositor.CreateExpressionAnimation(
"propset.expanded == false");
 openMotionModifer.Condition.SetReferenceParameter("propSet", _propSet);
 openMotionModifer.NaturalMotion = _openSpringAnimation;

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

 // Condition defines to use close animation if panes in expanded view
 // Property set value to track if open or closed is managed in other part of code
 closeMotionModifier.Condition = 
_compositor.CreateExpressionAnimation("propSet.expanded == true");
 closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
 closeMotionModifier.NaturalMotion = _closeSpringAnimation;

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

 // Take output of InteractionTracker and assign 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으로 설정합니다.