Animeringar med naturlig rörelse

Den här artikeln innehåller en kort översikt över NaturalMotionAnimation-utrymmet och hur du konceptuellt tänker på hur du använder dessa typer av animeringar i användargränssnittet.

Att få rörelse att kännas bekant och naturlig

Bra appar är de som skapar upplevelser som fångar in och behåller användaruppmärksamhet och hjälper användare genom uppgifter. Rörelse är den viktigaste differentieringsfaktorn som skiljer ett användargränssnitt från en användarupplevelse – vilket ger en anslutning mellan användare och det program som de interagerar med. Ju bättre anslutning, desto högre engagemang och tillfredsställelse från slutanvändarna.

Ett sätt att skapa den här anslutningen är genom att skapa upplevelser som ser ut och känns bekanta för användarna. Användare har en omedveten förväntan på hur de uppfattar rörelse som baseras på verkliga upplevelser. Vi ser hur objekt glider över golvet, faller av bordet, studsar in i varandra och svänger med en fjäder. Motion som utnyttjar denna förväntan genom att baseras på verkliga fysik ser ut och känns mer naturligt i våra ögon. Rörelsen blir mer naturlig och interaktiv, men ännu viktigare blir hela upplevelsen mer minnesvärd och härlig.

Nettoresultatet är högre användarengagemang och kvarhållning med din app.

Balansera kontroll och dynamik

I det traditionella användargränssnittet är KeyFrameAnimations det dominerande sättet att beskriva rörelse. KeyFrames gav den yttersta kontrollen till designers och utvecklare för att definiera start, slut och interpolation. Även om detta är mycket användbart i många fall är KeyFrame-animeringar inte särskilt dynamiska. rörelsen inte är anpassningsbar och ser likadan ut under alla villkor.

I andra änden av spektrumet finns det simuleringar som ofta ses i spel- och fysikmotorer. Dessa upplevelser är ofta de mest livsliknande och dynamiska som användarna interagerar med – vilket skapar den känslan av atmosfär och slumpmässighet som användarna ser varje dag. Även om detta gör att rörelse känns mer levande och dynamisk, har designers och utvecklare mindre kontroll, vilket gör det svårare att integrera i det traditionella användargränssnittet.

NaturalMotionAnimationfinns för att överbrygga den här klyftan – vilket möjliggör en kontrollbalans för viktiga element i en animering som start/slut, men bibehåller rörelse som ser ut och känns naturlig och dynamisk.

Anmärkning

NaturalMotionAnimations är inte avsedda som en ersättning för KeyFrame-animeringar – det finns fortfarande platser i fluent-designspråket där KeyFrames rekommenderas. NaturalMotionAnimations är avsedda att användas på platser där rörelse krävs, men KeyFrame-animeringar är inte tillräckligt dynamiska.

Använda NaturalMotionAnimations

I WinUI och Windows App SDK har du tillgång till en naturlig rörelseupplevelse: fjäderanimationer. Se Spring-animationer för en mer djupgående genomgång av Spring-animationer.

Den här rörelsetypen uppnås med hjälp av den nya NaturalMotionAnimation – en ny animeringstyp som fokuserar på att göra det möjligt för utvecklare att bygga in mer välbekanta och naturliga känsla i sitt användargränssnitt, med en balans mellan kontroll och dynamik. De visar följande funktioner:

• Definiera start- och slutvärdena.
• Definiera InitialVelocity och koppla till indata med InteractionTracker.
• Definiera rörelsespecifika egenskaper (till exempel DampingRatio för fjädrar.)

Allmän formel för att komma igång:

1. Skapa NaturalMotionAnimation från Compositor med någon av metoderna Skapa .
2. Definiera animeringens egenskaper.
3. Skicka NaturalMotionAnimation som en parameter till ett StartAnimation-anrop för ett CompositionObject.
   • Eller ange egenskapen Motion för en InteractionTracker InertiaModifier.

Ett grundläggande exempel med en Spring NaturalMotionAnimation för att göra ett visuellt objekt till en ny X-förskjutningsplats:

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);