Animacje spring

W tym artykule pokazano, jak używać spring NaturalMotionAnimations w systemie WinUI.

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 doświadczeniem ruchu, z którym wszyscy mieliśmy do czynienia w pewnym momencie w naszym życiu; począwszy od zabawki slinky do doświadczenia w klasie fizyki z przymocowanym sprężyną blokiem. 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 żywe wrażenia wizualne, które bardziej przyciągają uwagę użytkownika końcowego niż tradycyjna krzywa sześcienna Béziera. W takich przypadkach ruch sprężynowy nie tylko tworzy bardziej żywą dynamikę ruchu, 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 widoczna i wyraźna, ale w innych przypadkach jest bardziej subtelna.

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

Jak wspomniano wcześniej, sprężyny mogą być przydatną animacją do zintegrowania z aplikacją WinUI, aby stworzyć znane i interaktywne 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 "pop" i sprawienie, że wygląda na bardziej żywe. (Animacja skali)
Subtelne wzmacnianie odczuwalnego doświadczenia ruchu (Animating Offset)

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

Definiowanie ruchu sprężynowego

Możesz stworzyć efekty typu spring, używając API NaturalMotionAnimation. W szczególności utworzysz metodę SpringNaturalMotionAnimation przy użyciu metod Create* poza kompositorem. Następnie można zdefiniować następujące właściwości ruchu:

• Współczynnik tłumienia – wyraża poziom tłumienia ruchu sprężyny stosowanego w animacji.

Wartość współczynnika tłumienia	Opis
WspółczynnikTłumienia = 0	Niestłumiony – sprężyna będzie oscylować przez długi czas
0 < WspółczynnikTłumienia < 1	Niedotłumiona – sprężyna będzie oscylować od trochę do dużo.
Współczynnik tłumienia = 1	Krytycznie tłumione - sprężyna nie będzie wykonywać żadnych oscylacji.
Współczynnik tłumienia > 1	Nadkrytyczne tłumienie – sprężyna szybko osiągnie miejsce docelowe przy gwałtownym spowolnieniu i bez oscylacji

• Okres – czas potrzebny na wykonanie przez sprężynę 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 animowania przesunięcia i skali/rozmiaru następujące wartości są zalecane przez zespół projektowy Windows dla współczynnika tłumienia i okresu dla różnych wersji sprężyn:

Majątek	Sprężyna normalna	Stłumiona sprężyna	Mniej tłumiona sprężyna
Przesunięcie	Współczynnik tłumienia = 0,8 Okres = 50 ms	Współczynnik tłumienia = 0,85 Okres = 50 ms	Współczynnik tłumienia = 0,65 Czas trwania = 60 ms
Skalowanie/rozmiar	Współczynnik tłumienia = 0,7 Okres = 50 ms	Współczynnik tłumienia = 0,8 Okres = 50 ms	Współczynnik tłumienia = 0,6 Czas trwania = 60 milisekund

Po zdefiniowaniu właściwości można następnie przekazać Spring NaturalMotionAnimation do metody StartAnimation obiektu CompositionObject lub właściwości Motion elementu InertiaModifier dla InteractionTracker.

Przykład

W tym przykładzie utworzysz doświadczenie nawigacji i interfejsu użytkownika typu kanwa, w którym, gdy użytkownik kliknie przycisk rozwijania, okienko nawigacji jest rozsuwane z sprężynującym, 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 bok, okienka wychodzą z ruchem sprężynowym? Co ważniejsze, jeśli użytkownik przesuwa się mocniej lub szybciej, ruch dostosowuje się na podstawie prędkości użytkownika końcowego.

W tym celu możesz użyć tę samą animację Spring i przekazać ją do InertiaModifier z wykorzystaniem InteractionTracker. Aby uzyskać więcej informacji na temat InputAnimations oraz InteractionTracker, zobacz Niestandardowe doświadczenia manipulacji z uzyciem elementu 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 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);
}

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
   • Period
   • Wartość końcowa
   • Wartość początkowa
   • Prędkość początkowa
3. Przypisz do elementu docelowego.
   • Jeśli animujesz właściwość CompositionObject, przekaż typ SpringAnimation jako parametr do funkcji StartAnimation.
   • Jeśli chcesz użyć z danymi wejściowymi, ustaw właściwość NaturalMotion inertiaModifier na SpringAnimation.