Lenteanimaties

In dit artikel wordt beschreven hoe u spring NaturalMotionAnimations gebruikt in WinUI.

Vereiste voorwaarden

Hier gaan we ervan uit dat u bekend bent met de concepten die in deze artikelen worden besproken:

• Animaties in natuurlijke beweging

Waarom veren?

Springs zijn een gemeenschappelijke bewegingservaring die we allemaal op een bepaald moment in ons leven hebben ervaren; variërend van slinky speelgoed tot fysica leservaringen met een spring-gebonden blok. De oscillerende beweging van een veer wekt vaak een speelse en lichthartige emotionele reactie op bij degenen die het observeren. Daardoor vertaalt de beweging van een veer zich goed naar de gebruikersinterface van applicaties voor degenen die een levendigere bewegingservaring willen creëren die meer opvalt voor de eindgebruiker dan een traditionele Cubic Bezier. In deze gevallen creëert vloeistofbeweging niet alleen een levendigere bewegingservaring, maar kan ook helpen om de aandacht te vestigen op nieuwe of momenteel geanimeerde inhoud. Afhankelijk van de huisstijl of bewegingstaal van de toepassing, is de oscillatie duidelijker en zichtbaar, maar in andere gevallen is het subtieler.

Veren gebruiken in uw gebruikersinterface

Zoals eerder vermeld, kan veerbewegingen een nuttige beweging zijn om te integreren in uw WinUI-app om een erg vertrouwde en speelse gebruikersinterface-ervaring te introduceren. In de gebruikersinterface is veelvoorkomend gebruik van 'springs':

Beschrijving van Spring-gebruik	Visueel voorbeeld
Het laten sprankelen van een bewegingsbeleving en er levendiger uitzien. Schaal Animeren
Het subtiel energieker maken van een bewegingservaring (Animatie-verschuiving)

In elk van deze gevallen kan de veerbeweging worden geactiveerd door 'springen naar' en rond een nieuwe waarde te draaien of rond de huidige waarde te draaien met een bepaalde initiële snelheid.

Uw springbeweging definiëren

U maakt een springervaring met behulp van de NaturalMotionAnimation-API's. U maakt met name een SpringNaturalMotionAnimation met behulp van de methoden Create* van de Compositor. Vervolgens kunt u de volgende eigenschappen van de beweging definiëren:

• DampingRatio – geeft het dempingsniveau weer van de veerbeweging die in de animatie wordt gebruikt.

Verhoudingswaarde voor demping	Beschrijving
DempingRatio = 0	Ondempte – de veer zal lange tijd oscilleren
0 < Dempingsverhouding < 1	Onderverdampt – de lente zal van een beetje tot veel oscilleren.
DampingRatio = 1	Kritisch gedempt – de veer zal niet oscilleren.
Dempingverhouding > 1	Overdampt – de lente zal snel zijn bestemming bereiken met een plotselinge vertraging en geen oscillatie

• Periode: de tijd die een veersysteem nodig heeft om een enkele oscillatie uit te voeren.
• Definitieve/beginwaarde – gedefinieerde begin- en eindposities van de veerbeweging (indien niet gedefinieerd, beginwaarde en/of eindwaarde is de huidige waarde).
• Initial Velocity – programmatische initiële snelheid voor de beweging.

U kunt ook een set eigenschappen van de beweging definiëren die hetzelfde zijn als KeyFrameAnimations:

• Vertraagtijd / Vertraginggedrag
• StopBehavior

In de meest voorkomende gevallen van het animeren van Offset en Scale/Size, beveelt het Windows Design-team de volgende waarden aan voor DampingRatio en Period voor verschillende soorten veren.

Vastgoed	Normale veer	Gedempte veer	Minder gedempte veer
Offset	Demping verhouding = 0,8 Periode = 50 ms	Demping verhouding = 0,85 Periode = 50 ms	Demping verhouding = 0,65 Periode = 60 ms
Schaal/grootte	Demping verhouding = 0,7 Periode = 50 ms	Demping verhouding = 0,8 Periode = 50 ms	Demping ratio = 0,6 Periode = 60 ms

Zodra u de eigenschappen hebt gedefinieerd, kunt u uw Spring NaturalMotionAnimation overdragen aan de methode StartAnimation van een CompositionObject of aan de eigenschap Motion van een InteractionTracker InertiaModifier.

Voorbeeld

In dit voorbeeld creëert u een navigatie- en canvasinterface-ervaring waarin, wanneer de gebruiker op een uitvouwknop klikt, een navigatiedeelvenster wordt geanimeerd met een veerachtige, oscillerende beweging.

Begin met het definiëren van de springanimatie binnen de klikgebeurtenis voor wanneer het navigatiedeelvenster wordt weergegeven. Vervolgens definieert u de eigenschappen van de animatie met behulp van de functie InitialValueExpression om een expressie te gebruiken om de FinalValue te definiëren. U houdt ook bij of het deelvenster open is of niet, en start de animatie wanneer u klaar bent.

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

Wat als je deze beweging aan invoer wilde koppelen? Dus als de eindgebruiker wegveegt, komen de panelen uit met een veerbeweging. Belangrijker nog, als de gebruiker harder of sneller swipet, past de beweging zich aan op basis van de snelheid van de eindgebruiker.

Om dit te doen, kunt u dezelfde Spring Animation nemen en deze doorgeven aan een InertiaModifier met InteractionTracker. Zie Aangepaste manipulatie-ervaringen met InteractionTracker voor meer informatie over InputAnimations en InteractionTracker. Voor dit codevoorbeeld wordt ervan uitgegaan dat u uw InteractionTracker en VisualInteractionSource al hebt ingesteld. We richten ons op het creëren van de InertiaModifiers die een NaturalMotionAnimation opnemen, in dit geval een veeranimatie.

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

U hebt nu zowel een programmatische als invoergestuurde springanimatie in uw gebruikersinterface.

Kortom, de stappen voor het gebruik van een springanimatie in uw app:

1. Maak uw SpringAnimation vanaf uw Compositor.
2. Definieer eigenschappen van de SpringAnimation als u niet-standaardwaarden wilt gebruiken:
   • Dempingsverhouding
   • Periode
   • Uiteindelijke waarde
   • Initiële waarde
   • Initiële snelheid
3. Toewijzen aan bestemming.
   • Als u een eigenschap CompositionObject aan het animeren bent, geeft u SpringAnimation door als parameter aan StartAnimation.
   • Als u met invoer wilt gebruiken, stelt u de eigenschap NaturalMotion van een InertiaModifier in op SpringAnimation.