Animations basées sur les relationsRelation based animations

Cet article fournit une brève présentation de la création d’animations basées sur les relations à l’aide de la composition ExpressionAnimations.This article provides a brief overview of how to make relation-based animations using Composition ExpressionAnimations.

Expériences dynamiques basées sur les relationsDynamic Relation-based Experiences

Lors de la création d’expériences de mouvement dans une application, il peut arriver que le mouvement ne soit pas basé sur le temps, mais plutôt dépendant d’une propriété sur un autre objet.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. Les KeyFrameAnimations ne sont pas en mesure d’exprimer très facilement ces types d’expériences de mouvement.KeyFrameAnimations are not able to express these types of motion experiences very easily. Dans ces instances spécifiques, motion ne doit plus être discret et prédéfini.In these specific instances, motion no longer needs to be discrete and pre-defined. Au lieu de cela, le mouvement peut s’adapter dynamiquement en fonction de sa relation aux autres propriétés de l’objet.Instead, the motion can dynamically adapt based on its relationship to other object properties. Par exemple, vous pouvez animer l’opacité d’un objet en fonction de sa position horizontale.For example, you can animate the opacity of an object based on its horizontal position. D’autres exemples incluent des expériences de mouvement comme les en-têtes et le parallaxe.Other examples include motion experiences like Sticky Headers and Parallax.

Ces types d’expériences de mouvement vous permettent de créer une interface utilisateur qui semble plus connectée, au lieu d’en faire un singulier et indépendant.These types of motion experiences let you create UI that feels more connected, instead of feeling singular and independent. Pour l’utilisateur, cela donne l’impression d’une expérience d’interface utilisateur dynamique.To the user, this gives the impression of a dynamic UI experience.

Cercle d’orbite

Mode liste avec parallaxe

Utilisation de ExpressionAnimationsUsing ExpressionAnimations

Pour créer des expériences de mouvement basées sur les relations, vous utilisez le type ExpressionAnimation.To create relation-based motion experiences, you use the ExpressionAnimation type. ExpressionAnimations (ou expressions pour Short) est un nouveau type d’animation qui vous permet d’exprimer une relation mathématique : une relation que le système utilise pour calculer la valeur d’une propriété d’animation à chaque trame.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. En d’autres termes, les expressions sont simplement une équation mathématique qui définit la valeur souhaitée d’une propriété d’animation par image.Put another way, Expressions are simply a mathematical equation that defines the desired value of an animating property per frame. Les expressions sont un composant très polyvalent qui peut être utilisé dans un large éventail de scénarios, notamment :Expressions are a very versatile component that can be used across a wide variety of scenarios, including:

Lorsque vous travaillez avec ExpressionAnimations, il est important de mentionner les points suivants :When working with ExpressionAnimations, there are a couple of things worth mentioning up front:

  • Ne jamais se terminer, contrairement à son frère KeyFrameAnimation, les expressions n’ont pas une durée finie.Never Ending – unlike its KeyFrameAnimation sibling, Expressions don’t have a finite duration. Étant donné que les expressions sont des relations mathématiques, il s’agit d’animations qui sont constamment « en cours d’exécution ».Because Expressions are mathematical relationships, they are animations that are constantly "running". Vous avez la possibilité d’arrêter ces animations si vous le souhaitez.You have the option to stop these animations if you choose.
  • En cours d’exécution, mais pas toujours en cours d’évaluation, les performances sont toujours un problème avec les animations qui s’exécutent en permanence.Running, but not always evaluating – performance is always a concern with animations that are constantly running. Vous n’avez pas besoin de vous préoccuper du fait que le système est suffisamment intelligent pour que l’expression ne soit réévaluée que si l’une de ses entrées ou ses paramètres a changé.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.
  • Résolution vers le type d’objet approprié : étant donné que les expressions sont des relations mathématiques, il est important de s’assurer que l’équation qui définit l’expression correspond au même type de la propriété ciblée par l’animation.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. Par exemple, en cas d’animation du décalage, votre expression doit être résolue en un type Vector3.For example, if animating Offset, your Expression should resolve to a Vector3 type.

Composants d’une expressionComponents of an Expression

Lors de la création de la relation mathématique d’une expression, il existe plusieurs composants principaux :When building the mathematical relationship of an Expression, there are several core components:

  • Parameters : valeurs représentant des valeurs constantes ou des références à d’autres objets composition.Parameters – values representing constant values or references to other Composition objects.
  • Opérateurs mathématiques : opérateurs mathématiques classiques plus (+), moins (-), multiplication (*), Division (/) qui associent des paramètres pour former une équation.Mathematical Operators – the typical mathematical operators plus(+), minus(-), multiply(*), divide(/) that join together parameters to form an equation. Les opérateurs conditionnels tels que supérieur à (>), égal (= =), ternaire Operator (condition) sont également inclus.Also included are conditional operators such as greater than(>), equal(==), ternary operator (condition ? ifTrue : ifFalse), etc.ifTrue : ifFalse), etc.
  • Fonctions mathématiques : fonctions mathématiques/raccourcis basés sur System. Numerics.Mathematical Functions – mathematical functions/shortcuts based on System.Numerics. Pour obtenir la liste complète des fonctions prises en charge, consultez ExpressionAnimation.For a full list of supported functions, see ExpressionAnimation.

Les expressions prennent également en charge un ensemble de mots clés (expressions spéciales qui ont une signification distincte uniquement dans le système ExpressionAnimation).Expressions also support a set of keywords – special phrases that have distinct meaning only within the ExpressionAnimation system. Celles-ci sont répertoriées (ainsi que la liste complète des fonctions mathématiques) dans la documentation ExpressionAnimation .These are listed (along with the full list of math functions) in the ExpressionAnimation documentation.

Création d’expressions avec ExpressionBuilderCreating Expressions with ExpressionBuilder

Il existe deux options pour créer des expressions dans votre application UWP :There are two options for building Expressions in your UWP app:

  1. Générez l’équation sous forme de chaîne via l’API publique officielle.Build the equation as a string via the official, public API.
  2. Générez l’équation dans un modèle objet de type sécurisé via l’outil ExpressionBuilder inclus dans le kit de développement de la communauté Windows.Build the equation in a type-safe object model via the ExpressionBuilder tool included with the Windows Community Toolkit.

Pour les besoins de ce document, nous allons définir nos expressions à l’aide de ExpressionBuilder.For the sake of this document, we will define our Expressions using ExpressionBuilder.

ParamètresParameters

Les paramètres constituent le cœur d’une expression.Parameters make up the core of an Expression. Il existe deux types de paramètres :There are two types of parameters:

  • Constantes : il s’agit de paramètres représentant des variables typées System. Numeric.Constants: these are parameters representing typed System.Numeric variables. Ces paramètres voient leurs valeurs affectées une fois que l’animation est démarrée.These parameters get their values assigned once when the animation is started.
  • Références : ces paramètres représentent des références à CompositionObjects : ces paramètres obtiennent en continu leurs valeurs mises à jour après le démarrage d’une animation.References: these are parameters representing references to CompositionObjects – these parameters continuously get their values updated after an animation is started.

En général, les références sont l’aspect principal de la façon dont la sortie d’une expression peut changer dynamiquement.In general, References are the main aspect for how an Expression’s output can dynamically change. À mesure que ces références changent, la sortie de l’expression change en conséquence.As these references change, the output of the Expression changes as a result. Si vous créez votre expression avec des chaînes ou si vous les utilisez dans un scénario de création de modèles (à l’aide de votre expression pour cibler plusieurs CompositionObjects), vous devez nommer et définir les valeurs de vos paramètres.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. Voir la section Exemple pour plus d'informations.See the Example section for more info.

Utilisation de KeyFrameAnimationsWorking with KeyFrameAnimations

Les expressions peuvent également être utilisées avec KeyFrameAnimations.Expressions can also be used with KeyFrameAnimations. Dans ce cas, vous souhaitez utiliser une expression pour définir la valeur d’une image clé à un moment donné. ces types de trames sont appelés ExpressionKeyFrames.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)

Toutefois, contrairement à ExpressionAnimations, les ExpressionKeyFrames ne sont évalués qu’une seule fois lorsque le KeyFrameAnimation est démarré.However, unlike ExpressionAnimations, ExpressionKeyFrames are evaluated only once when the KeyFrameAnimation is started. N’oubliez pas que vous ne transmettez pas un ExpressionAnimation en tant que valeur de l’image clé, plutôt qu’une chaîne (ou un ExpressionNode, si vous utilisez ExpressionBuilder).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).

 ExempleExample

Passons maintenant en revue un exemple d’utilisation d’expressions, en particulier l’exemple PropertySet de la Galerie d’exemples d’interfaces utilisateur Windows.Let's now walk through an example of using Expressions, specifically the PropertySet sample from the Windows UI Sample Gallery. Nous allons examiner l’expression qui gère le comportement de mouvement orbite de la boule bleue.We'll look at the Expression managing the orbit motion behavior of the blue ball.

Cercle d’orbite

Il existe trois composants en lecture pour l’expérience totale :There are three components at play for the total experience:

  1. Un KeyFrameAnimation, en animant le décalage Y de la boule rouge.A KeyFrameAnimation, animating the Y Offset of the red ball.
  2. PropertySet avec une propriété de rotation qui permet de piloter l’orbite, animée par un autre KeyFrameAnimation.A PropertySet with a Rotation property that helps drives the orbit, animated by another KeyFrameAnimation.
  3. Un ExpressionAnimation qui pilote le décalage de la boule bleue référençant le décalage de la bille rouge et la propriété de rotation pour maintenir un orbite parfait.An ExpressionAnimation that drives the Offset of the blue ball referencing the Red Ball Offset and the Rotation property to maintain a perfect orbit.

Nous nous concentrerons sur le ExpressionAnimation défini dans #3.We’ll be focusing on the ExpressionAnimation defined in #3. Nous utiliserons également les classes ExpressionBuilder pour construire cette expression.We will also be using the ExpressionBuilder classes to construct this Expression. Une copie du code utilisé pour générer cette expérience via des chaînes est indiquée à la fin.A copy of the code used to build this experience via Strings is listed at the end.

Dans cette équation, il existe deux propriétés que vous devez référencer à partir de PropertySet ; l’un est un décalage Centerpoint et l’autre est la rotation.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");

Ensuite, vous devez définir le composant Vector3 qui tient compte de la rotation d’orbite réelle.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);

Notes

EF est une notation « using » abrégée pour définir ExpressionFunctions.EF is a shorthand "using" notation to define ExpressionFunctions.

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

Enfin, Combinez ces composants et référencez la position de la boule rouge pour définir la relation mathématique.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);

Dans une situation hypothétique, que se passerait-il si vous souhaitiez utiliser cette même expression mais avec deux autres visuels, ce qui signifie 2 jeux de cercles d’orbite.In a hypothetical situation, what if you wanted to use this same Expression but with two other Visuals, meaning 2 sets of orbiting circles. Avec CompositionAnimations, vous pouvez réutiliser l’animation et cibler plusieurs CompositionObjects.With CompositionAnimations, you can re-use the animation and target multiple CompositionObjects. La seule chose que vous devez modifier lorsque vous utilisez cette expression pour le cas Orbit supplémentaire est la référence à l’élément visuel.The only thing you need to change when you use this Expression for the additional orbit case is the reference to the Visual. Nous appelons ce modèles.We call this templating.

Dans ce cas, vous modifiez l’expression que vous avez créée précédemment.In this case, you modify the Expression you built earlier. Au lieu d’obtenir une référence à CompositionObject, vous créez une référence avec un nom, puis vous affectez des valeurs différentes :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);

Voici le code si vous avez défini votre expression avec des chaînes via l’API publique.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);