Enrichir facilement vos interfaces Windows 10 avec des animations

Pour une meilleure expérience utilisateur, il faut passer par l’ajout d’animations pour rendre l’interface plus fluide et agréable. Mais, pour certains ou certaines, la gestion des animations n’est pas vraiment leur fort ou alors ce temps n’a pas été prévu dans le développement du projet.

Microsoft a pensé à nous en rajoutant la possibilité de mettre des animations de navigation de page rapidement, directement en XAML et sur la plupart des éléments.

Par exemple, je souhaite rajouter une animation sur une grid lors de l’arrivé sur la page en offset Y, une animation de translation du bas vers le haut, il me suffit de rajouter en XAML :

On peut aussi rajouter une animation sur un TextBlock  ou un Button  comme ceci :

Mais on peut aussi en combiner plusieurs :

Voici toute les animations proposées par Microsoft que je vous laisse découvrir :

Elles proposent toutes des animations différentes que vous pouvez personnaliser pour certaines, comme pour le offset de EntranceThemeTransition.

Ces animations posent néanmoins un petit problème, elles se lancent uniquement sur la navigation de la page et elles ne vous permettent pas de les lancer quand vous le souhaitez.

Néanmoins, vous pouvez aller faire un petit tour sur le Microsoft Toolkit qui propose quelques animations sympa, comme le blur, à rajouter en XAML ou code-behind facilement. (Git UWP Community Toolkit ou le lien de l’application de test sur le Windows Store)

A l’aide de ce toolkit, vous allez pouvoir rajouter simplement des animations en XAML après la modification d’une variable de votre ViewModel ou un event (comme un PointerEntered par exemple).

Pour cela, rajoutez le nuget Toolkit des animations ainsi que le nuget des Behaviors (pour la gestion des Triggers) à votre projet.

Rajoutez les namespaces en haut de votre page du XAML :

Il ne vous reste plus qu’à rajouter les animations sur les éléments voulus.

Par exemple, afficher une grid  en opacité quand une valeur de mon ViewModel passe à « 1 ».

Quand la valeur index  de mon ViewModel passera à 1 ou quand l’événement PointerEntered sera levé, l’animation FadeIn  se lancera.

Vous pouvez ainsi rajouter autant de déclencheur que vous souhaitez et autant d’actions que nécessaire dans ces déclencheurs et faire quelques animations sympa pour l’utilisateur qui ne vous prendra pas trop de temps à mettre en place.