Spring animációk

Ez a cikk bemutatja, hogyan használható a spring NaturalMotionAnimations a WinUI-ban.

Előfeltételek

Feltételezzük, hogy ismeri az alábbi cikkekben tárgyalt fogalmakat:

• Természetes mozgásanimációk

Miért rugók?

A Springs egy közös mozgásélmény, amit mindannyian tapasztaltunk egy bizonyos ponton az életünkben; a slinky játékoktól a fizika tantermi élményekig egy rugós blokkal. A rugó rezgő mozgása gyakran játékos és könnyed érzelmi választ vált ki a megfigyelőkből. Ennek eredményeképpen a rugó mozgása jól alkalmazható az alkalmazás felhasználói felületén azok számára, akik egy látványosabb mozgásélményt szeretnének létrehozni, amely a hagyományos Cubic Beziernél jobban kitűnik a végfelhasználó számára. Ezekben az esetekben a spring motion nem csak élhetőbb mozgásélményt hoz létre, hanem segíthet felhívni a figyelmet az új vagy jelenleg animáló tartalmakra. Az alkalmazás védjegyétől vagy a mozgásnyelvtől függően az oszcilláció hangsúlyosabb és láthatóbb, más esetekben azonban finomabb.

Rugók használata a felhasználói felületen

Ahogy korábban említettük, a springs hasznos mozgás lehet a WinUI-alkalmazásba való integráláshoz, hogy egy nagyon ismerős és játékos felhasználói felületet vezessen be. A rugók gyakori használata a felhasználói felületen a következők:

Tavaszi használati leírás	Példa vizualizációra
A mozgási élmény kiemelkedővé válik és élénkebben néz ki. (Méretezés animálása)
A mozgás élményének finoman energikusabbá tétele (Animating Offset)

Mindegyik esetben a rugós mozgás aktiválható úgy, hogy "rugózik" és oszcillál egy új érték körül, vagy oszcillál a jelenlegi értéke körül némi kezdeti sebességgel.

A rugó mozgásának meghatározása

A NaturalMotionAnimation API-k használatával tavaszi élményt hozhat létre. A SpringNaturalMotionAnimation-t a Compositor Create* metódusainak használatával hozhat létre. Ezután megadhatja a mozgás alábbi tulajdonságait:

• DampingRatio – az animációban használt rugós mozgás csillapításának szintjét fejezi ki.

Csillapítási arány értéke	Leírás
CsillapításiArány = 0	Csillapítatlan – a rugó sokáig fog oszcillálni
0 < Csillapítási arány < 1	Kissedampol – a rugó kicsit és sokat fog rezegni.
DampingRatio = 1	Kritikusan csillapított – a rugó nem végez oszcillációt.
DampingRatio > 1	Túlbélyegzett – a tavasz gyorsan eléri célját hirtelen lassulással és oszcilláció nélkül

• Időszak – az az idő, amely alatt a tavasz egyetlen oszcillációt hajt végre.
• Végleges/kezdő érték – a rugó mozgás kezdő és záró pozíciói (ha nincs meghatározva, a kezdő és/vagy a végső érték az aktuális érték lesz).
• Kezdeti sebesség – programozott kezdeti sebesség a mozgáshoz.

A mozgás olyan tulajdonságkészletét is definiálhatja, amely megegyezik a KeyFrameAnimations tulajdonságával:

• Késleltetési Idő / Késleltetési Viselkedés
• StopBehavior

Az eltolás és a méret/méretezés animálásának gyakori eseteiben a Windows Tervezőcsapata a következő értékeket javasolja a DampingRatio és a Period számára, különböző rugótípusok esetében:

Ingatlan	Normál tavasz	Csillapított rugó	Kevésbé csillapított rugó
Kiegyenlít	Csillapítási arány = 0,8 Időtartam = 50 ms	Csillapítási arány = 0,85 Időtartam = 50 ms	Csillapítási arány = 0,65 Időtartam = 60 ms
Méret / Méretezés	Csillapítási arány = 0,7 Időtartam = 50 ms	Csillapítási arány = 0,8 Időtartam = 50 ms	Csillapítási arány = 0,6 Időköz = 60 ms

Miután meghatározta a tulajdonságokat, beállíthatja a spring NaturalMotionAnimation-t a CompositionObject StartAnimation metódusához vagy az InteractionTracker InertiaModifier Mozgás tulajdonságához.

Example

Ebben a példában egy navigációs és vászonalapú felhasználói felületi felületet hoz létre, amelyben amikor a felhasználó rákattint egy kibontás gombra, a navigációs panelt egy rugós, oszcillációs mozgással animálja a rendszer.

Először adja meg a navigációs ablak megjelenésekor a kattintott eseményen belüli tavaszi animációt. Ezután definiálja az animáció tulajdonságait az InitialValueExpression funkcióval egy Expression használatával a FinalValue meghatározásához. Azt is nyomon követheti, hogy a panel meg van-e nyitva, vagy sem, és ha elkészült, indítsa el az animációt.

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

Mi van, ha ezt a mozgást a bemenethez szeretné kötni? Tehát, ha a végfelhasználó kifelé pöccint, a panelek egy Spring-mozgással jönnek ki? Ami még fontosabb, ha a felhasználó nehezebben vagy gyorsabban pöccint, a mozgás a végfelhasználó sebességétől függően alkalmazkodik.

Ehhez használhatja ugyanazt a Spring Animationt, és átadhatja azt egy InertiaModifier-nek az InteractionTrackerrel. Az InputAnimations és az InteractionTracker használatával kapcsolatos további információkért lásd az InteractionTracker egyéni manipulációs élményeit. Ebben a kód példában feltételezzük, hogy már beállította az InteractionTrackert és a VisualInteractionSource-t. A NaturalMotionAnimation-t - ebben az esetben egy rugót - felhasználva fogjuk létrehozni az InertiaModifiers-t.

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

Most már programozott és bemenetalapú tavaszi animációt is használhat a felhasználói felületén!

Összefoglalva, a spring animation alkalmazásbeli használatának lépései:

1. Hozza létre a SpringAnimationt a Compositorból.
2. Adja meg a SpringAnimation tulajdonságait, ha nem alapértelmezett értékeket szeretne:
   • csillapítási arány
   • Időszak
   • Végső érték
   • Kezdeti érték
   • Kezdeti sebesség
3. Célhoz rendel
   • Ha egy CompositionObject tulajdonságot animál, adja át a SpringAnimation-t paraméterként a StartAnimation-hez.
   • Ha bemenettel szeretné használni, állítsa egy InertiaModifier NaturalMotion tulajdonságát SpringAnimation értékre.