Eingabegesteuerte Animationen

Dieser Artikel enthält eine Einführung in die InputAnimation-API in WinUI- und Windows App SDK-Apps 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:

• Beziehungsbasierte 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 gut aussehen, 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, nahtlos auf veränderliche Eingabegrade reagieren sollte; das Scrollen sollte reibungslos verlaufen und dem Finger folgen, während er über den Bildschirm bewegt wird.

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.

Über den reinen Touch hinausgehen

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 der verschiedenen Eingabemodalitäten bewusst sein, wenn Sie eingabegesteuerte Bewegungserlebnisse entwerfen.

Verschiedene eingabegesteuerte Bewegungserfahrungen

Der InputAnimation-Bereich bietet verschiedene Erfahrungen, mit denen Sie dynamisch reagierende Bewegungen erstellen können. Wie im restlichen Windows App SDK Composition Animation System funktionieren 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 Kernerfahrungen, die Sie beim Erstellen dynamischer, eingabegesteuerter Bewegungsanimationen machen:

1. Verbessern vorhandener ScrollView-Erfahrungen – Ermöglichen Sie die Position eines XAML-ScrollViewers, um dynamische Animationsfunktionen zu fördern.
2. Zeigerpositionsgesteuerte Erlebnisse – Nutzen Sie die Position eines Cursors auf einem treffergeprüften UIElement, um dynamische Animationserlebnisse zu steuern.
3. Benutzerdefinierte Manipulationserfahrungen mit InteractionTracker – erstellen Sie eine vollständig angepasste, off-thread-Manipulationserfahrung mit InteractionTracker (z. B. einem Scroll-/Zoom-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-ScrollViewers zu, mit dem 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 einer Eigenschaft eines CompositionObject.

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

Zeigerpositionsgesteuerte Erfahrungen

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 eines XAML-UIElements zu, dessen Cursorposition Sie beim Hit-Test erfahren 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 einer Eigenschaft des 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 ruckelt, wenn der UI-Thread ausgelastet ist und zu einem unattraktiven Erlebnis 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 den InteractionTracker erfassen sollen.
3. Erstellen Sie eine Kompositionsausdrucks-Animation mit einer Formel, die auf die Positionseigenschaft von InteractionTracker verweist.
4. Starten Sie die Animation für die Eigenschaft eines Composition Visual, die von InteractionTracker gesteuert werden soll.