Eingabegesteuerte AnimationenInput-driven animations

Dieser Artikel bietet eine Einführung in die inputanimation-API und empfiehlt die Verwendung dieser Animations Typen in der Benutzeroberfläche.This article provides an introduction to the InputAnimation API, and recommends how to use these types of animations in your UI.

VoraussetzungenPrerequisites

Wir gehen davon aus, dass Sie mit den Konzepten vertraut sind, die in den folgenden Artikeln erläutert werden:Here, we assume that you're familiar with the concepts discussed in these articles:

Reibungslose Bewegung von BenutzerinteraktionenSmooth motion driven from user interactions

In der Sprache "fließend Design" ist die Interaktion zwischen Endbenutzern und apps von größter Wichtigkeit.In the Fluent Design language, interaction between end users and apps is of the utmost importance. Apps müssen nicht nur den Teil sehen, sondern auch natürlich und dynamisch auf die Benutzer reagieren, die mit ihnen interagieren.Apps not only have to look the part, but also respond naturally and dynamically to the users that interact with them. Dies bedeutet, wenn ein Finger auf dem Bildschirm platziert wird, sollte die Benutzeroberfläche ordnungsgemäß auf veränderliche Grad der Eingabe reagieren. der Bildlauf sollte glatt sein und auf dem Bildschirm auf einen Finger schwenken zeigen.This means when a finger is placed on the screen, the UI should gracefully react to changing degrees of input; scrolling should feel smooth, and stick to a finger panning across the screen.

Die Erstellung einer Benutzeroberfläche, die dynamisch und fließend auf Benutzereingaben reagiert, führt zu einer höheren Benutzer Bindung, die jetzt nicht nur in Ordnung ist, sondern sich gut und natürlich bewährt, wenn Benutzer mit ihren unterschiedlichen Benutzeroberflächen Erfahrungen interagieren.Building UI that dynamically and fluidly responds to user input results in higher user engagement - Motion now not only looks good, but feels good and natural when users interact with your different UI experiences. Dies ermöglicht es Endbenutzern, eine einfachere Verbindung mit Ihrer Anwendung herzustellenThis enables end users to more easily connect with your application, making the experience more memorable and delightful.

Erweitern der früheren InteraktionExpanding past just touch

Obwohl die Berührungs Weise eine der gängigeren Schnittstellen ist, die Endbenutzer verwenden, um UI-Inhalte zu bearbeiten, verwenden Sie auch verschiedene andere Eingabemethoden, z. b. Maus und Stift.Although touch is one of the more common interfaces end users use to manipulate UI content, they will also use various other input modalities such mouse and pen. In diesen Fällen ist es wichtig, dass Endbenutzer erkennen, dass Ihre Benutzeroberfläche dynamisch auf Ihre Eingaben antwortet, unabhängig davon, welche Eingabe Modalität Sie verwenden möchten.In these cases, it is important that end users perceive that your UI responds dynamically to their input, regardless of what input modality they choose to use. Sie sollten die verschiedenen Eingabe Modalitäten erkennen, wenn Sie eine Eingabe gesteuerte Bewegungserfahrung entwerfen.You should be cognizant of the different input modalities when designing input-driven motion experiences.

Unterschiedliche Eingabe gesteuerte BewegungsmöglichkeitenDifferent Input-Driven Motion Experiences

Der inputanimation-Bereich bietet verschiedene unterschiedliche Möglichkeiten zum Erstellen dynamisch Reaktions ender Bewegungen.The InputAnimation space provides several different experiences for you to create dynamically responding motion. Ebenso wie der Rest des Windows-UI-Animations Systems arbeiten diese Eingabe gesteuerten Animationen in einem unabhängigen Thread, der zur dynamischen Bewegungs Darstellung beiträgt.Like the rest of the Windows UI Animation system, these input-driven animations operate on an independent thread, which helps contribute to the dynamic motion experience. In einigen Fällen, in denen die Benutzeroberfläche vorhandene XAML-Steuerelemente und-Komponenten nutzt, sind Teile dieser Oberflächen weiterhin UI-Thread gebunden.However, in some cases where the experience leverages existing XAML controls and components, parts of those experiences are still UI thread bound.

Es gibt drei grundlegende Benutzeroberflächen, die Sie beim Erstellen dynamischer Eingabe gesteuerte Bewegungs Animationen erstellen können:There are three core experiences that you create when building dynamic input-driven motion animations:

  1. Verbessern vorhandener ScrollView-Funktionen – aktivieren Sie die Position eines XAML ScrollViewer, um dynamische Animations Funktionen zu fördern.Enhancing Existing ScrollView Experiences – enable the position of a XAML ScrollViewer to drive dynamic animation experiences.
  2. Zeiger Positions gesteuerte Oberflächen – verwenden Sie die Position eines Cursors auf einem Treffer geprüften UIElement, um dynamische Animations Funktionen zu fördern.Pointer Position-driven Experiences – utilize the position of a cursor on a hit tested UIElement to drive dynamic animation experiences.
  3. Benutzerdefinierte Manipulations Erfahrung mit interaktiontracker – erstellen Sie eine vollständig angepasste, nicht Thread gesteuerte Bearbeitungsumgebung mit interaktiontracker (z. b. ein Scroll-/Zoom-Canvas).Custom Manipulation experiences with InteractionTracker – create a fully customized, off-thread manipulation experiences with InteractionTracker (such as a scrolling/zooming canvas).

Verbessern vorhandener ScrollViewer-ErfahrungenEnhancing Existing ScrollViewer Experiences

Eine der gängigsten Möglichkeiten, dynamischere Umgebungen zu erstellen, besteht darin, ein vorhandenes XAML ScrollViewer-Steuerelement zu erstellen.One of the common ways to create more dynamic experiences is to build on top of an existing XAML ScrollViewer control. In diesen Fällen nutzen Sie die Scrollposition eines ScrollViewer-Steuerelemente, um zusätzliche Benutzeroberflächen Komponenten zu erstellen, die eine einfache Bild Lauf Darstellung dynamischer gestalten.In these situations, you leverage the scroll position of a ScrollViewer to create additional UI components that make a simple scrolling experience more dynamic. Beispiele hierfür sind Kurznotiz/scheue Header und eine Element-/Warnung.Some examples include Sticky/Shy Headers and Parallax.

Listenansicht mit "initiallax"

Ein Scheuer Header

Beim Erstellen dieser Arten von Erfahrungen gibt es eine allgemeine Formel, die befolgt werden muss:When creating these types of experiences, there is a general formula to follow:

  1. Greifen Sie auf das scrollmanipulationpropertyset aus dem XAML ScrollViewer zu, um eine Animation zu steuern.Access the ScrollManipulationPropertySet off of the XAML ScrollViewer you wish to drive an animation.
    • Durchgeführt über die elementcompositionpreview. getscrollviewermanipulationpropertyset (UIElement-Element)-APIDone via the ElementCompositionPreview.GetScrollViewerManipulationPropertySet(UIElement element) API
    • Gibt ein compositionpropertyset mit einer Eigenschaft namens Translation zurück.Returns a CompositionPropertySet containing a property called Translation
  2. Erstellen Sie eine Komposition expressionanimation mit einer Gleichung, die auf die Translation-Eigenschaft verweist.Create a Composition ExpressionAnimation with an equation that references the Translation property.
  3. Starten Sie die Animation für die-Eigenschaft eines compositionobject.Start the animation on a CompositionObject’s property.

Weitere Informationen zum Entwickeln dieser Erfahrungen finden Sie unter verbessern vorhandener ScrollViewer-Erfahrungen.For more info on building these experiences, see Enhance existing ScrollViewer experiences.

Zeiger Positions gesteuerte OberflächenPointer Position-driven experiences

Eine andere häufige dynamische Darstellung mit Eingaben besteht darin, eine Animation auf der Grundlage der Position eines Zeigers (z. b. eines Mauszeigers) zu steuern.Another common dynamic experience involving input is to drive an animation based on the position of a pointer such as a Mouse cursor. In diesen Fällen nutzen Entwickler die Position eines Cursors, wenn der Treffer in einem XAML-UIElement getestet wird, das das Erstellen von Erlebnissen wie Spotlight ermöglicht.In these situations, developers leverage the location of a cursor when hit tested within a XAML UIElement that makes experiences like Spotlight Reveal possible to create.

Beispiel für Zeiger Spotlight

Beispiel für Zeiger Drehung

Beim Erstellen dieser Arten von Erfahrungen gibt es eine allgemeine Formel, die befolgt werden muss:When creating these types of experiences, there is a general formula to follow:

  1. Greifen Sie in einem XAML-UIElement auf das pointerpositionpropertyset zu, um die Cursorposition bei Treffer Tests zu kennen.Access the PointerPositionPropertySet off a XAML UIElement that you wish to know the cursor position when hit tested.
    • Abgeschlossen über die elementcompositionpreview. getpointerpositionpropertyset (UIElement-Element)-APIDone via the ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element) API
    • Gibt ein compositionpropertyset zurück, das eine Eigenschaft namens Position enthält.Returns a CompositionPropertySet containing a property called Position
  2. Erstellen Sie eine compositionexpressionanimation mit einer Gleichung, die auf die Positions Eigenschaft verweist.Create a CompositionExpressionAnimation with an equation that references the Position property.
  3. Starten Sie die Animation für die-Eigenschaft eines compositionobject.Start the animation on a CompositionObject’s property.

Benutzerdefinierte Manipulations Erfahrung mit interaktiontrackerCustom manipulation experiences with InteractionTracker

Eine der Herausforderungen bei der Verwendung eines XAML-ScrollViewers besteht darin, dass Sie an den UI-Thread gebunden ist.One of the challenges with utilizing a XAML ScrollViewer is that it is bound to the UI thread. Folglich kann das Scrollen und Zoomen häufig verzögert werden und Jitter, wenn der UI-Thread ausgelastet wird und zu einer nicht ansprechenden Benutzeroberfläche führt.As a result, the scrolling and zooming experience can often lag and jitter if the UI thread becomes busy and results in an unappealing experience. Außerdem ist es nicht möglich, viele Aspekte der ScrollViewer-Darstellung anzupassen.In addition, it is not possible to customize many aspects of the ScrollViewer experience. Interaktiontracker wurde erstellt, um beide Probleme zu lösen, indem eine Reihe von Bausteinen bereitgestellt werden, um benutzerdefinierte Bearbeitungs Umgebungen zu erstellen, die in einem unabhängigen Thread ausgeführt werden.InteractionTracker was created to solve both issues by providing a set of building blocks to create custom manipulation experiences that are run on an independent thread.

Beispiel für 3D-Interaktionen

Pull to animieren (Beispiel)

Beim Erstellen von Erfahrungen mit interaktiontracker gibt es eine allgemeine Formel, die befolgt werden muss:When creating experiences with InteractionTracker, there is a general formula to follow:

  1. Erstellen Sie das interaktiontracker-Objekt, und definieren Sie seine Eigenschaften.Create your InteractionTracker object and define its properties.
  2. Erstellen Sie visualinteraktionsources für ein beliebiges compositionvisual, das Eingaben erfassen soll, die von interaktiontracker verwendet werden sollen.Create VisualInteractionSources for any CompositionVisual that should capture input for InteractionTracker to consume.
  3. Erstellen Sie eine Komposition expressionanimation mit einer Gleichung, die auf die Positions Eigenschaft von interaktiontracker verweist.Create a Composition ExpressionAnimation with an equation that references the Position property of InteractionTracker.
  4. Starten Sie die Animation für die Eigenschaft einer Kompositions Visualisierung, die Sie von interaktiontracker gesteuert werden möchten.Start the animation on a Composition Visual’s property that you wish to be driven by InteractionTracker.