Animations de printemps

Cet article montre comment utiliser spring NaturalMotionAnimations dans WinUI.

Prerequisites

Ici, nous partons du principe que vous connaissez les concepts abordés dans ces articles :

• Animations de mouvement naturels

Pourquoi les ressorts ?

Les ressorts sont un phénomène de mouvement commun que nous avons tous vécu à un moment donné dans notre vie ; allant des jouets Slinky aux expériences en classe de physique avec un bloc attaché à un ressort. Le mouvement oscillant d’un printemps encourage souvent une réponse émotionnelle ludique et légère de ceux qui l’observent. Par conséquent, le mouvement d’un ressort se traduit bien dans l'interface utilisateur d'une application pour ceux qui cherchent à créer une expérience de mouvement plus dynamique qui s'apparente davantage pour l'utilisateur final qu’un Bezier cubique traditionnel. Dans ces cas, le mouvement spring crée non seulement une expérience de mouvement plus dynamique, mais peut également aider à attirer l’attention sur le contenu nouveau ou actuellement animé. Selon la personnalisation de l’application ou le langage de mouvement, l’oscillation est plus prononcée et visible, mais dans d’autres cas, elle est plus subtile.

Utilisation de ressorts dans votre interface utilisateur

Comme mentionné précédemment, les ressorts peuvent être un mouvement utile pour s’intégrer à votre application WinUI pour introduire une expérience d’interface utilisateur très familière et ludique. L’utilisation courante des ressorts dans l’interface utilisateur est la suivante :

Description de l'utilisation Spring	Exemple visuel
Faire en sorte qu'une expérience de mouvement se démarque et paraisse plus vivante. (Animation de l’échelle)
Rendre subtilement une expérience de mouvement plus dynamique (Offset d'animation)

Dans chacun de ces cas, le mouvement du ressort peut être déclenché soit en "bondissant vers" et en oscillant autour d'une nouvelle valeur, soit en oscillant autour de sa valeur actuelle avec une certaine vitesse initiale.

Définition du mouvement de votre ressort

Vous créez une expérience de printemps à l’aide des API NaturalMotionAnimation. Plus précisément, vous créez un SpringNaturalMotionAnimation à l’aide des méthodes Create* du Compositor. Vous pouvez ensuite définir les propriétés suivantes du mouvement :

• DampingRatio : exprime le niveau d’amortissement du mouvement de printemps utilisé dans l’animation.

Valeur du ratio d’amortissement	Description
Rapport_d'amortissement = 0	Non amorti – le ressort oscillera pendant longtemps
0 < DampingRatio < 1	Sous-amorti – le ressort oscillera d’un peu à beaucoup.
DampingRatio = 1	Critiquement humide : le printemps n’effectuera aucune oscillation.
DampingRatio > 1	Overdamped - le printemps atteint rapidement sa destination avec une décélération abrupte et aucune oscillation

• Période : le temps nécessaire au printemps pour effectuer une seule oscillation.
• Final / Valeur de départ : les positions de début et de fin définies du mouvement de ressort (si non défini, la valeur de départ et/ou la valeur finale seront la valeur actuelle).
• Vitesse initiale : vitesse initiale programmatique pour le mouvement.

Vous pouvez également définir un ensemble de propriétés du mouvement identiques à KeyFrameAnimations :

• DelayTime / Comportement de délai
• StopBehavior

Dans les cas courants d’animation de décalage et d’échelle/taille, les valeurs suivantes sont recommandées par l’équipe Windows Design pour DampingRatio et Period pour différents types de ressorts :

Propriété	Printemps normal	Printemps humide	Printemps moins humide
Décalage	Ratio d’amortissement = 0,8 Période = 50 ms	Ratio d’amortissement = 0,85 Période = 50 ms	Ratio d’amortissement = 0,65 Période = 60 ms
Échelle/Taille	Ratio d’amortissement = 0,7 Période = 50 ms	Ratio d’amortissement = 0,8 Période = 50 ms	Rapport d'amortissement = 0,6 Période = 60 ms

Une fois que vous avez défini les propriétés, vous pouvez ensuite passer votre NaturalMotionAnimation spring à la méthode StartAnimation d'un CompositionObject ou à la propriété Motion d'un InteractionTracker InertiaModifier.

Exemple

Cet exemple permet de créer une expérience d'interface utilisateur de navigation et de canevas dans laquelle, lorsque l'utilisateur clique sur un bouton d'expansion, un volet de navigation est animé vers l'extérieur avec un mouvement d'oscillation élastique.

Commencez par définir l’animation spring dans l’événement cliqué pour le moment où le volet de navigation s’affiche. Vous définissez ensuite les propriétés de l’animation à l’aide de la fonctionnalité InitialValueExpression pour utiliser une expression pour définir FinalValue. Vous effectuez également le suivi de l’ouverture ou non du volet et, lorsque vous êtes prêt, démarrez l’animation.

private void Button_Clicked(object sender, RoutedEventArgs e)
{
    _springAnimation = _compositor.CreateSpringScalarAnimation();
    _springAnimation.DampingRatio = 0.75f;
    _springAnimation.Period = TimeSpan.FromSeconds(0.5);

    if (!_expanded)
    {
        _expanded = true;
        _propSet.InsertBoolean("expanded", true);
        _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue + 250";
    }
    else
    {
        _expanded = false;
        _propSet.InsertBoolean("expanded", false);
        _springAnimation.InitialValueExpression["FinalValue"] = "this.StartingValue - 250";
    }

    _naviPane.StartAnimation("Offset.X", _springAnimation);
}

Que se passerait-il si tu voulais lier ce mouvement à l’entrée ? Par conséquent, si l’utilisateur final balaye vers l’extérieur, les volets sortent avec un mouvement de ressort ? Plus important encore, si l’utilisateur balaye plus fort ou plus rapidement, le mouvement s’adapte en fonction de la vitesse de l’utilisateur final.

Pour ce faire, vous pouvez prendre la même animation à ressort et la passer dans un modificateur d'inertie avec un InteractionTracker. Pour plus d’informations sur InputAnimations et InteractionTracker, consultez les expériences de manipulation personnalisées avec InteractionTracker. Nous allons supposer que pour cet exemple de code, vous avez déjà configuré votre InteractionTracker et VisualInteractionSource. Nous allons nous concentrer sur la création des InertiaModifiers qui intégreront une animation de mouvement naturel, dans ce cas un ressort.

// InteractionTracker and the VisualInteractionSource were previously set up.
// The open and close ScalarSpringAnimations were defined earlier.
private void SetupInput()
{
    // Define the InertiaModifier to manage the open motion.
    var openMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the open animation if the pane is not expanded.
    openMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == false");
    openMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    openMotionModifier.NaturalMotion = _openSpringAnimation;

    // Define the InertiaModifier to manage the close motion.
    var closeMotionModifier = InteractionTrackerInertiaNaturalMotion.Create(_compositor);

    // Use the close animation if the pane is expanded.
    closeMotionModifier.Condition = _compositor.CreateExpressionAnimation(
        "propSet.expanded == true");
    closeMotionModifier.Condition.SetReferenceParameter("propSet", _propSet);
    closeMotionModifier.NaturalMotion = _closeSpringAnimation;

    _tracker.ConfigurePositionXInertiaModifiers(new InteractionTrackerInertiaNaturalMotion[]
    {
        openMotionModifier,
        closeMotionModifier,
    });

    // Take the InteractionTracker output and assign it to the pane.
    var exp = _compositor.CreateExpressionAnimation("-tracker.Position.X");
    exp.SetReferenceParameter("tracker", _tracker);

    ElementCompositionPreview.GetElementVisual(pageNavigation)
        .StartAnimation("Translation.X", exp);
}

Maintenant, vous disposez à la fois d’une animation spring programmatique et pilotée par les entrées dans votre interface utilisateur !

En résumé, les étapes d’utilisation d’une animation spring dans votre application :

1. Créez votre SpringAnimation à partir de votre Compositor.
2. Définissez les propriétés de SpringAnimation si vous souhaitez des valeurs non par défaut :
   • Facteur d'amortissement
   • Period
   • Valeur finale
   • Valeur initiale
   • Vitesse initiale
3. Affecter à la cible.
   • Si vous animez une propriété CompositionObject, passez SpringAnimation en tant que paramètre à StartAnimation.
   • Si vous souhaitez utiliser avec des données d'entrée, définissez la propriété NaturalMotion d'un InertiaModifier sur SpringAnimation.