Invoergestuurde animaties

In dit artikel vindt u een inleiding tot de InputAnimation-API in WinUI- en Windows App SDK-apps en wordt aanbevolen hoe u deze typen animaties in uw gebruikersinterface kunt gebruiken.

Vereiste voorwaarden

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

• Op relaties gebaseerde animaties

Vloeiende beweging op basis van gebruikersinteracties

In de Fluent Design-taal is interactie tussen eindgebruikers en apps van het grootste belang. Apps moeten er niet alleen goed uitzien, maar ook op een natuurlijke en dynamische manier reageren op de gebruikers die met deze interageren. Dit betekent dat wanneer een vinger op het scherm wordt geplaatst, de gebruikersinterface goed moet reageren op verschillende invoerniveaus; en schuiven moet soepel aanvoelen en de beweging van een vinger over het scherm volgen.

Het bouwen van de gebruikersinterface die dynamisch en vloeiend reageert op gebruikersinvoer resulteert in een hogere gebruikersbetrokkenheid. Beweging ziet er nu niet alleen goed uit, maar voelt goed en natuurlijk wanneer gebruikers communiceren met uw verschillende gebruikersinterface-ervaringen. Hierdoor kunnen eindgebruikers gemakkelijker verbinding maken met uw toepassing, waardoor de ervaring memorabeler en heerlijker wordt.

Uitbreiden voorbij alleen aanraking

Hoewel touch een van de meest voorkomende interfaces is die eindgebruikers gebruiken om ui-inhoud te manipuleren, gebruiken ze ook verschillende andere invoermodaliteiten zoals muis en pen. In dergelijke gevallen is het belangrijk dat eindgebruikers ervaren dat uw gebruikersinterface dynamisch reageert op hun invoer, ongeacht de invoermodaliteit die ze kiezen om te gebruiken. U moet cognizant zijn van de verschillende invoermodaliteiten bij het ontwerpen van invoergestuurde bewegingservaringen.

Verschillende invoer-gestuurde bewegingservaringen

De InputAnimation-ruimte biedt verschillende ervaringen voor u om dynamisch reagerende bewegingen te maken. Net als de rest van het Windows App SDK Composition Animation-systeem werken deze invoergestuurde animaties op een onafhankelijke thread, die bijdragen aan de dynamische bewegingservaring. In sommige gevallen waarin de ervaring echter gebruikmaakt van bestaande XAML-besturingselementen en -onderdelen, zijn onderdelen van deze ervaringen nog steeds gebonden aan ui-threads.

Er zijn drie kernervaringen die u maakt bij het bouwen van dynamische invoergestuurde animaties:

1. Bestaande ScrollView-ervaringen verbeteren: schakel de positie van een XAML ScrollViewer in om dynamische animatie-ervaringen te stimuleren.
2. Aanwijzer positiegestuurde ervaringen: gebruik de positie van een cursor op een getest UIElement om dynamische animatie-ervaringen te stimuleren.
3. Aangepaste manipulatie-ervaringen met InteractionTracker: maak een volledig aangepaste, off-thread manipulatie-ervaring met InteractionTracker (zoals een scrollen/zoomend canvas).

Bestaande ScrollViewer-ervaringen verbeteren

Een van de gebruikelijke manieren om meer dynamische ervaringen te maken, is door te bouwen op een bestaand XAML ScrollViewer-besturingselement. In deze situaties maakt u gebruik van de schuifpositie van een ScrollViewer om extra UI-onderdelen te maken die een eenvoudige schuifervaring dynamischer maken. Enkele voorbeelden zijn Sticky/Shy Headers en Parallax.

Wanneer u deze typen ervaringen maakt, is er een algemene formule die u kunt volgen:

1. Open de ScrollManipulationPropertySet van de XAML ScrollViewer waarvoor u een animatie wilt aandrijven.
   • Uitgevoerd via de ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement element) API
   • Hiermee wordt een CompositionPropertySet geretourneerd die een eigenschap met de naam Translation bevat
2. Maak een Composition ExpressionAnimation met een vergelijking die verwijst naar de eigenschap Translation.
3. Start de animatie op de eigenschap van een CompositionObject.

Zie Bestaande ScrollViewer-ervaringen verbeteren voor meer informatie over het bouwen van deze ervaringen.

Ervaringen aangedreven door de positie van de aanwijzer

Een andere veelgebruikte dynamische ervaring met invoer is het aandrijven van een animatie op basis van de positie van een aanwijzer, zoals een muiscursor. In deze situaties maken ontwikkelaars gebruik van de locatie van een cursor bij het hit testen binnen een XAML UIElement dat ervaringen zoals Spotlight Reveal mogelijk maakt.

Wanneer u deze typen ervaringen maakt, is er een algemene formule die u kunt volgen:

1. Toegang tot de PointerPositionPropertySet van een XAML UIElement waarvan u de cursorpositie wilt weten wanneer het wordt getest.
   • Gedaan via de ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element) API
   • Hiermee wordt een CompositionPropertySet geretourneerd die een eigenschap met de naam Position bevat
2. Maak een CompositionExpressionAnimation met een vergelijking die verwijst naar de eigenschap Position.
3. Start de animatie van een eigenschap van een CompositionObject.

Aangepaste manipulatie-ervaringen met InteractionTracker

Een van de uitdagingen bij het gebruik van een XAML ScrollViewer is dat deze is gebonden aan de UI-thread. Als gevolg hiervan kan de ervaring van scrollen en zoomen vaak vertraging oplopen en haperingen vertonen als de UI-thread druk is, wat resulteert in een onaangename ervaring. Daarnaast is het niet mogelijk om veel aspecten van de ScrollViewer-ervaring aan te passen. InteractionTracker is gemaakt om beide problemen op te lossen door een set bouwstenen te bieden voor het maken van aangepaste manipulatie-ervaringen die worden uitgevoerd op een onafhankelijke thread.

Bij het maken van ervaringen met InteractionTracker is er een algemene formule die u kunt volgen:

1. Maak uw InteractionTracker-object en definieer de eigenschappen.
2. Maak VisualInteractionSources voor elke CompositionVisual die invoer moet vastleggen voor gebruik door InteractionTracker.
3. Maak een Composition ExpressionAnimation met een vergelijking die verwijst naar de eigenschap Position van InteractionTracker.
4. Start de animatie op de eigenschap van een Composition Visual die u wilt laten aandrijven door InteractionTracker.