Våranimationer

Artikeln visar hur du använder spring NaturalMotionAnimations.

Förutsättningar

Här förutsätter vi att du är bekant med de begrepp som beskrivs i dessa artiklar:

• naturliga rörelseanimationer

Varför fjädrar?

Fjädrar är en vanlig rörelse som vi alla har haft möjlighet att uppleva någon gång i våra liv; allt från slinky-leksaker till lektioner i fysik där fjädrar används, som med en fastbunden block i en fjäder. En fjäders oscillerande rörelse väcker ofta ett lekfullt och emotionellt svar från dem som observerar den. Som ett resultat översätts vårens rörelse väl till applikationens användargränssnitt för dem som vill skapa en livligare rörelseupplevelse som "poppar" mer för slutanvändaren än en traditionell Cubic Bezier. I dessa fall skapar spring motion inte bara en livligare rörelseupplevelse, utan kan också hjälpa till att uppmärksamma nytt eller för närvarande animerande innehåll. Beroende på programanpassning eller rörelsespråk är oscillationen mer uttalad och synlig, men i andra fall är den mer subtil.

Använda fjädrar i användargränssnittet

Som tidigare nämnts kan fjädrar vara en användbar rörelse för att integrera i din app för att introducera en mycket välbekant och lekfull användargränssnittsupplevelse. Vanlig användning av fjädrar i användargränssnittet är:

Beskrivning av Spring-användning	Visuellt exempel
Att få en rörelseupplevelse att verkligen lyfta och framstå som livligare. (Animera skala)
Att få en rörelseupplevelse att kännas subtilt mer energisk (animerande förskjutning)

I vart och ett av dessa fall kan fjäderrörelsen utlösas antingen genom att "springa till" och svänga runt ett nytt värde eller svänga runt det aktuella värdet med viss initial hastighet.

Definiera din fjäderrörelse

Du skapar en vårupplevelse med hjälp av API:er för NaturalMotionAnimation. Mer specifikt skapar du en SpringNaturalMotionAnimation med hjälp av metoderna Skapa* från Compositor. Sedan kan du definiera följande egenskaper för rörelsen:

• DampingRatio – uttrycker nivån av dämpning i fjäderrörelsen som används i animeringen.

Dämpningsförhållandevärde	Beskrivning
Dämpningsförhållande = 0	Odamperad – fjädern kommer att oscillera under lång tid
0 < Dämpningsförhållande < 1	Underdämpad – fjädern kommer att svänga från lite till mycket.
Dämpningsförhållande = 1	Kritiskt dämpad – fjädern utför ingen svängning.
Dämpningsgrad > 1	Överdämpad – fjädern kommer snabbt att nå sin destination med en plötslig inbromsning och ingen svängning

• Period – den tid det tar våren att utföra en enda oscillation.
• Slutligt/startvärde – definierade start- och slutpositioner för fjäderrörelsen (om dessa inte definieras kommer startvärdet och/eller det slutliga värdet att vara det aktuella värdet).
• Initial Velocity – programmeringsmässig initial hastighet för rörelsen.

Du kan också definiera en uppsättning egenskaper för rörelsen som är samma som KeyFrameAnimations:

• Fördröjningstid / Fördröjningsbeteende
• StopBehavior

I vanliga fall med att animera förskjutning och skalning/storlek rekommenderas följande värden av Windows Design-teamet för DampingRatio och Period för olika typer av fjädrar:

Fastighet	Normal vår	Dämpad fjäder	Mindre dämpad fjäder
Kompensera	Dämpningsförhållande = 0,8 Periodtid = 50 ms	Dämpningsförhållande = 0,85 Periodtid = 50 ms	Dämpningsförhållande = 0,65 Periodtid = 60 ms
Skala/storlek	Dämpningsförhållande = 0,7 Periodtid = 50 ms	Dämpningsförhållande = 0,8 Periodtid = 50 ms	Dämpningsförhållande = 0,6 Periodtid = 60 ms

När du har definierat egenskaperna kan du sedan skicka in din spring NaturalMotionAnimation till metoden StartAnimation för en CompositionObject eller egenskapen Motion för en InteractionTracker InertiaModifier.

Exempel

I det här exemplet skapar du en användargränssnittsupplevelse för navigering och arbetsytor där ett navigeringsfönster animeras med en springig, svängningsrörelse när användaren klickar på en expanderingsknapp.

Börja med att definiera springanimationen i klickhändelsen för när navigeringsfönstret visas. Sedan definierar du animeringens egenskaper med hjälp av funktionen InitialValueExpression för att använda ett uttryck för att definiera FinalValue. Du håller också reda på om fönstret är öppet eller inte och startar animeringen när det är klart.

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

Vad händer om du vill koppla denna rörelse till indata? Så om slutanvändaren sveper ut, kommer fönstren ut med en fjädrande rörelse? Ännu viktigare är att om användaren sveper hårdare eller snabbare anpassas rörelsen baserat på slutanvändarens hastighet.

För att göra detta kan du ta samma Spring Animation och skicka den till en InertiaModifier med InteractionTracker. Mer information om InputAnimations och InteractionTracker finns i Anpassade manipulationsupplevelser med InteractionTracker. För det här kodexemplet förutsätter vi att du redan har konfigurerat InteractionTracker och VisualInteractionSource. Vi fokuserar på att skapa de InertiaModifiers som kommer att ta in en NaturalMotionAnimation, i det här fallet en fjäderanimation.

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

Nu har du både en programmatisk och indatadriven våranimation i ditt användargränssnitt!

Sammanfattningsvis steg för att använda en våranimation i din app:

1. Skapa din SpringAnimation från din Compositor.
2. Definiera egenskaper för SpringAnimation om du vill ha icke-standardvärden:
   • Dämpningsförhållande
   • Punkt slut
   • Slutligt värde
   • Initialt värde
   • Initial hastighet
3. Tilldela till mål.
   • Om du animera en CompositionObject-egenskap skickar du SpringAnimation som parameter till StartAnimation.
   • Om du vill använda med indata anger du Egenskapen NaturalMotion för en InertiaModifier till SpringAnimation.