Eingabegesteuerte Animationen

Dieser Artikel enthält eine Einführung in die InputAnimation-API und empfiehlt die Verwendung dieser Arten von Animationen in Ihrer Benutzeroberfläche.

Voraussetzungen

Hier wird davon ausgegangen, dass Sie mit den in den folgenden Artikeln erläuterten Konzepten vertraut sind:

• Auf Beziehungen basierende Animationen

Reibungslose Bewegung, die von Benutzerinteraktionen gesteuert wird

In der Fluent Design-Sprache ist die Interaktion zwischen Endbenutzern und Apps von größter Bedeutung. Apps müssen nicht nur den Teil sehen, sondern auch natürlich und dynamisch auf die Benutzer reagieren, die mit ihnen interagieren. Dies bedeutet, dass die Benutzeroberfläche, wenn ein Finger auf dem Bildschirm platziert wird, ordnungsgemäß auf veränderliche Eingabegrade reagieren sollte; Das Scrollen sollte reibungslos wirken und mit einem Finger auf dem Bildschirm schwenken.

Das Erstellen einer Benutzeroberfläche, die dynamisch und flüssig auf Benutzereingaben reagiert, führt zu einer höheren Benutzerbindung – Bewegung sieht jetzt nicht nur gut aus, sondern fühlt sich gut und natürlich an, wenn Benutzer mit Ihren unterschiedlichen Benutzeroberflächen interagieren. Auf diese Weise können Endbenutzer einfacher mit Ihrer Anwendung in Verbindung treten, wodurch die Erfahrung unvergesslicher und ansprechender wird.

Erweitern der Vergangenheit nur per Fingereingabe

Obwohl die Toucheingabe eine der häufigsten Schnittstellen ist, die Endbenutzer zum Bearbeiten von UI-Inhalten verwenden, verwenden sie auch verschiedene andere Eingabemodalitäten wie Maus und Stift. In diesen Fällen ist es wichtig, dass Endbenutzer wahrnehmen, dass Ihre Benutzeroberfläche dynamisch auf ihre Eingabe reagiert, unabhängig davon, welche Eingabemodalitäten sie verwenden möchten. Sie sollten sich die verschiedenen Eingabemodalitäten beim Entwerfen von eingabegesteuerten Bewegungserfahrungen bewusst sein.

Verschiedene eingabegesteuerte Bewegungserfahrungen

Der InputAnimation-Raum bietet verschiedene Oberflächen, mit der Sie dynamisch reagierende Bewegungen erstellen können. Wie der Rest des Windows-Benutzeroberflächenanimationssystems arbeiten diese eingabegesteuerten Animationen auf einem unabhängigen Thread, der zur dynamischen Bewegungserfahrung beiträgt. In einigen Fällen, in denen die Oberfläche vorhandene XAML-Steuerelemente und -Komponenten nutzt, sind Teile dieser Erfahrungen jedoch weiterhin UI-Thread gebunden.

Es gibt drei Kernfunktionen, die Sie beim Erstellen dynamischer eingabegesteuerter Bewegungsanimationen erstellen:

1. Verbessern vorhandener ScrollView-Erfahrungen – Ermöglichen Sie die Position eines XAML-ScrollViewers, um dynamische Animationsfunktionen zu fördern.
2. Zeigerpositionsgesteuerte Erfahrungen – Verwenden Sie die Position eines Cursors auf einem treffergeprüften UIElement, um dynamische Animationserfahrungen zu fördern.
3. Benutzerdefinierte Manipulationserfahrungen mit InteractionTracker – Erstellen Einer vollständig angepassten, offthread-Manipulation mit InteractionTracker (z. B. bildlauf-/zooming canvas).

Verbessern vorhandener ScrollViewer-Erfahrungen

Eine der gängigen Möglichkeiten zum Erstellen dynamischerer Oberflächen besteht darin, auf einem vorhandenen XAML ScrollViewer-Steuerelement aufzubauen. In diesen Situationen verwenden Sie die Bildlaufposition eines ScrollViewer, um zusätzliche UI-Komponenten zu erstellen, die eine einfache Bildlauferfahrung dynamischer gestalten. Einige Beispiele sind Sticky/Shy Headers und Parallax.

Beim Erstellen dieser Arten von Erfahrungen gibt es eine allgemeine Formel, die Sie befolgen müssen:

1. Greifen Sie auf das ScrollManipulationPropertySet des XAML-ScrollViewer zu, den Sie eine Animation steuern möchten.
   • Erfolgt über die ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement-Element)-API
   • Gibt ein CompositionPropertySet zurück, das eine Eigenschaft namens Translation enthält .
2. Erstellen Sie eine Kompositionsausdruckanimation mit einer Formel, die auf die Translation-Eigenschaft verweist.
3. Starten Sie die Animation für die Eigenschaft eines CompositionObjects.

Weitere Informationen zum Erstellen dieser Erfahrungen finden Sie unter "Verbessern vorhandener ScrollViewer-Umgebungen".

Zeigerpositionsgesteuerte Oberflächen

Eine weitere häufige dynamische Erfahrung mit Eingaben besteht darin, eine Animation basierend auf der Position eines Zeigers wie einem Mauszeiger zu steuern. In diesen Situationen nutzen Entwickler die Position eines Cursors, wenn er in einem XAML-UIElement getestet wird, wodurch Oberflächen wie Spotlight Reveal erstellt werden können.

Beim Erstellen dieser Arten von Erfahrungen gibt es eine allgemeine Formel, die Sie befolgen müssen:

1. Greifen Sie auf das PointerPositionPropertySet-Element eines XAML-UIElements zu, das Sie beim Testen von Treffern die Cursorposition kennen möchten.
   • Erfolgt über die ElementCompositionPreview.GetPointerPositionPropertySet(UIElement-Element)-API
   • Gibt ein CompositionPropertySet zurück, das eine Eigenschaft namens Position enthält .
2. Erstellen Sie eine CompositionExpressionAnimation mit einer Formel, die auf die Position-Eigenschaft verweist.
3. Starten Sie die Animation für die Eigenschaft eines CompositionObjects.

Benutzerdefinierte Manipulationserfahrungen mit InteractionTracker

Eine der Herausforderungen bei der Verwendung eines XAML ScrollViewer ist, dass sie an den UI-Thread gebunden ist. Dies führt dazu, dass die Bildlauf- und Zoomerfahrung häufig verzögert und jittert, wenn der UI-Thread ausgelastet wird und zu einer unappealierenden Erfahrung führt. Darüber hinaus ist es nicht möglich, viele Aspekte der ScrollViewer-Erfahrung anzupassen. InteractionTracker wurde erstellt, um beide Probleme zu lösen, indem eine Reihe von Bausteinen bereitgestellt werden, um benutzerdefinierte Manipulationsfunktionen zu erstellen, die in einem unabhängigen Thread ausgeführt werden.

Beim Erstellen von Erfahrungen mit InteractionTracker gibt es eine allgemeine Formel:

1. Erstellen Sie Ihr InteractionTracker-Objekt, und definieren Sie dessen Eigenschaften.
2. Erstellen Sie VisualInteractionSources für alle CompositionVisual-Elemente, die Eingaben für InteractionTracker erfassen sollen, die verwendet werden sollen.
3. Erstellen Sie eine Kompositionsausdruckanimation mit einer Formel, die auf die Position-Eigenschaft von InteractionTracker verweist.
4. Starten Sie die Animation für die Eigenschaft von Composition Visual, die Von InteractionTracker gesteuert werden soll.