Animaties met veerdynamiek

In het artikel wordt beschreven hoe u spring NaturalMotionAnimations gebruikt.

Vereiste voorwaarden

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

• natuurlijke beweging animaties

Waarom veren?

Springs zijn een veelvoorkomende bewegingservaring die we allemaal wel eens in ons leven hebben meegemaakt; variërend van slinky speeltjes tot ervaringen in de natuurkundeles met een veergebonden blok. De oscillerende beweging van een veer veroorzaakt vaak een speelse en luchtige emotionele reactie bij degenen die ernaar kijken. Als gevolg hiervan vertaalt de beweging van een veer zich goed naar de gebruikersinterface van de applicatie 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 spring motion niet alleen een levendigere bewegingservaring, maar kan ook helpen om de aandacht te vestigen op nieuwe of momenteel animerende 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 een veer een handig element zijn om te integreren in uw app om een zeer vertrouwde en speelse gebruikersinterface-ervaring te introduceren. Veelvoorkomend gebruik van veren in de gebruikersinterface is:

Beschrijving van gebruik in de lente	Visueel voorbeeld
Het levendiger maken van een bewegingservaring zodat deze meer opvalt. (Schaal animeren)
Het maken van een bewegingservaring laat deze subtiel energieker voelen (Verschuifanimatie)

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	Niet-gedempt – de veer zal nog lang oscilleren
0 < Dempingsverhouding < 1	Onderverdampt – de lente zal van een beetje tot veel oscilleren.
Dempingsverhouding = 1	Kritisch gedempt – de veer zal niet oscilleren.
Dempingsverhouding > 1	Overdampt – de lente zal snel zijn bestemming bereiken met een plotselinge vertraging en geen oscillatie

• Periode – de tijd die een veer 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/Vertragingsgedrag
• StopBehavior

In de meest voorkomende gevallen van het animeren van offset en schaal/grootte, beveelt het Windows Design-team de volgende waarden aan voor 'DampingRatio' en 'Period' bij verschillende soorten veren:

Vastgoed	Normale lente	Gedempte veer	Minder gedempte veer
Afstand	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-object doorgeven aan de StartAnimation-methode van een CompositionObject of aan de Motion-eigenschap van een InteractionTracker InertiaModifier.

Voorbeeld

In dit voorbeeld creëert u een gebruikerservaring met een navigatie- en canvasinterface waarbij, wanneer de gebruiker op een expandeerknop klikt, een navigatiedeelvenster met een veerachtige, oscillatiebeweging wordt geanimeerd.

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. Je houdt ook bij of het deelvenster geopend is of niet en start de animatie wanneer je 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 uit swipet, komen de deelvensters uit met een Spring-beweging? 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 Ervaringen voor aangepaste manipulatie met InteractionTrackervoor 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 maken van InertiaModifiers die een NaturalMotionAnimation, in dit geval een veer, zullen opnemen.

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

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 met 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 doelwit.
   • 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.