Beziehungs basierte AnimationenRelation based animations

Dieser Artikel bietet einen kurzen Überblick über die Erstellung von Beziehungs basierten Animationen mithilfe der Komposition expressionanimation.This article provides a brief overview of how to make relation-based animations using Composition ExpressionAnimations.

Dynamische Beziehungs basierte ErfahrungenDynamic Relation-based Experiences

Bei der Erstellung von Bewegungs Erlebnissen in einer APP gibt es Zeiten, in denen die Bewegung nicht Zeit basiert ist, sondern von einer Eigenschaft eines anderen Objekts abhängig ist.When building out motion experiences in an app, there are times when the motion is not time-based, but rather dependent on a property on another object. Keyframeanimationen sind nicht in der Lage, diese Arten von Bewegungs Erlebnissen sehr leicht auszudrücken.KeyFrameAnimations are not able to express these types of motion experiences very easily. In diesen speziellen Fällen muss Motion nicht mehr diskret und vordefiniert sein.In these specific instances, motion no longer needs to be discrete and pre-defined. Stattdessen kann die Bewegung dynamisch basierend auf der Beziehung zu anderen Objekteigenschaften angepasst werden.Instead, the motion can dynamically adapt based on its relationship to other object properties. Beispielsweise können Sie die Deckkraft eines Objekts auf der Grundlage seiner horizontalen Position animieren.For example, you can animate the opacity of an object based on its horizontal position. Weitere Beispiele hierfür sind Bewegungsmöglichkeiten wie z. b. kurzkopfzeilen und die-ElementOther examples include motion experiences like Sticky Headers and Parallax.

Diese Art von Bewegungsmöglichkeiten ermöglicht es Ihnen, Benutzeroberflächen zu erstellen, die eine größere Verbindung haben, statt sich als Singular und unabhängig zu fühlen.These types of motion experiences let you create UI that feels more connected, instead of feeling singular and independent. Für den Benutzer hat dies einen Eindruck von einer dynamischen Benutzeroberfläche.To the user, this gives the impression of a dynamic UI experience.

Zirkel Umlauf

Listenansicht mit "initiallax"

Verwenden von expressionanimationenUsing ExpressionAnimations

Zum Erstellen von Beziehungs basierten Bewegungs Erlebnissen verwenden Sie den Typ expressionanimation.To create relation-based motion experiences, you use the ExpressionAnimation type. Expressionanimationen (oder Ausdrücke für Short) 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 animierten Eigenschaft jedes Frame zu berechnen.ExpressionAnimations (or Expressions for short), are a new type of animation that let you express a mathematical relationship – a relationship that the system uses to calculate the value of an animating property every frame. Anders ausgedrückt: Ausdrücke sind einfach eine mathematische Gleichung, die den gewünschten Wert einer animierenden Eigenschaft pro Frame definiert.Put another way, Expressions are simply a mathematical equation that defines the desired value of an animating property per frame. Ausdrücke sind eine sehr vielseitige Komponente, die in einer Vielzahl von Szenarios verwendet werden kann, einschließlich der folgenden:Expressions are a very versatile component that can be used across a wide variety of scenarios, including:

Beim Arbeiten mit expressionanimationen sind einige Dinge erwähnenswert:When working with ExpressionAnimations, there are a couple of things worth mentioning up front:

  • Niemals beenden – im Gegensatz zum gleich geordneten Keyframeanimation-Element haben Ausdrücke keine begrenzte Dauer.Never Ending – unlike its KeyFrameAnimation sibling, Expressions don’t have a finite duration. Da Ausdrücke mathematische Beziehungen sind, handelt es sich um Animationen, die ständig ausgeführt werden.Because Expressions are mathematical relationships, they are animations that are constantly "running". Wenn Sie auswählen, haben Sie die Möglichkeit, diese Animationen anzuhalten.You have the option to stop these animations if you choose.
  • Das Ausführen, aber nicht immer das Auswerten der –-Leistung ist immer ein Problem mit Animationen, die ständig ausgeführt werden.Running, but not always evaluating – performance is always a concern with animations that are constantly running. Es ist jedoch nicht erforderlich, dass das System intelligent genug ist, dass der Ausdruck nur neu ausgewertet wird, wenn eine der Eingaben oder Parameter geändert wurde.No need to worry though, the system is smart enough that the Expression will only re-evaluate if any of its inputs or parameters have changed.
  • Auflösen in den richtigen Objekttyp – da Ausdrücke mathematische Beziehungen sind, ist es wichtig sicherzustellen, dass die Gleichung, die den Ausdruck definiert, in denselben Typ der Eigenschaft aufgelöst wird, die Ziel der Animation ist.Resolving to the right object type – Because Expressions are mathematical relationships, it is important to make sure that the equation that defines the Expression resolves to the same type of the property being targeted by the animation. Wenn Sie z. b. den Offset animieren, sollte der Ausdruck in einen Vector3-Typ aufgelöst werden.For example, if animating Offset, your Expression should resolve to a Vector3 type.

Komponenten eines AusdrucksComponents of an Expression

Beim Aufbau der mathematischen Beziehung eines Ausdrucks gibt es mehrere Kernkomponenten:When building the mathematical relationship of an Expression, there are several core components:

  • Parameter – Werte, die Konstante Werte oder Verweise auf andere Kompositions Objekte darstellen.Parameters – values representing constant values or references to other Composition objects.
  • Mathematische Operatoren – die typischen mathematischen Operatoren Plus (+), minus (-), Multiplikation (*), Division (/), die Parameter zum bilden einer Gleichung zusammenfügen.Mathematical Operators – the typical mathematical operators plus(+), minus(-), multiply(*), divide(/) that join together parameters to form an equation. Die enthaltenen sind auch bedingte Operatoren wie größer als (>), gleich (= =), ternärer Operator (Bedingung?Also included are conditional operators such as greater than(>), equal(==), ternary operator (condition ? IfTrue: IfFalse) usw.ifTrue : ifFalse), etc.
  • Mathematische Funktionen – mathematische Funktionen/Verknüpfungen auf der Grundlage von "System. Numerics".Mathematical Functions – mathematical functions/shortcuts based on System.Numerics. Eine vollständige Liste der unterstützten Funktionen finden Sie unter expressionanimation.For a full list of supported functions, see ExpressionAnimation.

Ausdrücke unterstützen auch eine Reihe von Schlüsselwörtern – spezielle Ausdrücke, die nur innerhalb des expressionanimation-Systems unterschiedliche Bedeutungen haben.Expressions also support a set of keywords – special phrases that have distinct meaning only within the ExpressionAnimation system. Diese werden in der expressionanimation -Dokumentation (zusammen mit der vollständigen Liste der mathematischen Funktionen) aufgelistet.These are listed (along with the full list of math functions) in the ExpressionAnimation documentation.

Erstellen von Ausdrücken mit ExpressionBuilderCreating Expressions with ExpressionBuilder

Es gibt zwei Optionen zum Entwickeln von Ausdrücken in der UWP-App:There are two options for building Expressions in your UWP app:

  1. Erstellen Sie die Gleichung als Zeichenfolge über die offizielle öffentliche API.Build the equation as a string via the official, public API.
  2. Erstellen Sie die Gleichung in einem typsicheren Objektmodell über das Tool ExpressionBuilder, das im Windows Community Toolkitenthalten ist.Build the equation in a type-safe object model via the ExpressionBuilder tool included with the Windows Community Toolkit.

Für dieses Dokument definieren wir unsere Ausdrücke mithilfe von ExpressionBuilder.For the sake of this document, we will define our Expressions using ExpressionBuilder.

ParameterParameters

Parameter bilden den Kern eines Ausdrucks.Parameters make up the core of an Expression. Es gibt zwei Arten von Parametern:There are two types of parameters:

  • Konstanten: Dies sind Parameter, die typisierte System. numeric-Variablen darstellen.Constants: these are parameters representing typed System.Numeric variables. Diese Parameter erhalten ihre Werte einmal, wenn die Animation gestartet wird.These parameters get their values assigned once when the animation is started.
  • Verweise: Hierbei handelt es sich um Parameter, die Verweise auf compositionobjects darstellen – diese Parameter erhalten kontinuierlich ihre Werte, nachdem eine Animation gestartet wurde.References: these are parameters representing references to CompositionObjects – these parameters continuously get their values updated after an animation is started.

Im Allgemeinen sind Verweise der Hauptaspekt, wie sich die Ausgabe eines Ausdrucks dynamisch ändern kann.In general, References are the main aspect for how an Expression’s output can dynamically change. Wenn sich diese Verweise ändern, ändert sich die Ausgabe des Ausdrucks als Ergebnis.As these references change, the output of the Expression changes as a result. Wenn Sie den Ausdruck mit Zeichen folgen erstellen oder in einem Vorlagen Szenario verwenden (verwenden Sie den Ausdruck, um mehrere compositionobjects als Ziel festzulegen), müssen Sie die Werte der Parameter benennen und festlegen.If you create your Expression with Strings or use them in a templating scenario (using your Expression to target multiple CompositionObjects), you will need to name and set the values of your parameters. Weitere Informationen finden Sie im Abschnitt „Beispiel“.See the Example section for more info.

Arbeiten mit keyframeanimationenWorking with KeyFrameAnimations

Ausdrücke können auch mit Keyframeanimation verwendet werden.Expressions can also be used with KeyFrameAnimations. In diesen Fällen möchten Sie einen Ausdruck verwenden, um den Wert eines Keyframes zu einem Zeitpunkt zu definieren – diese typkeyframes werden als expressionkeyframes bezeichnet.In these instances, you want to use an Expression to define the value of a KeyFrame at a time spot – these types KeyFrames are called ExpressionKeyFrames.

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

Anders als bei expressionanimation werden expressionkeyframes jedoch nur einmal ausgewertet, wenn Keyframeanimation gestartet wird.However, unlike ExpressionAnimations, ExpressionKeyFrames are evaluated only once when the KeyFrameAnimation is started. Beachten Sie, dass Sie eine expressionanimation nicht als Wert für den Keyframe übergeben, sondern eine Zeichenfolge (oder ein ExpressionNode, wenn Sie ExpressionBuilder verwenden).Keep in mind, you do not pass in an ExpressionAnimation as the value of the KeyFrame, rather a string (or an ExpressionNode, if you're using ExpressionBuilder).

BeispielExample

Sehen wir uns nun ein Beispiel für die Verwendung von Ausdrücken an, insbesondere das PropertySet-Beispiel aus dem Beispiel Katalog der Windows-Benutzeroberfläche.Let's now walk through an example of using Expressions, specifically the PropertySet sample from the Windows UI Sample Gallery. Wir betrachten den Ausdruck, der das Verhalten der Umlaufbewegung der blauen Kugel verwaltet.We'll look at the Expression managing the orbit motion behavior of the blue ball.

Zirkel Umlauf

Es gibt drei Komponenten, die für die gesamte Darstellung verfügbar sind:There are three components at play for the total experience:

  1. Eine Keyframeanimation, die den Y-Offset der roten Kugel animiert.A KeyFrameAnimation, animating the Y Offset of the red ball.
  2. Ein PropertySet mit einer Rotations Eigenschaft, die die durch eine andere Keyframeanimation animierte Animation unterstützt.A PropertySet with a Rotation property that helps drives the orbit, animated by another KeyFrameAnimation.
  3. Eine expressionanimation, die den Offset der blauen Kugel, die auf den roten Kugel Offset verweist, und die Rotations Eigenschaft steuert, um eine perfekte Umlaufbahn zu erhalten.An ExpressionAnimation that drives the Offset of the blue ball referencing the Red Ball Offset and the Rotation property to maintain a perfect orbit.

Wir konzentrieren uns auf die expressionanimation, die in #3 definiert ist.We’ll be focusing on the ExpressionAnimation defined in #3. Wir verwenden auch die ExpressionBuilder-Klassen, um diesen Ausdruck zu erstellen.We will also be using the ExpressionBuilder classes to construct this Expression. Eine Kopie des Codes, der zum Erstellen dieser Benutzer Darstellung über Zeichen folgen verwendet wird, wird am Ende aufgeführt.A copy of the code used to build this experience via Strings is listed at the end.

In dieser Gleichung sind zwei Eigenschaften vorhanden, auf die vom PropertySet verwiesen werden muss. eine ist ein Mittelpunkt Offset, und die andere ist die Drehung.In this equation, there are two properties you need to reference from the PropertySet; one is a centerpoint offset and the other is the rotation.

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 Umlauf Drehung berücksichtigt.Next, you need to define the Vector3 component that accounts for the actual orbiting rotation.

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

Hinweis

EF ist eine Kurzschreibweise "using"-Notation zum Definieren von expressionfunctions.EF is a shorthand "using" notation to define ExpressionFunctions.

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

Kombinieren Sie schließlich diese Komponenten zusammen, und verweisen Sie auf die Position der roten Kugel, um die mathematische Beziehung zu definieren.Finally, combine these components together and reference the position of the Red Ball to define the mathematical relationship.

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

Wenn Sie in einer hypothetischen Situation denselben Ausdruck verwenden möchten, aber mit zwei anderen visuellen Elementen, bedeutet das, dass zwei Sätze von umkreisenden Kreisen.In a hypothetical situation, what if you wanted to use this same Expression but with two other Visuals, meaning 2 sets of orbiting circles. Mit compositionanimationen können Sie die Animation wieder verwenden und mehrere compositionobjects als Ziel verwenden.With CompositionAnimations, you can re-use the animation and target multiple CompositionObjects. Das einzige, was Sie ändern müssen, wenn Sie diesen Ausdruck für den zusätzlichen Umlauf Fall verwenden, ist der Verweis auf das visuelle Element.The only thing you need to change when you use this Expression for the additional orbit case is the reference to the Visual. Diese Vorlage wird als "Vorlage" bezeichnet.We call this templating.

In diesem Fall ändern Sie den Ausdruck, den Sie zuvor erstellt haben.In this case, you modify the Expression you built earlier. Anstatt einen Verweis auf das compositionobject zu erhalten, erstellen Sie einen Verweis mit einem Namen und weisen dann unterschiedliche Werte zu:Rather than "getting" a reference to the CompositionObject, you create a reference with a name and then assign different values:

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);

Dies ist der Code, wenn Sie Ihren Ausdruck mit Zeichen folgen über die öffentliche API definiert haben.Here is the code if you defined your Expression with Strings via the public API.

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);