Auf Beziehungen basierende Animationen

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

Dynamische Beziehungsbasierte Erfahrungen

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

Diese Arten von Bewegungserfahrungen ermöglichen es Ihnen, eine Benutzeroberfläche zu erstellen, die sich stärker verbunden fühlt, anstatt singular und unabhängig zu fühlen. Für den Benutzer gibt dies den Eindruck einer dynamischen Ui-Erfahrung.

Verwenden von ExpressionAnimations

Zum Erstellen von beziehungsbasierten Bewegungsoberflächen verwenden Sie den ExpressionAnimation-Typ. ExpressionAnimations (oder Kurzausdrücke) sind eine neue Art von Animation, mit der Sie eine mathematische Beziehung ausdrücken können – eine Beziehung, die das System zum Berechnen des Werts einer Animationseigenschaft für jeden Frame verwendet. Anders ausgedrückt, Ausdrücke sind einfach eine mathematische Formel, die den gewünschten Wert einer Animationseigenschaft pro Frame definiert. Ausdrücke sind eine sehr vielseitige Komponente, die in einer Vielzahl von Szenarien verwendet werden kann, darunter:

• Relative Größe, Offsetanimationen.
• Sticky Headers, Parallax mit ScrollViewer. (Siehe Verbessern Sie vorhandene ScrollViewer-Erfahrungen.)
• Andockpunkte mit InertiaModifiern und InteractionTracker. (Siehe Erstellen Sie Andockpunkte mit Unträgheitsmodifizierern.)

Beim Arbeiten mit ExpressionAnimations gibt es ein paar Dinge, die im Vorfeld erwähnt werden müssen:

• Never Ending – im Gegensatz zu seinem gleichgeordneten KeyframeAnimation 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 auswählen.
• Laufen, aber nicht immer auswerten – die Leistung ist immer ein Problem mit Animationen, die ständig ausgeführt werden. Es muss sich jedoch keine Sorgen machen, das System ist smart genug, dass der Ausdruck nur dann erneut ausgewertet wird, wenn sich die Eingaben oder Parameter geändert haben.
• Auflösen in den richtigen Objekttyp – Da Ausdrücke mathematische Beziehungen sind, ist es wichtig, sicherzustellen, dass die Formel, die den Ausdruck definiert, in denselben Typ der Eigenschaft aufgelöst wird, die von der Animation bestimmt wird. Wenn Sie z. B. 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 Konstantenwerte oder Verweise auf andere Composition-Objekte darstellen.
• Mathematische Operatoren – die typischen mathematischen Operatoren plus(+), minus(-), multiplizieren(*), dividieren(/), die Parameter verbinden, um eine Formel zu bilden. 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 unterschiedliche 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.

Aus Gründen dieses Dokuments 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 typierte 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 erhalten kontinuierlich ihre Werte, nachdem eine Animation gestartet wurde.

Im Allgemeinen sind Verweise der Hauptaspekt, 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 (unter Verwendung ihres Ausdrucks für mehrere CompositionObjects), 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 Typen von Keyframes 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. Denken Sie daran, dass Sie eine ExpressionAnimation nicht als Wert des Keyframes übergeben, sondern eine Zeichenfolge (oder ein ExpressionNode, wenn Sie ExpressionBuilder verwenden).

Beispiel

Sehen wir uns nun ein Beispiel für die Verwendung von Ausdrücken an, insbesondere das PropertySet-Beispiel aus dem Windows-Ui-Beispielkatalog. Wir sehen uns den Ausdruck an, der das Orbitbewegungsverhalten des blauen Balls verwaltet.

Es gibt drei Komponenten für die gesamte Erfahrung:

1. Eine KeyFrameAnimation, die den Y-Offset des roten Balls animiert.
2. Ein PropertySet mit einer Rotation-Eigenschaft , die das Orbit steuert, animiert von einem anderen KeyFrameAnimation.
3. Eine ExpressionAnimation, die den Offset der blauen Kugel steuert, die auf den Red Ball Offset und die Rotation-Eigenschaft verweist, um eine perfekte Orbit zu erhalten.

Wir konzentrieren uns auf die in #3 definierte ExpressionAnimation. Außerdem verwenden wir die ExpressionBuilder-Klassen, um diesen Ausdruck zu erstellen. Eine Kopie des Codes, der zum Erstellen dieser Oberfläche über Zeichenfolgen verwendet wird, wird am Ende aufgeführt.

In dieser Formel gibt es zwei Eigenschaften, auf die Sie aus dem PropertySet verweisen müssen. ein Zentriertpunktversatz und der 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 kurzhand "using"-Schreibweise zum Definieren von ExpressionFunctions.

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

Kombinieren Sie diese Komponenten schließlich 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);

In einer hypothetischen Situation, was wäre, wenn Sie diesen Ausdruck verwenden möchten, aber mit zwei anderen visuellen Elementen, was bedeutet, dass 2 Sätze von Orbitkreisen. Mit CompositionAnimations können Sie die Animation wiederverwenden und mehrere CompositionObjects verwenden. Das einzige, was Sie ändern müssen, wenn Sie diesen Ausdruck für den zusätzlichen Orbitfall verwenden, ist der Verweis auf das Visuelle Element. Wir nennen diese Vorlagen.

In diesem Fall ändern Sie den zuvor erstellten Ausdruck. Anstatt einen Verweis auf das CompositionObject zu "abrufen", erstellen Sie einen Verweis mit einem Namen und weisen dann unterschiedliche 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);

Hier ist der 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);