Animacje spring

W artykule pokazano, jak używać spring NaturalMotionAnimations.

Wymagania wstępne

W tym miejscu przyjęto założenie, że znasz pojęcia omówione w następujących artykułach:

• Animacje ruchu naturalnego

Dlaczego źródła?

Sprężyny są powszechnym elementem ruchu, który wszyscy spotkaliśmy w pewnym momencie naszego życia; począwszy od zabawek sprężynowych typu slinky po doświadczenia z fizyki w klasie z blokiem na sprężynie. Oscylujący ruch sprężyny często wywołuje zabawną i beztroską reakcję emocjonalną u tych, którzy go obserwują. W rezultacie ruch sprężyny dobrze przekłada się na interfejs użytkownika aplikacji dla tych, którzy chcą stworzyć bardziej dynamiczne doświadczenie ruchu, które bardziej przyciąga uwagę użytkownika końcowego niż tradycyjna krzywa Béziera sześcienna. W takich przypadkach ruch sprężynowy nie tylko ożywia doznania związane z ruchem, ale także może pomóc zwrócić uwagę na nową lub aktualnie animowaną zawartość. W zależności od brandingu aplikacji lub języka ruchu, oscylacja jest bardziej wyraźna i widoczna, ale w innych przypadkach jest bardziej subtelna.

Używanie sprężyn w interfejsie użytkownika

Jak wspomniano wcześniej, sprężyny mogą być przydatnym elementem ruchu do zintegrowania z Twoją aplikacją, aby wprowadzić bardzo znajome i zabawne doświadczenie interfejsu użytkownika. Typowe użycie sprężyn w interfejsie użytkownika to:

Opis użycia spring	Przykład wizualizacji
Tworzenie doświadczenia ruchu, które jest bardziej wyraziste i wygląda bardziej żywo. (Animowanie Skali)
Animowanie doświadczania ruchu, by subtelnie czuło się bardziej energiczne (Animating Offset)

W każdym z tych przypadków ruch sprężynowy może być wyzwalany przez "skok do" nowej wartości i oscylowanie wokół niej lub oscylowanie wokół bieżącej wartości z pewną prędkością początkową.

Definiowanie ruchu sprężynowego

Możesz stworzyć wrażenie wiosny, korzystając z interfejsu API NaturalMotionAnimation. W szczególności tworzysz animację SpringNaturalMotionAnimation, używając metod Create* z kompozytora. Następnie można zdefiniować następujące właściwości ruchu:

• Stopień tłumienia: wyraża poziom tłumienia ruchu sprężynowego używanego w animacji.

• Okres — czas potrzebny sprężynie do wykonania pojedynczej oscylacji.
• Wartość końcowa/początkowa — zdefiniowana pozycja początkowa i końcowa ruchu sprężynowego (jeśli nie jest zdefiniowana, wartość początkowa i/lub końcowa będzie bieżącą wartością).
• Prędkość początkowa — programowa prędkość początkowa ruchu.

Można również zdefiniować zestaw właściwości ruchu, które są takie same jak KeyFrameAnimations:

• DelayTime / Zachowanie opóźnienia
• StopBehavior

W typowych przypadkach animacji przesunięcia i skali/rozmiaru, zespół wzornictwa systemu Windows zaleca następujące wartości dla współczynnika tłumienia i okresu dla różnych typów sprężyn:

Po zdefiniowaniu właściwości można następnie przekazać swoją animację NaturalMotionAnimation o sprężynowej dynamice do metody StartAnimation obiektu CompositionObject lub właściwości Motion elementu InertiaModifier w obiekcie InteractionTracker.

Przykład

W tym przykładzie utworzysz środowisko nawigacji i interfejsu użytkownika kanwy, w którym gdy użytkownik kliknie przycisk rozwijania, okienko nawigacji jest animowane ze sprężynowym, oscylacyjnym ruchem.

Zacznij od zdefiniowania animacji sprężyny w ramach klikniętego zdarzenia dla momentu wyświetlenia okienka nawigacji. Następnie zdefiniujesz właściwości animacji przy użyciu funkcji InitialValueExpression, aby użyć wyrażenia do zdefiniowania wartości FinalValue. Możesz również śledzić, czy okienko jest otwarte, czy nie, i, gdy wszystko będzie gotowe, uruchom animację.

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);
}

Teraz co zrobić, jeśli chcesz powiązać ten ruch z danymi wejściowymi? Więc jeśli użytkownik końcowy przesuwa palcem w górę, okienka wychodzą z ruchem Spring? Co ważniejsze, jeżeli użytkownik przesunie szybciej lub z większą siłą, ruch dostosowuje się do prędkości użytkownika.

animacja wiosenna

W tym celu możesz pobrać tę samą animację Spring i przekazać ją do modułu InertiaModifier z elementem InteractionTracker. Aby uzyskać więcej informacji na temat funkcji InputAnimations i InteractionTracker, zobacz Niestandardowe doświadczenia manipulacji za pomocą InteractionTracker. Załóżmy, że w tym przykładzie kodu skonfigurowaliśmy już usługę InteractionTracker i VisualInteractionSource. Skupimy się na tworzeniu modułów InertiaModifiers, które wezmą udział w NaturalMotionAnimation, w tym przypadku wiosną.

// 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);
}

Teraz masz zarówno programową, jak i opartą na danych wejściowych animację sprężynową w interfejsie użytkownika!

Podsumowując, kroki używania animacji spring w aplikacji:

1. Utwórz aplikację SpringAnimation poza kompositorem.
2. Zdefiniuj właściwości aplikacji SpringAnimation, jeśli chcesz, aby wartości inne niż domyślne:
   • Współczynnik tłumienia
   • Okres
   • Wartość końcowa
   • Wartość początkowa
   • Prędkość początkowa
3. Przypisz do elementu docelowego.
   • Jeśli animujesz właściwość CompositionObject, przekaż SpringAnimation jako parametr do StartAnimation.
   • Jeśli chcesz używać z danymi wejściowymi, ustaw właściwość NaturalMotion obiektu InertiaModifier na SpringAnimation.