Animaties in natuurlijke beweging

Dit artikel bevat een kort overzicht van de NaturalMotionAnimation-ruimte en hoe u conceptueel nadenkt over het gebruik van deze typen animaties in uw gebruikersinterface.

Beweging vertrouwd en natuurlijk maken

Geweldige apps zijn apps die ervaringen maken die de aandacht van gebruikers vastleggen en behouden en gebruikers helpen bij het doorlopen van taken. Beweging is de belangrijkste differentiërende factor die een gebruikersinterface scheidt van een gebruikerservaring: het verleiden van een verbinding tussen gebruikers en de toepassing waarmee ze communiceren. Hoe beter de verbinding, hoe hoger betrokkenheid en tevredenheid van eindgebruikers.

Beweging kan helpen deze verbinding op te bouwen door ervaringen te creëren die bekend en vertrouwd aanvoelen voor gebruikers. Gebruikers hebben een onbewuste verwachting voor hoe ze beweging ervaren die is gebaseerd op ervaringen in het echte leven. We zien hoe objecten over de vloer schuiven, van de tafel vallen, in elkaar stuiteren en met een veer oscilleren. Beweging die gebruikmaakt van deze verwachting door gebaseerd te zijn op echte wereldfysica, oogt en voelt natuurlijker aan in onze ogen. De beweging wordt natuurlijker en interactiever, maar belangrijker is dat de hele ervaring memorabeler en heerlijker wordt.

Het nettoresultaat is een hogere betrokkenheid en retentie van gebruikers met uw app.

Balanceren van beheersing en dynamiek

In de traditionele gebruikersinterface zijn KeyFrameAnimations de overheersende manier om beweging te beschrijven. KeyFrames hebben de grootste controle voor ontwerpers en ontwikkelaars geboden om het begin, einde en interpolatie te definiëren. Hoewel dit in veel gevallen erg nuttig is, zijn KeyFrame-animaties niet erg dynamisch; de beweging is niet adaptief en ziet er hetzelfde uit onder elke voorwaarde.

Aan het andere uiteinde van het spectrum zijn er simulaties die vaak worden gezien in gaming- en fysica-engines. Deze ervaringen zijn vaak de meest levensachtige en dynamische waarmee gebruikers communiceren– waardoor ze die sfeer en willekeurigheid creëren die gebruikers elke dag zien. Hoewel dit bewegingen een actiever en dynamischer maakt, hebben ontwerpers en ontwikkelaars minder controle, waardoor het moeilijker wordt om te integreren in de traditionele gebruikersinterface.

NaturalMotionAnimations bestaan om deze kloof te overbruggen, waardoor evenwichtige controle mogelijk is voor de belangrijke elementen van een animatie zoals begin/eind, terwijl de beweging er natuurlijk en dynamisch uitziet en aanvoelt.

Opmerking

NaturalMotionAnimations zijn niet bedoeld als vervanging voor KeyFrame-animaties. Er zijn nog steeds plaatsen in de Fluent-ontwerptaal waar KeyFrames worden aanbevolen. NaturalMotionAnimations zijn bedoeld om te worden gebruikt op plaatsen waar beweging vereist is, maar KeyFrame-animaties zijn niet dynamisch genoeg.

NaturalMotionAnimations gebruiken

In WinUI en de Windows App SDK hebt u toegang tot een natuurlijke bewegingservaring: springanimaties. Zie springanimaties voor een uitgebreidere uitleg van springs.

Dit bewegingstype wordt bereikt met behulp van het nieuwe NaturalMotionAnimation- een nieuw animatietype dat is gericht op het bouwen van meer vertrouwde en natuurlijke gevoelsbewegingen in hun gebruikersinterface, met een balans van controle en dynamiek. Ze bieden de volgende mogelijkheden:

• Definieer de begin- en eindwaarden.
• Definieer InitialVelocity en koppel deze aan invoer met InteractionTracker.
• Bewegingsspecifieke eigenschappen definiëren (zoals DampingRatio voor veren.)

Algemene formule om aan de slag te gaan:

1. Maak de NaturalMotionAnimation van de Compositor met behulp van een van de Create methoden.
2. Definieer de eigenschappen van de animatie.
3. Geef de NaturalMotionAnimation door als een parameter aan de aanroep StartAnimation van een CompositionObject.
   • Of stel deze in op de eigenschap Motion van een InteractionTracker InertiaModifier.

Een basisvoorbeeld met behulp van een spring NaturalMotionAnimation om een visual 'spring' te maken naar een nieuwe X-offsetlocatie:

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