Spring-Animationen

In diesem Artikel wird die Verwendung von Spring NaturalMotionAnimations in WinUI erläutert.

Voraussetzungen

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

• Animationen für natürliche Bewegungen

Warum Federn?

Federn sind eine übliche Bewegungserfahrung, die wir in unserem Leben gemacht haben; von Slinky-Spielzeugen bis hin zu Physik-Unterrichtserfahrungen mit einem Feder gebundenen Block. Die oszillierende Bewegung einer Feder erregt oft eine spielerische und hellherzige emotionale Reaktion von denjenigen, die es beobachten. Daher lässt sich die Bewegung einer Feder gut auf die Anwendungs-UI übertragen für diejenigen, die ein lebendigeres Bewegungsgefühl schaffen möchten, das dem Endbenutzer mehr auffällt als ein herkömmlicher Cubic Bezier. In diesen Fällen schafft Federbewegung nicht nur eine lebendigere Bewegungserfahrung, sondern kann auch die Aufmerksamkeit auf neue oder derzeit animierende Inhalte lenken. Je nach Anwendungsbranding oder Bewegungssprache ist die Oszillation ausgeprägter und sichtbarer, aber in anderen Fällen ist sie subtiler.

Verwenden von Federn in der Benutzeroberfläche

Wie bereits erwähnt, können Federn eine nützliche Bewegung sein, die Sie in Ihre WinUI-App integrieren können, um eine vertraute und spielerische Benutzeroberflächenerfahrung zu bieten. Gängige Anwendungen von "Springs" in der Benutzeroberfläche sind:

Beschreibung der Verwendung von Spring	Visuelles Beispiel
Lassen Sie eine Bewegungserfahrung lebendig wirken und lebendiger aussehen. (Animieren der Skalierung)
Die Bewegungserfahrung subtil energetischer gestalten (Offset animieren)

In jedem dieser Fälle kann die Federbewegung entweder durch "Springen nach" ausgelöst und um einen neuen Wert herum schwingen oder um ihren aktuellen Wert mit einer gewissen Anfangsgeschwindigkeit schwingen.

Definieren der Federbewegung

Sie erstellen eine Federn-Animationserfahrung mithilfe der NaturalMotionAnimation-APIs. Insbesondere erstellen Sie eine SpringNaturalMotionAnimation mithilfe der Create*-Methoden aus dem Kompositor. Anschließend können Sie die folgenden Eigenschaften der Bewegung definieren:

• DampingRatio – drückt den Grad der Dämpfung der Federbewegung aus, die in der Animation verwendet wird.

Dämpferverhältnis-Wert	Beschreibung
Dämpfungsverhältnis = 0	Ungedämpft – die Feder wird lange oszillieren
0 < Dämpfungsverhältnis < 1	Unterdamped – Feder wird von etwas zu viel oszillieren.
DampingRatio = 1	Kritisch gedämpft – die Feder führt keine Schwingung durch.
DampingRatio > 1	Überdamed – der Frühling erreicht schnell sein Ziel mit einer abrupten Verlangsamung und ohne Schwingung

• Periode – die Zeit, die eine Feder benötigt, um eine einzelne Schwingung auszuführen.
• End-/Anfangswert – definierte Anfangs- und Endpositionen der Federbewegung (wenn nicht definiert, ist startwert und/oder endwert der aktuelle Wert).
• Initial Velocity – programmgesteuerte Anfangsgeschwindigkeit für die Bewegung.

Sie können auch einen Satz von Eigenschaften der Bewegung definieren, die mit KeyFrameAnimations identisch sind:

• DelayTime / Verzögerungsverhalten
• StopBehavior

In den gängigen Fällen des Animierens von Offset und Scale/Size empfiehlt das Windows Design-Team die folgenden Werte für Dämpfungsverhältnis und Periode für verschiedene Arten von Federn:

Eigentum	Normaler Frühling	Gedämpfte Feder	Weniger stark gedämpfte Feder
Offset	Dämpfungsverhältnis = 0,8 Zeitraum = 50 ms	Dämpfungsverhältnis = 0,85 Zeitraum = 50 ms	Dämpfungsverhältnis = 0,65 Zeitraum = 60 ms
Skalieren/Größe	Dämpfungsverhältnis = 0,7 Zeitraum = 50 ms	Dämpfungsverhältnis = 0,8 Zeitraum = 50 ms	Dämpfungsverhältnis = 0,6 Zeitraum = 60 ms

Nachdem Sie die Eigenschaften definiert haben, können Sie Ihre Federung NaturalMotionAnimation an die StartAnimation-Methode eines CompositionObject oder an die Motion-Eigenschaft eines InteractionTracker InertiaModifier übergeben.

Beispiel

In diesem Beispiel erstellen Sie eine Navigations- und Canvas-Benutzeroberfläche, in der, wenn der Benutzer auf die Erweiterungsschaltfläche klickt, ein Navigationsbereich mit einer federnden, schwingenden Bewegung herausanimiert wird.

Definieren Sie zunächst die Federanimation innerhalb des angeklickten Ereignisses für den Zeitpunkt, an dem der Navigationsbereich angezeigt wird. Anschließend definieren Sie die Eigenschaften der Animation mithilfe des InitialValueExpression-Features, um einen Ausdruck zum Definieren des FinalValue zu verwenden. Sie können auch nachverfolgen, ob der Bereich geöffnet wird oder nicht, und starten Sie die Animation, wenn Sie bereit sind.

private void Button_Clicked(object sender, RoutedEventArgs e)
{
    _springAnimation = _compositor.CreateSpringScalarAnimation();
    _springAnimation.DampingRatio = 0.75f;
    _springAnimation.Period = TimeSpan.FromSeconds(0.5);

    if (!_expanded)
    {
        _expanded = true;
        _propSet.InsertBoolean("expanded", true);
        _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue + 250";
    }
    else
    {
        _expanded = false;
        _propSet.InsertBoolean("expanded", false);
        _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue - 250";
    }

    _naviPane.StartAnimation("Offset.X", _springAnimation);
}

Was ist nun, wenn Sie diese Bewegung mit eingaben verknüpfen möchten? Wenn der Endbenutzer also nach außen wischt, werden die Bereiche mit einer Federbewegung angezeigt? Wenn der Benutzer härter oder schneller streift, passt sich die Bewegung je nach Geschwindigkeit des Endbenutzers an.

Dazu können Sie die gleiche Federanimation übernehmen und in einen InertiaModifier mit einem InteractionTracker einfügen. Weitere Informationen zu InputAnimations und InteractionTracker finden Sie unter Benutzerdefinierte Manipulationsfunktionen mit InteractionTracker. Es wird davon ausgegangen, dass Sie für dieses Codebeispiel bereits Ihr InteractionTracker und VisualInteractionSource eingerichtet haben. Wir konzentrieren uns auf die Erstellung von InertiaModifiers, die eine NaturalMotion-Animation aufnehmen, in diesem Fall eine Feder.

// InteractionTracker and the VisualInteractionSource were previously set up.
// The open and close ScalarSpringAnimations were defined earlier.
private void SetupInput()
{
    // Define the InertiaModifier to manage the open motion.
    var openMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the open animation if the pane is not expanded.
    openMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == false");
    openMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    openMotionModifier.NaturalMotion = _openSpringAnimation;

    // Define the InertiaModifier to manage the close motion.
    var closeMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the close animation if the pane is expanded.
    closeMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == true");
    closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    closeMotionModifier.NaturalMotion = _closeSpringAnimation;

    _tracker.ConfigurePositionXInertiaModifiers(new InteractionTrackerInertiaNaturalMotion[]
    {
        openMotionModifier,
        closeMotionModifier,
    });

    // Take the InteractionTracker output and assign it to the pane.
    var exp = _compositor.CreateExpressionAnimation("-tracker.Position.X");
    exp.SetReferenceParameter("tracker", _tracker);

    ElementCompositionPreview.GetElementVisual(pageNavigation)
        .StartAnimation("Translation.X", exp);
}

Jetzt verfügen Sie sowohl über eine programmgesteuerte als auch über eine eingabegesteuerte Federanimation in Ihrer Benutzeroberfläche!

Zusammenfassend sind die Schritte zum Verwenden einer Federanimation in Ihrer App:

1. Erstellen Sie Ihre SpringAnimation aus Ihrem Kompositor.
2. Definieren Sie die Eigenschaften der SpringAnimation, wenn Sie nicht standardwerte Werte verwenden möchten:
   • Dämpfungsverhältnis
   • Period
   • Endwert
   • Anfangswert
   • Anfangsgeschwindigkeit
3. Ziel zuweisen.
   • Wenn Sie eine CompositionObject-Eigenschaft animieren, übergeben Sie SpringAnimation als Parameter an StartAnimation.
   • Wenn Sie mit Eingaben arbeiten möchten, legen Sie die NaturalMotion-Eigenschaft eines InertiaModifiers auf SpringAnimation fest.