Jarní animace

Tento článek ukazuje, jak používat spring NaturalMotionAnimations ve WinUI.

Předpoklady

Tady předpokládáme, že znáte koncepty, které jsou popsány v těchto článcích:

• Animace přirozeného pohybu

Proč prameny?

Pružiny jsou běžným pohybovým jevem, se kterým jsme se všichni setkali v nějakém okamžiku svého života; od hraček jako slinky až po zkušenosti ve fyzikálních učebnách s blokem přivázaným pružinou. Oscilující pohyb pružiny často vyvolává hravou a lehkou emocionální reakci od těch, kteří ji sledují. V důsledku toho se pohyb pružiny dobře hodí pro uživatelské rozhraní aplikace pro ty, kteří chtějí vytvořit dynamičtější pohybový dojem, který "vyskočí" více na koncového uživatele než tradiční kubická Bezierova křivka. V těchto případech spring motion nejen vytváří živé prostředí pohybu, ale také může pomoci upoutat pozornost na nový nebo aktuálně animující obsah. V závislosti na značce aplikace nebo pohybovém jazyce je oscilace výraznější a viditelná, ale v jiných případech je to jemnější.

Použití pružin v uživatelském rozhraní

Jak už jsme zmínili dříve, pružiny mohou být užitečným prvkem pro integraci do vaší aplikace WinUI pro docílení velmi známého a hravého uživatelského rozhraní. Mezi běžné použití pružin v uživatelském rozhraní patří:

Popis využití springu	Vizuální příklad
Vytvoření pohybového zážitku, který více vynikne a působí živěji. Animace měřítka
Zvýšení energetického pocitu pohybového zážitku jemným způsobem (animování posunu)

V každém z těchto případů lze pohyb pružiny vyvolat buď skokem na novou hodnotu a oscilací kolem ní, nebo oscilací kolem své aktuální hodnoty s určitou počáteční rychlostí.

Definování pohybu pružiny

Vytvoříte pružinový zážitek pomocí rozhraní NaturalMotionAnimation API. Konkrétně vytvoříte SpringNaturalMotionAnimation pomocí metod Create* z compositoru. Pak můžete definovat následující vlastnosti pohybu:

• TlumeníRatio – vyjadřuje úroveň tlumení pružinového pohybu použitého v animaci.

Hodnota poměru tlumení	Description
Poměr tlumení = 0	Neztlumené – pružina bude oscilovat po dlouhou dobu
0 < Koeficient tlumení < 1	Nedostatečně tlumená – pružina bude oscilovat v rozmezí od malé po velkou amplitudu.
Poměr útlumu = 1	Kriticky navlhčeno – pružina nebude provádět žádné oscilace.
PoměrTlumení > 1	Přetlumený – pružina se rychle dostane do cíle s náhlou decelerací a bez oscilace

• Období – doba trvání pružiny k provedení jediného oscilace.
• Konečná /počáteční hodnota – definovaná počáteční a koncová pozice pružinového pohybu (pokud není definována, počáteční hodnota a/nebo konečná hodnota bude aktuální).
• Počáteční rychlost – programová počáteční rychlost pohybu.

Můžete také definovat sadu vlastností pohybu, které jsou stejné jako KeyFrameAnimations:

• Čas zpoždění / Chování při zpoždění
• StopBehavior

V běžných případech animace offsetu a měřítka/velikosti jsou následující hodnoty doporučeny týmem návrhu systému Windows pro DampingRatio a periodu u různých typů pružin:

Vlastnictví	Normální pružina	Tlumená pružina	Méně tlumená pružina
Posun	Poměr tlumení = 0,8 Období = 50 ms	Poměr tlumení = 0,85 Období = 50 ms	Poměr tlumení = 0,65 Období = 60 ms
Měřítko/velikost	Poměr tlumení = 0,7 Období = 50 ms	Poměr tlumení = 0,8 Období = 50 ms	Poměr tlumení = 0,6 Období = 60 ms

Jakmile nadefinujete vlastnosti, můžete poté předat animaci přirozeného pohybu pomocí pružiny do metody StartAnimation objektu CompositionObject nebo vlastnosti Motion modifikátoru Inertia při sledování interakce (InteractionTracker).

Příklad

V tomto příkladu vytvoříte prostředí navigace a uživatelského rozhraní, ve kterém, když uživatel klikne na tlačítko pro rozbalení, navigační podokno se rozbalí s pružným, oscilujícím pohybem.

Začněte tím, že definujete animaci pružiny v rámci události, na kterou kliknete, když se zobrazí navigační podokno. Pak definujete vlastnosti animace pomocí funkce InitialValueExpression, abyste definovali závěrečnou hodnotu pomocí výrazu. Můžete také sledovat, jestli je podokno otevřené nebo ne, a až budete připraveni, spusťte animaci.

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

Co kdybyste chtěli svázat tento pohyb se vstupem? Takže pokud koncový uživatel potáhne prstem ven, podokna přicházejí s pružinovým pohybem? Důležitější je, že pokud uživatel potáhne prstem silněji nebo rychleji, pohyb se přizpůsobí na základě rychlosti od koncového uživatele.

Uděláte to tak, že vezmete stejnou animaci Spring a předáte ji do inertiaModifieru pomocí InteractionTrackeru. Další informace o InputAnimations a InteractionTracker naleznete v tématu Vlastní manipulace s InteractionTracker. V tomto příkladu kódu předpokládáme, že jste už nastavili InteractionTracker a VisualInteractionSource. Zaměříme se na vytvoření modifikátorů setrvačnosti, které zpracovávají animaci přirozeného pohybu, v tomto případě pružiny.

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

Teď máte v uživatelském rozhraní programovou i vstupně řízenou animaci spring!

Stručně řečeno, postup použití jarní animace v aplikaci:

1. Vytvořte SpringAnimation z vašeho compositoru.
2. Definujte vlastnosti SpringAnimation, pokud chcete jiné než výchozí hodnoty:
   • Poměr tlumení
   • Období
   • Konečná hodnota
   • Počáteční hodnota
   • Počáteční rychlost
3. Přiřaďte cíl.
   • Pokud animujete vlastnost CompositionObject, předejte SpringAnimation jako parametr StartAnimation.
   • Chcete-li použít s vstupem, nastavte vlastnost NaturalMotion modifikátoru Inertia na SpringAnimation.