Animations basées sur une relation

  • Article

Cet article fournit une brève vue d’ensemble de la création d’animations basées sur des relations à l’aide de Composition ExpressionAnimations.

Expériences dynamiques basées sur des relations

Lors de la génération d’expériences de mouvement dans une application, il arrive que le mouvement ne soit pas basé sur le temps, mais dépend plutôt d’une propriété sur un autre objet. Les KeyFrameAnimations ne sont pas en mesure d’exprimer ces types d’expériences de mouvement très facilement. Dans ces cas spécifiques, le mouvement n’a plus besoin d’être discret et prédéfini. Au lieu de cela, le mouvement peut s’adapter dynamiquement en fonction de sa relation avec d’autres propriétés d’objet. Par exemple, vous pouvez animer l’opacité d’un objet en fonction de sa position horizontale. D’autres exemples incluent des expériences de mouvement telles que les en-têtes collants et parallaxe.

Ces types d’expériences de mouvement vous permettent de créer une interface utilisateur qui se sent plus connectée, au lieu de vous sentir singulière et indépendante. Pour l’utilisateur, cela donne l’impression d’une expérience d’interface utilisateur dynamique.

Cercle en orbite

Affichage liste avec parallaxe

Utilisation d’ExpressionAnimations

Pour créer des expériences de mouvement basées sur des relations, vous utilisez le type ExpressionAnimation. ExpressionAnimations (ou Expressions en abrégé), 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 image. Autrement dit, les expressions sont simplement une équation mathématique qui définit la valeur souhaitée d’une propriété d’animation par image. Les expressions sont un composant très polyvalent qui peut être utilisé dans un large éventail de scénarios, notamment :

Lors de l’utilisation d’ExpressionAnimations, il y a deux choses à mentionner à l’avance :

  • Never Ending : contrairement à son frère KeyFrameAnimation, les expressions n’ont pas de durée finie. Étant donné que les expressions sont des relations mathématiques, il s’agit d’animations qui sont constamment « en cours d’exécution ». Vous avez la possibilité d’arrêter ces animations si vous le souhaitez.
  • Exécution, mais pas toujours évaluation : les performances sont toujours un problème avec les animations qui sont en cours d’exécution. Vous n’avez pas à vous inquiéter, le système est suffisamment intelligent pour que l’expression ne réévalue que si l’une de ses entrées ou paramètres a changé.
  • Résolution vers le type d’objet approprié : les expressions étant des relations mathématiques, il est important de s’assurer que l’équation qui définit l’expression se résout au même type de la propriété ciblée par l’animation. Par exemple, si vous animez offset, votre expression doit être résolue en un type Vector3.

Composants d’une expression

Lors de la création de la relation mathématique d’une expression, il existe plusieurs composants principaux :

  • Paramètres : valeurs représentant des valeurs constantes ou des références à d’autres objets Composition.
  • Opérateurs mathématiques : opérateurs mathématiques classiques plus(+), moins(-), multiply(*), divide(/) qui joignent des paramètres pour former une équation. Les opérateurs conditionnels tels que supérieur à(>), equal(==), l’opérateur ternaire (condition ? ifTrue : ifFalse), etc. sont également inclus.
  • Fonctions mathématiques : fonctions/raccourcis mathématiques basés sur System.Numerics. Pour obtenir la liste complète des fonctions prises en charge, consultez ExpressionAnimation.

Les expressions prennent également en charge un ensemble de mots clés: des expressions spéciales qui ont une signification distincte uniquement dans le système ExpressionAnimation. Celles-ci sont répertoriées (ainsi que la liste complète des fonctions mathématiques) dans la documentation ExpressionAnimation .

Création d’expressions avec ExpressionBuilder

Il existe deux options pour générer des expressions dans votre application UWP :

  1. Générez l’équation sous forme de chaîne via l’API publique officielle.
  2. Générez l’équation dans un modèle objet de type sécurisé via l’outil ExpressionBuilder inclus dans Windows Community Toolkit.

Dans le cadre de ce document, nous allons définir nos expressions à l’aide d’ExpressionBuilder.

Paramètres

Les paramètres constituent le cœur d’une expression. Il existe deux types de paramètres :

  • Constantes : il s’agit de paramètres représentant des variables System.Numeric typées. Ces paramètres obtiennent leurs valeurs affectées une fois au démarrage de l’animation.
  • Références : il s’agit de paramètres représentant des références à CompositionObjects : ces paramètres voient leurs valeurs mises à jour en continu après le démarrage d’une animation.

En général, les références sont l’aspect main de la façon dont la sortie d’une expression peut changer dynamiquement. À mesure que ces références changent, la sortie de l’expression change en conséquence. Si vous créez votre expression avec des chaînes ou que vous les utilisez dans un scénario de création de modèles (en utilisant votre expression pour cibler plusieurs CompositionObjects), vous devez nommer et définir les valeurs de vos paramètres. Voir la section Exemple pour plus d'informations.

Utilisation de KeyFrameAnimations

Les expressions peuvent également être utilisées avec KeyFrameAnimations. Dans ces cas, vous souhaitez utiliser une expression pour définir la valeur d’une image clé à un moment donné. Ces types d’images clés sont appelés ExpressionKeyFrames.

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

Toutefois, contrairement à ExpressionAnimations, les ExpressionsKeyFrames ne sont évaluées qu’une seule fois au démarrage de KeyFrameAnimation. Gardez à l’esprit que vous ne passez pas d’expressionAnimation comme valeur de l’image clé, plutôt qu’une chaîne (ou un ExpressionNode, si vous utilisez ExpressionBuilder).

Exemple

Passons maintenant en revue un exemple d’utilisation d’expressions, en particulier l’exemple PropertySet de la galerie d’exemples d’interface utilisateur Windows. Nous allons examiner l’expression qui gère le comportement de mouvement en orbite de la boule bleue.

Cercle en orbite

Trois éléments sont en jeu pour l’expérience totale :

  1. KeyFrameAnimation, animant le décalage Y de la boule rouge.
  2. PropertySet avec une propriété Rotation qui permet de piloter l’orbite, animée par un autre KeyFrameAnimation.
  3. ExpressionAnimation qui pilote le décalage de la boule bleue en référençant le décalage de la boule rouge et la propriété Rotation pour maintenir une orbite parfaite.

Nous allons nous concentrer sur l’ExpressionAnimation définie dans #3. Nous allons également utiliser les classes ExpressionBuilder pour construire cette expression. Une copie du code utilisé pour créer cette expérience via des chaînes est répertoriée à la fin.

Dans cette équation, vous devez faire référence à deux propriétés à partir du PropertySet : l’un est un décalage de point central et l’autre est la 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 prend en compte la rotation en orbite réelle.

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

Notes

EF est une notation abrégée « using » pour définir ExpressionFunctions.

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

Enfin, combinez ces composants ensemble et référencez la position de la balle rouge pour définir la relation mathématique.

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

Dans une situation hypothétique, que se passe-t-il si vous voulez utiliser cette même expression, mais avec deux autres visuels, ce qui signifie 2 ensembles de cercles en orbite? Avec CompositionAnimations, vous pouvez réutiliser l’animation et cibler plusieurs CompositionObjects. La seule chose que vous devez modifier lorsque vous utilisez cette expression pour le cas d’orbite supplémentaire est la référence au visuel. Nous appelons cela la création de modèles.

Dans ce cas, vous modifiez l’expression que vous avez créée précédemment. Au lieu d'« obtenir » une référence à l’objet CompositionObject, vous créez une référence avec un nom, puis affectez différentes valeurs :

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.

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