Federanimationen

Der Artikel zeigt, wie Spring NaturalMotionAnimations verwendet wird.

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?

Springs sind eine gemeinsame Bewegungserfahrung, die wir an einem bestimmten Punkt in unserem Leben erlebt haben; von verlinkten Spielzeug bis hin zu Physik-Unterrichtserfahrungen mit einem federgebundenen Block. Die oszillierende Bewegung einer Feder erregt oft eine spielerische und hellherzige emotionale Reaktion von denjenigen, die es beobachten. Daher übersetzt sich die Bewegung einer Feder gut in die Anwendungs-UI für diejenigen, die eine lebendigere Bewegungserfahrung schaffen möchten, die dem Endbenutzer mehr "pops" als ein herkömmlicher Kubik-Bézier. 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, um in Ihre App zu integrieren, um eine sehr vertraute und spielerische UI-Erfahrung einzuführen. Häufige Verwendung von Federn in der Benutzeroberfläche sind:

Beschreibung der Federnutzung	Visuelles Beispiel
Machen Sie eine Bewegungserfahrung "Pop" und sehen Sie liveer. (Animieren der Skalierung)
Eine Bewegungserfahrung subtiler fühlen (Animieren von Offset)

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 Federerfahrung 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
DampingRatio = 0	Ungestempelt – die Feder wird lange schwingen
0 < DampingRatio < 1	Unterdamped – Feder wird von etwas zu viel oszillieren.
DampingRatio = 1	Kritisch verdammt – die Feder wird keine Schwingung durchführen.
DampingRation > 1	Überdamed – der Frühling erreicht schnell sein Ziel mit einer abrupten Verlangsamung und ohne Schwingung

• Zeitraum – die Zeit, die es dauert, um eine einzelne Schwingung durchzufü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 /Delay Behavior
• StopBehavior

In den gängigen Fällen beim Animieren von Offset und Scale/Size werden die folgenden Werte vom Windows Design-Team für DampingRatio und Period für verschiedene Arten von Federn empfohlen:

Eigenschaft	Normaler Frühling	Gedämpfte Feder	Weniger gedämpfte Feder
Abweichung	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 dann in Ihrer Feder NaturalMotionAnimation an die StartAnimation-Methode eines CompositionObject oder der Motion-Eigenschaft eines InteractionTracker InertiaModifier übergeben.

Beispiel

In diesem Beispiel erstellen Sie eine Navigations- und Canvas-BEnutzeroberfläche, in der ein Benutzer auf eine Erweiterungsschaltfläche klickt, ein Navigationsbereich mit einer federigen, oszillierenden Bewegung herausimiert 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 unsere Federanimation übernehmen und an einen InertiaModifier mit InteractionTracker übergeben. 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 der InertiaModifiers, die in einem NaturalMotionAnimation- in diesem Fall eine Feder einnehmen.

// InteractionTracker and the VisualInteractionSource previously setup
// The open and close ScalarSpringAnimations defined earlier
private void SetupInput()
{
 // Define the InertiaModifier to manage the open motion
 var openMotionModifer = InteractionTrackerInertiaNaturalMotion.Create(compositor);

 // Condition defines to use open animation if panes in non-expanded view
 // Property set value to track if open or closed is managed in other part of code
 openMotionModifer.Condition = _compositor.CreateExpressionAnimation(
"propset.expanded == false");
 openMotionModifer.Condition.SetReferenceParameter("propSet", _propSet);
 openMotionModifer.NaturalMotion = _openSpringAnimation;

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

 // Condition defines to use close animation if panes in expanded view
 // Property set value to track if open or closed is managed in other part of code
 closeMotionModifier.Condition = 
_compositor.CreateExpressionAnimation("propSet.expanded == true");
 closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
 closeMotionModifier.NaturalMotion = _closeSpringAnimation;

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

 // Take output of InteractionTracker and assign 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:
   • DampingRatio
   • Zeitraum
   • 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.