Erstellen von Andockpunkten mit Unträgheitsmodifizierern

In diesem Artikel erfahren Sie, wie Sie mithilfe des InertiaModifier-Features von InteractionTracker Bewegungserlebnisse erstellen können, die an einem bestimmten Punkt in einer WinUI-App andocken.

In WinUI-Apps befinden sich InteractionTracker und die zugehörigen Inertia-Modifizierertypen im Microsoft.UI.Composition.Interactions-Namespace.

Voraussetzungen

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

• Eingabegesteuerte Animationen
• Benutzerdefinierte Manipulationserfahrungen mit InteractionTracker
• Beziehungsbasierte Animationen

Was sind Snap-Punkte und warum sind sie von Nutzen?

Beim Erstellen von benutzerdefinierten Manipulationserfahrungen kann es manchmal hilfreich sein, spezielle Positionspunkte innerhalb des scroll- und zoombaren Zeichenbereichs zu erstellen, an denen der InteractionTracker stets zur Ruhe kommt. Diese werden häufig als Andockpunkte bezeichnet.

Beachten Sie im folgenden Beispiel, wie der Bildlauf die Benutzeroberfläche in eine unvorteilhafte Position zwischen den verschiedenen Bildern versetzen kann:

Wenn Sie Snap-Punkte hinzufügen, "schnappen" die Bilder nach Beendigung des Scrollens an eine angegebene Position. Mit Andockpunkten wird das Scrollen durch Bilder wesentlich übersichtlicher und reaktionsfähiger.

InteractionTracker und InertiaModifier

Wenn Sie benutzerdefinierte Manipulationserlebnisse mit dem InteractionTracker erstellen, können Sie mithilfe von InertiaModifier Bewegungserlebnisse mit Andockpunkten erstellen. InertiaModifiers sind im Wesentlichen eine Möglichkeit, um zu definieren, wo oder wie der InteractionTracker sein Ziel erreicht, wenn er in den Trägheitszustand eintritt. Sie können InertiaModifiers anwenden, um die X- oder Y-Position oder die Skalierungseigenschaften von InteractionTracker zu beeinflussen.

Es gibt drei Arten von InertiaModifiern:

• InteractionTrackerInertiaRestingValue – eine Möglichkeit, die letzte Ruheposition nach einer Interaktion oder programmgesteuerten Geschwindigkeit zu ändern. Eine vordefinierte Bewegung wird den InteractionTracker zu dieser Position bringen.
• InteractionTrackerInertiaMotion – eine Möglichkeit, eine bestimmte Bewegung zu definieren, die der InteractionTracker nach einer Interaktion oder bei einer programmgesteuerten Geschwindigkeit ausführt. Die endgültige Position wird von dieser Bewegung abgeleitet.
• InteractionTrackerInertiaNaturalMotion – eine Möglichkeit, die endgültige Ruheposition nach einer Interaktion oder programmgesteuerten Geschwindigkeit, aber mit einer physikbasierten Animation (NaturalMotionAnimation) zu definieren.

Beim Eintritt in Inertia wertet der InteractionTracker jeden der ihm zugewiesenen Inertia-Modifikatoren aus und bestimmt, ob einer von ihnen zutrifft. Dies bedeutet, dass Sie mehrere InertiaModifier erstellen und einem InteractionTracker zuweisen können. Beim Definieren der einzelnen Schritte müssen Sie jedoch folgendes tun:

1. Definieren Sie die Bedingung – ein Ausdruck, der den Bedingungsausdruck definiert, wenn dieser spezifische InertiaModifier angewendet werden soll. Dies erfordert häufig einen Blick auf die NaturalRestingPosition von InteractionTracker (Ziel mit Standard-Inertia).
2. Definieren Sie RestingValue/Motion/NaturalMotion – definieren Sie die tatsächlichen "Resting Value Expression", "Motion Expression" oder "NaturalMotionAnimation", die ausgeführt werden, wenn die Bedingung erfüllt ist.

Hinweis

Der Bedingungsaspekt der InertiaModifiers wird nur einmal ausgewertet, wenn InteractionTracker Inertia eingibt. Allerdings wird der Bewegungsausdruck nur für InertiaMotion bei dem Modifizierer ausgewertet, dessen Bedingung wahr ist.

Beispiel

Sehen wir uns nun an, wie Sie InertiaModifiers verwenden können, um einige Erlebnisse mit Einrastpunkten zu erstellen, um die Scroll-Leinwand von Bildern neu zu erstellen. In diesem Beispiel soll jede Manipulation potenziell durch ein einzelnes Bild verschoben werden – dies wird häufig als "Einzelne obligatorische Schnapp-Punkte" bezeichnet.

Beginnen wir mit dem Einrichten von InteractionTracker, der VisualInteractionSource und dem Ausdruck, der die Position von InteractionTracker nutzt.

private void SetupInput()
{
    _tracker = InteractionTracker.Create(_compositor);
    _tracker.MinPosition = new Vector3(0f);
    _tracker.MaxPosition = new Vector3(3000f);

    _source = VisualInteractionSource.Create(_root);
    _source.ManipulationRedirectionMode =
        VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
    _source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;
    _tracker.InteractionSources.Add(_source);

    var scrollExp = _compositor.CreateExpressionAnimation("-tracker.Position.Y");
    scrollExp.SetReferenceParameter("tracker", _tracker);
    ElementCompositionPreview.GetElementVisual(scrollPanel).StartAnimation("Offset.Y", scrollExp);
}

Da ein einzelnes obligatorisches Snap-Punkt-Verhalten den Inhalt entweder nach oben oder unten verschiebt, benötigen Sie zwei verschiedene Trägheitsmodifizierer: einen, der den bildlauffähigen Inhalt nach oben verschiebt, und einen, der ihn nach unten verschiebt.

// Snap-Point to move the content up
var snapUpModifier = InteractionTrackerInertiaRestingValue.Create(_compositor);
// Snap-Point to move the content down
var snapDownModifier = InteractionTrackerInertiaRestingValue.Create(_compositor);

Gibt an, ob sie nach oben oder unten ausgerichtet werden sollen, basierend darauf, wo InteractionTracker natürlich relativ zum Andockabstand landen würde – der Abstand zwischen den Andockpositionen. Wenn der halbe Weg überschritten ist, dann nach unten schnappen, andernfalls nach oben schnappen. (In diesem Beispiel speichern Sie die Snap-Distanz in einem PropertySet)

// Is NaturalRestingPosition less than the halfway point between Snap Points?
snapUpModifier.Condition = _compositor.CreateExpressionAnimation(
"this.Target.NaturalRestingPosition.y < (this.StartingValue - " + 
"mod(this.StartingValue, prop.snapDistance) + prop.snapDistance / 2)");
snapUpModifier.Condition.SetReferenceParameter("prop", _propSet);
// Is NaturalRestingPosition greater than the halfway point between Snap Points?
snapDownModifier.Condition = _compositor.CreateExpressionAnimation(
"this.Target.NaturalRestingPosition.y >= (this.StartingValue - " + 
"mod(this.StartingValue, prop.snapDistance) + prop.snapDistance / 2)");
snapDownModifier.Condition.SetReferenceParameter("prop", _propSet);

Dieses Diagramm bietet eine visuelle Beschreibung der Logik, die stattfindet:

Jetzt müssen Sie nur die Ruhewerte für jeden InertiaModifier definieren: Verschieben Sie entweder die Position von InteractionTracker auf die vorherige Andockposition oder die nächste.

snapUpModifier.RestingValue = _compositor.CreateExpressionAnimation(
"this.StartingValue - mod(this.StartingValue, prop.snapDistance)");
snapUpModifier.RestingValue.SetReferenceParameter("prop", _propSet);
snapDownModifier.RestingValue = _compositor.CreateExpressionAnimation(
"this.StartingValue + prop.snapDistance - mod(this.StartingValue, " + 
"prop.snapDistance)");
snapDownModifier.RestingValue.SetReferenceParameter("prop", _propSet);

Fügen Sie schließlich die InertiaModifiers zu InteractionTracker hinzu. Wenn InteractionTracker nun seinen InertiaState eingibt, überprüft er die Bedingungen Ihrer InertiaModifier, um festzustellen, ob seine Position geändert werden soll.

var modifiers = new InteractionTrackerInertiaRestingValue[] { 
snapUpModifier, snapDownModifier };
_tracker.ConfigurePositionYInertiaModifiers(modifiers);