Auf Beziehungen basierende Animationen

  • Artikel

Dieser Artikel bietet eine kurze Übersicht über das Erstellen von beziehungsbasierten Animationen mithilfe von Composition ExpressionAnimations.

Dynamische Beziehungen basierende Erfahrungen

Beim Erstellen von Bewegungserfahrungen in einer App gibt es Situationen, in denen die Bewegung nicht zeitbasiert ist, sondern von einer Eigenschaft eines anderen Objekts abhängig ist. KeyFrameAnimations ist nicht in der Lage, diese Arten von Bewegungserfahrungen sehr einfach auszudrücken. In diesen spezifischen Fällen muss Bewegung nicht mehr diskret und vordefiniert sein. Stattdessen kann sich die Bewegung basierend auf ihrer Beziehung zu anderen Objekteigenschaften dynamisch anpassen. Beispielsweise können Sie die Deckkraft eines Objekts basierend auf seiner horizontalen Position animieren. Andere Beispiele sind Bewegungserfahrungen wie Sticky Headers und Parallax.

Mit diesen Arten von Bewegungserfahrungen können Sie ui erstellen, die sich stärker verbunden fühlt, anstatt sich einzigartig und unabhängig zu fühlen. Für den Benutzer vermittelt dies den Eindruck einer dynamischen Ui-Erfahrung.

Kreisumlaufbahn

Listenansicht mit Parallaxe

Verwenden von ExpressionAnimations

Um beziehungsbasierte Bewegungserfahrungen zu erstellen, verwenden Sie den ExpressionAnimation-Typ. ExpressionAnimations (oder kurz Expressions) sind eine neue Art von Animation, mit der Sie eine mathematische Beziehung ausdrücken können – eine Beziehung, die das System verwendet, um den Wert einer animierenden Eigenschaft für jeden Frame zu berechnen. Anders ausgedrückt, sind Ausdrücke einfach eine mathematische Gleichung, die den gewünschten Wert einer animierenden Eigenschaft pro Frame definiert. Ausdrücke sind eine sehr vielseitige Komponente, die in einer Vielzahl von Szenarien verwendet werden kann, einschließlich:

Bei der Arbeit mit ExpressionAnimations gibt es einige Dinge, die im Voraus erwähnt werden müssen:

  • Nie endend: Im Gegensatz zum gleichgeordneten KeyFrameAnimation-Element haben Ausdrücke keine endliche Dauer. Da Ausdrücke mathematische Beziehungen sind, handelt es sich um Animationen, die ständig "ausgeführt" werden. Sie haben die Möglichkeit, diese Animationen zu beenden, wenn Sie dies möchten.
  • Laufen, aber nicht immer auswerten – die Leistung ist immer ein Anliegen von Animationen, die ständig ausgeführt werden. Keine Sorge, das System ist intelligent genug, dass der Ausdruck nur dann neu auswertet, wenn sich eine seiner Eingaben oder Parameter geändert hat.
  • Auflösen in den richtigen Objekttyp: Da Ausdrücke mathematische Beziehungen sind, ist es wichtig, sicherzustellen, dass die Formel, die den Ausdruck definiert, in den gleichen Typ der Eigenschaft aufgelöst wird, auf die die Animation abzielt. Wenn Sie beispielsweise Offset animieren, sollte Ihr Ausdruck in einen Vector3-Typ aufgelöst werden.

Komponenten eines Ausdrucks

Beim Erstellen der mathematischen Beziehung eines Ausdrucks gibt es mehrere Kernkomponenten:

  • Parameter – Werte, die konstante Werte oder Verweise auf andere Composition-Objekte darstellen.
  • Mathematische Operatoren : die typischen mathematischen Operatoren plus(+), minus(-), multiply(*), divide(/), die Parameter zu einer Gleichung zusammenschließen. Außerdem sind bedingte Operatoren wie größer als(>), equal(==), ternärer Operator (Bedingung ? ifTrue : ifFalse) usw. enthalten.
  • Mathematische Funktionen – mathematische Funktionen/Tastenkombinationen basierend auf System.Numerics. Eine vollständige Liste der unterstützten Funktionen finden Sie unter ExpressionAnimation.

Ausdrücke unterstützen auch eine Reihe von Schlüsselwörtern – spezielle Ausdrücke, die nur innerhalb des ExpressionAnimation-Systems eine eindeutige Bedeutung haben. Diese werden (zusammen mit der vollständigen Liste der mathematischen Funktionen) in der ExpressionAnimation-Dokumentation aufgeführt.

Erstellen von Ausdrücken mit ExpressionBuilder

Es gibt zwei Optionen zum Erstellen von Ausdrücken in Ihrer UWP-App:

  1. Erstellen Sie die Formel als Zeichenfolge über die offizielle, öffentliche API.
  2. Erstellen Sie die Formel in einem typsicheren Objektmodell über das ExpressionBuilder-Tool, das im Windows Community Toolkit enthalten ist.

In diesem Dokument definieren wir unsere Ausdrücke mithilfe von ExpressionBuilder.

Parameter

Parameter bilden den Kern eines Ausdrucks. Es gibt zwei Arten von Parametern:

  • Konstanten: Dies sind Parameter, die typisierte System.Numeric-Variablen darstellen. Diese Parameter erhalten ihre Werte einmal zugewiesen, wenn die Animation gestartet wird.
  • Verweise: Dies sind Parameter, die Verweise auf CompositionObjects darstellen. Diese Parameter werden nach dem Starten einer Animation kontinuierlich aktualisiert.

Im Allgemeinen sind Verweise der Standard Aspekt, wie sich die Ausgabe eines Ausdrucks dynamisch ändern kann. Wenn sich diese Verweise ändern, ändert sich die Ausgabe des Ausdrucks als Ergebnis. Wenn Sie Ihren Ausdruck mit Zeichenfolgen erstellen oder sie in einem Vorlagenszenario verwenden (indem Sie Ihren Ausdruck für mehrere CompositionObjects verwenden), müssen Sie die Werte Ihrer Parameter benennen und festlegen. Weitere Informationen finden Sie im Abschnitt „Beispiel“.

Arbeiten mit KeyFrameAnimations

Ausdrücke können auch mit KeyFrameAnimations verwendet werden. In diesen Fällen möchten Sie einen Ausdruck verwenden, um den Wert eines KeyFrames zu einem bestimmten Zeitpunkt zu definieren. Diese Keyframetypen werden als ExpressionKeyFrames bezeichnet.

KeyFrameAnimation.InsertExpressionKeyFrame(Single, String)
KeyFrameAnimation.InsertExpressionKeyFrame(Single, ExpressionNode)

Im Gegensatz zu ExpressionAnimations werden ExpressionKeyFrames jedoch nur einmal ausgewertet, wenn die KeyFrameAnimation gestartet wird. Beachten Sie, dass Sie keine ExpressionAnimation als Wert des KeyFrames übergeben, sondern eine Zeichenfolge (oder einen ExpressionNode, wenn Sie ExpressionBuilder verwenden).

Beispiel

Nun sehen wir uns ein Beispiel für die Verwendung von Ausdrücken an, insbesondere das PropertySet-Beispiel aus dem Beispielkatalog der Windows-Benutzeroberfläche. Wir sehen uns den Ausdruck an, der das Orbitbewegungsverhalten der blauen Kugel verwaltet.

Kreisumlaufbahn

Es gibt drei Komponenten, die für die Gesamterfahrung verwendet werden:

  1. Eine KeyFrameAnimation, die den Y-Offset des roten Balls animiert.
  2. Ein PropertySet mit einer Rotationseigenschaft , die den Orbit animiert von einer anderen KeyFrameAnimation animiert.
  3. Eine ExpressionAnimation, die den Offset der blauen Kugel steuert, die auf den Red Ball Offset und die Rotation-Eigenschaft verweist, um einen perfekten Orbit aufrechtzuerhalten.

Wir konzentrieren uns auf die expressionAnimation, die in #3 definiert ist. Wir verwenden auch die ExpressionBuilder-Klassen, um diesen Ausdruck zu erstellen. Eine Kopie des Codes, der zum Erstellen dieser Benutzeroberfläche über Zeichenfolgen verwendet wird, ist am Ende aufgeführt.

In dieser Formel gibt es zwei Eigenschaften, auf die Sie aus dem PropertySet verweisen müssen. eine ist ein Mittelpunktoffset und das andere ist die Drehung.

var propSetCenterPoint =
_propertySet.GetReference().GetVector3Property("CenterPointOffset");

// This rotation value will animate via KFA from 0 -> 360 degrees
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");

Als Nächstes müssen Sie die Vector3-Komponente definieren, die die tatsächliche Orbitdrehung berücksichtigt.

var orbitRotation = EF.Vector3(
    EF.Cos(EF.ToRadians(propSetRotation)) * 150,
    EF.Sin(EF.ToRadians(propSetRotation)) * 75, 0);

Hinweis

EF ist eine kurz verwendete Notation zum Definieren von ExpressionFunctions.

using EF = Microsoft.Toolkit.Uwp.UI.Animations.Expressions.ExpressionFunctions;

Kombinieren Sie schließlich diese Komponenten zusammen, und verweisen Sie auf die Position des Roten Balls, um die mathematische Beziehung zu definieren.

var orbitExpression = redSprite.GetReference().Offset + propSetCenterPoint + orbitRotation;
blueSprite.StartAnimation("Offset", orbitExpression);

Was wäre, wenn Sie in einer hypothetischen Situation denselben Ausdruck verwenden möchten, aber mit zwei anderen Visuals, d. h. zwei Sätze von Kreisumkreisen. Mit CompositionAnimations können Sie die Animation wiederverwenden und mehrere CompositionObjects als Ziel verwenden. Das einzige, was Sie ändern müssen, wenn Sie diesen Ausdruck für den zusätzlichen Orbit-Fall verwenden, ist der Verweis auf das Visual. Wir nennen diese Vorlagen.

In diesem Fall ändern Sie den zuvor erstellten Ausdruck. Anstatt einen Verweis auf das CompositionObject zu "erhalten", erstellen Sie einen Verweis mit einem Namen und weisen dann andere Werte zu:

var orbitExpression = ExpressionValues.Reference.CreateVisualReference("orbitRoundVisual");
orbitExpression.SetReferenceParameter("orbitRoundVisual", redSprite);
blueSprite.StartAnimation("Offset", orbitExpression);
// Later on … use same Expression to assign to another orbiting Visual
orbitExpression.SetReferenceParameter("orbitRoundVisual", yellowSprite);
greenSprite.StartAnimation("Offset", orbitExpression);

Im Folgenden finden Sie den Code, wenn Sie Ihren Ausdruck mit Zeichenfolgen über die öffentliche API definiert haben.

ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("visual.Offset + " +
    "propertySet.CenterPointOffset + " +
    "Vector3(cos(ToRadians(propertySet.Rotation)) * 150," + "sin(ToRadians(propertySet.Rotation)) * 75, 0)");
    
var propSetCenterPoint = _propertySet.GetReference().GetVector3Property("CenterPointOffset");
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");
expressionAnimation.SetReferenceParameter("propertySet", _propertySet);
expressionAnimation.SetReferenceParameter("visual", redSprite);