Indatadrivna animeringar

Den här artikeln innehåller en introduktion till InputAnimation-API:et i WinUI- och Windows App SDK-appar och rekommenderar hur du använder dessa typer av animeringar i användargränssnittet.

Förutsättningar

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

• Relationsbaserade animeringar

Smidig rörelse som drivs av användarinteraktioner

I språket Fluent Design är interaktion mellan slutanvändare och appar av yttersta vikt. Appar måste inte bara se ut som de ska, utan också reagera naturligt och dynamiskt på de användare som interagerar med dessa. Det innebär att när ett finger placeras på skärmen bör användargränssnittet reagera smidigt på förändringar i input; scrollning ska kännas jämn och följa ett finger som panorerar över skärmen.

Att skapa användargränssnitt som dynamiskt och smidigt svarar på användarindata resulterar i högre användarengagemang – Rörelse nu ser inte bara bra ut, utan känns bra och naturligt när användarna interagerar med dina olika användargränssnittsupplevelser. Detta gör det möjligt för slutanvändarna att lättare ansluta till ditt program, vilket gör upplevelsen mer minnesvärd och härlig.

Expandera bortom enbart beröring

Även om touch är ett av de vanligaste gränssnitten som slutanvändare använder för att manipulera användargränssnittsinnehåll, kommer de också att använda olika andra indatamodaliteter som mus och penna. I dessa fall är det viktigt att slutanvändarna uppfattar att användargränssnittet svarar dynamiskt på deras indata, oavsett vilken indatamodalitet de väljer att använda. Du bör vara medveten om de olika indatamodaliteterna när du utformar indatadrivna rörelseupplevelser.

Olika ingångsdrivna rörelseupplevelser

InputAnimation-utrymmet innehåller flera olika funktioner som du kan använda för att skapa dynamiskt svarande rörelser. Liksom resten av Windows App SDK Composition Animation-systemet fungerar dessa indatadrivna animeringar på en oberoende tråd, vilket bidrar till den dynamiska rörelseupplevelsen. Men i vissa fall där upplevelsen utnyttjar befintliga XAML-kontroller och -komponenter är delar av dessa upplevelser fortfarande trådbundna med användargränssnittet.

Det finns tre kärnupplevelser som du skapar när du skapar dynamiska indatadrivna rörelseanimationer:

1. Förbättra befintliga ScrollView-upplevelser – aktivera positionen för en XAML ScrollViewer för att skapa dynamiska animeringsupplevelser.
2. Pekarlägesdrivna upplevelser – använd positionen för en markör på ett UI-element som har blivit träfftestat för att driva dynamiska animeringsupplevelser.
3. Anpassade manipulationsupplevelser med InteractionTracker – skapa en helt anpassad manipulationsupplevelse utanför tråden med InteractionTracker (till exempel en rullnings-/zoomningsarbetsyta).

Förbättra befintliga ScrollViewer-upplevelser

Ett av de vanligaste sätten att skapa mer dynamiska upplevelser är att bygga vidare på en befintlig XAML ScrollViewer-kontroll. I dessa situationer använder du rullningspositionen för en ScrollViewer för att skapa ytterligare gränssnittskomponenter som gör en enkel rullningsupplevelse mer dynamisk. Några exempel är Sticky/Shy Headers och Parallax.

När du skapar dessa typer av upplevelser finns det en allmän formel att följa:

1. Öppna ScrollManipulationPropertySet från XAML ScrollViewer som du vill köra en animering.
   • Görs via API:et ElementCompositionPreview.GetScrollViewerManipulationPropertySet (UIElement-elementet)
   • Returnerar en CompositionPropertySet som innehåller en egenskap som kallas översättning
2. Skapa en Composition ExpressionAnimation med en ekvation som hänvisar till egenskapen Translation.
3. Starta animeringen på en CompositionObject-egenskap.

Mer information om hur du skapar dessa upplevelser finns i Förbättra befintliga ScrollViewer-upplevelser.

Pekarlägesdrivna upplevelser

En annan vanlig dynamisk upplevelse med indata är att köra en animering baserat på positionen för en pekare, till exempel en musmarkör. I dessa situationer utnyttjar utvecklare markörens position när träff testas i en XAML UIElement som gör upplevelser som Spotlight Reveal möjlig att skapa.

När du skapar dessa typer av upplevelser finns det en allmän formel att följa:

1. Få åtkomst till PointerPositionPropertySet från ett XAML UIElement vars markörposition du vill känna till vid hittestning.
   • Görs genom API:et ElementCompositionPreview.GetPointerPositionPropertySet(UIElement-elementet)
   • Returnerar en CompositionPropertySet som innehåller en egenskap med namnet Position
2. Skapa en CompositionExpressionAnimation med en ekvation som refererar till egenskapen Position.
3. Starta animeringen på en CompositionObject-egenskap.

Anpassade manipulationsupplevelser med InteractionTracker

En av utmaningarna med att använda en XAML ScrollViewer är att den är bunden till användargränssnittstråden. Som ett resultat kan rullnings- och zoomningsupplevelsen ofta fördröja och darra om användargränssnittstråden blir upptagen och resulterar i en oattraktiv upplevelse. Dessutom går det inte att anpassa många aspekter av ScrollViewer-upplevelsen. InteractionTracker skapades för att lösa båda problemen genom att tillhandahålla en uppsättning byggstenar för att skapa anpassade manipulationsupplevelser som körs på en oberoende tråd.

När du skapar upplevelser med InteractionTracker finns det en allmän formel att följa:

1. Skapa ditt InteractionTracker-objekt och definiera dess egenskaper.
2. Skapa VisualInteractionSources för alla CompositionVisual som ska samla in indata som InteractionTracker kan använda.
3. Skapa en Composition ExpressionAnimation med en ekvation som refererar till egenskapen Position för InteractionTracker.
4. Starta animeringen på en egenskap i ett visuellt kompositionsobjekt som du vill att ska styras av InteractionTracker.