Animations basées sur une relation

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

Expériences basées sur des relations dynamiques

Lors de la création d’expériences de mouvement dans une application, il existe des moments où le mouvement n’est 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éfinis. Au lieu de cela, le mouvement peut s’adapter dynamiquement en fonction de sa relation à 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 Sticky Headers et Parallax.

Ces types d’expériences de mouvement vous permettent de créer une interface utilisateur qui se sent plus connectée, au lieu de ressentir des sentiments singuliers et indépendants. Pour l’utilisateur, cela donne l’impression d’une expérience d’interface utilisateur dynamique.

Utilisation d’ExpressionAnimations

Pour créer des expériences de mouvement basées sur des relations, vous utilisez le type ExpressionAnimation. ExpressionAnimations (ou Expressions pour un court terme) sont 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 :

• Taille relative, animations offset.
• En-têtes collants, Parallax avec ScrollViewer. (Voir Améliorer les expériences ScrollViewer existantes.)
• Points d’ancrage avec InertieModifiers et InteractionTracker. (Voir Créer des points d’ancrage avec des modificateurs d’inertie.)

Lors de l’utilisation d’ExpressionAnimations, il y a quelques choses qui méritent d’être mentionnées devant :

• 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, elles sont des animations qui sont constamment « en cours d’exécution ». Vous avez la possibilité d’arrêter ces animations si vous le souhaitez.
• 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 constamment. Toutefois, il n’est pas nécessaire de s’inquiéter, le système est suffisamment intelligent pour que l’expression réévalue uniquement si l’une de ses entrées ou paramètres a changé.
• Résolution du 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 se résout en le même type de propriété ciblé par l’animation. Par exemple, si vous animez Offset, votre expression doit être résolue en type Vector3.

Composants d’une expression

Lors de la génération 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 : les opérateurs mathématiques classiques plus(+), moins(-), multiplie(*), divide(/) qui se joignent à des paramètres pour former une équation. Également inclus sont des opérateurs conditionnels tels que supérieur(>), equal(==), opérateur ternaire (condition ? ifTrue : ifFalse), etc.
• 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 : 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 attribuées une fois que l’animation est démarrée.
• Références : il s’agit de paramètres représentant des références à CompositionObjects : ces paramètres obtiennent en permanence leurs valeurs mises à jour après le démarrage d’une animation.

En général, les références constituent l’aspect principal 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 (à l’aide de 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’un KeyFrame à la fois : ces types clés sont appelés ExpressionKeyFrames.

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

Toutefois, contrairement aux ExpressionsAnimations, Les ExpressionKeyFrames ne sont évalués qu’une seule fois lorsque KeyFrameAnimation est démarré. N’oubliez pas que vous ne passez pas d’ExpressionAnimation comme valeur du KeyFrame, plutôt qu’une chaîne (ou un ExpressionNode, si vous utilisez ExpressionBuilder).

Exemple

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

Il existe trois composants à jouer pour l’expérience totale :

1. KeyFrameAnimation, animant le décalage Y de la boule rouge.
2. PropertySet avec une propriété Rotation qui aide à faire tourner l’orbite, animée par un autre KeyFrameAnimation.
3. ExpressionAnimation qui pilote l’offset de la boule bleue référençant le décalage de 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 générer cette expérience via des chaînes est répertoriée à la fin.

Dans cette équation, il existe deux propriétés que vous devez référencer à partir de 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 tient compte de la rotation en orbite réelle.

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

Enfin, combinez ces composants ensemble et référencez la position de la boule 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 vouliez utiliser cette même expression, mais avec deux autres visuels, ce qui signifie 2 ensembles de cercles d’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 la casse d’orbite supplémentaire est la référence au visuel. Nous appelons cette création de modèles.

Dans ce cas, vous modifiez l’expression que vous avez créée précédemment. Au lieu de « obtenir » une référence à CompositionObject, vous créez une référence avec un nom, puis attribuez 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);