Eingabegesteuerte Animationen

Dieser Artikel bietet eine Einführung in die InputAnimation-API und empfiehlt, wie Sie diese Arten von Animationen auf Ihrer Benutzeroberfläche verwenden.

Voraussetzungen

Hier gehen wir davon aus, dass Sie mit den in diesen 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 betrachten, sondern auch natürlich und dynamisch auf die Benutzer reagieren, die mit ihnen interagieren. Wenn also ein Finger auf dem Bildschirm platziert wird, sollte die Benutzeroberfläche ordnungsgemäß auf sich ändernde Eingabegrade reagieren. Das Scrollen sollte sich glatt anfühlen und an einem Fingerschwenk über den Bildschirm haften bleiben.

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 auch gut und natürlich an, wenn Benutzer mit Ihren verschiedenen Benutzeroberflächenoberflächen interagieren. Dies ermöglicht Endbenutzern, sich einfacher mit Ihrer Anwendung zu verbinden, was die Erfahrung unvergesslicher und ansprechender macht.

Erweitern der letzten Nur-Fingereingabe

Obwohl 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 erkennen, dass Ihre Benutzeroberfläche dynamisch auf ihre Eingaben reagiert, unabhängig davon, welche Eingabemodalität sie verwenden. Sie sollten die verschiedenen Eingabemodalitäten beim Entwerfen von eingabegesteuerten Bewegungserfahrungen beachten.

Verschiedene Input-Driven Bewegungserfahrungen

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

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

1. Verbessern vorhandener ScrollView-Umgebungen: Aktivieren Sie die Position eines XAML-ScrollViewers, um dynamische Animationen zu ermöglichen.
2. Zeigerpositionsgesteuerte Erfahrungen: Verwenden Sie die Position eines Cursors auf einem auf Treffer getesteten UIElement, um dynamische Animationserfahrungen zu fördern.
3. Benutzerdefinierte Manipulationserfahrungen mit InteractionTracker: Erstellen Sie eine vollständig angepasste Off-Thread-Bearbeitungserfahrung mit InteractionTracker (z. B. einen Scroll-/Zoombereich).

Verbessern vorhandener ScrollViewer-Funktionen

Eine der gängigen Möglichkeiten, dynamischere Umgebungen zu erstellen, besteht darin, auf einem vorhandenen XAML ScrollViewer-Steuerelement zu erstellen. In diesen Situationen nutzen Sie die Scrollposition eines ScrollViewers, um zusätzliche Ui-Komponenten zu erstellen, die ein einfaches Bildlauferlebnis dynamischer gestalten. Einige Beispiele sind Sticky/Shy Header und Parallax.

Wenn Sie diese Arten von Erfahrungen erstellen, müssen Sie eine allgemeine Formel befolgen:

1. Greifen Sie auf scrollManipulationPropertySet aus dem XAML-ScrollViewer zu, den Sie für eine Animation verwenden möchten.
   • Fertig ü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 CompositionObject.

Weitere Informationen zum Erstellen dieser Funktionen finden Sie unter Verbessern vorhandener ScrollViewer-Funktionen.

Zeigerpositionsgesteuerte Funktionen

Eine weitere gängige dynamische Erfahrung mit Eingaben ist das Steuern einer Animation basierend auf der Position eines Zeigers, z. B. eines Mauscursors. In diesen Situationen nutzen Entwickler die Position eines Cursors, wenn ein Treffer in einem XAML-UIElement getestet wird, das die Erstellung von Erfahrungen wie Spotlight Reveal ermöglicht.

Wenn Sie diese Arten von Erfahrungen erstellen, müssen Sie eine allgemeine Formel befolgen:

1. Greifen Sie auf pointerPositionPropertySet über ein XAML-UIElement zu, das Sie beim Testen des Treffers die Cursorposition kennen möchten.
   • Fertig ü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 CompositionObject.

Benutzerdefinierte Bearbeitungserfahrungen mit InteractionTracker

Eine der Herausforderungen bei der Verwendung eines XAML ScrollViewer besteht darin, dass er an den UI-Thread gebunden ist. Daher kann das Scrollen und Zoomen häufig verzögert und jittern, wenn der UI-Thread ausgelastet ist und zu einer unsymmetrischen Erfahrung führt. Darüber hinaus ist es nicht möglich, viele Aspekte der ScrollViewer-Benutzeroberfläche 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 müssen Sie eine allgemeine Formel befolgen:

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.
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 eines Composition Visuals, die von InteractionTracker gesteuert werden soll.