Animation de l’interface utilisateur contextuelle (HTML)
[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Utilisez les animations contextuelles pour afficher et masquer l’interface utilisateur contextuelle, qui comprend des menus contextuels et des menus volants. Les éléments contextuels sont des conteneurs qui s’affichent sur le contenu de l’application et qui disparaissent si l’utilisateur appuie ou clique en dehors de l’élément contextuel. Ces animations sont principalement destinées à être utilisées sur les contrôles personnalisés. Les contrôles Flyout et Menu incluent les animations contextuelles. Si vous utilisez ces contrôles dans vos applications, vous n’avez pas besoin de fournir vous-même ces animations.
Cet ensemble d’animations comprend les API suivantes :
La vidéo suivante illustre les animations qui affichent et masquent l’interface utilisateur contextuelle :
L’animation showPopup comprend une translation, mouvement vertical depuis un emplacement d’origine vers un emplacement final, tandis que l’élément contextuel apparaît en fondu. L’amplitude de translation et la direction sont spécifiées par l’application. Dans la plupart des cas, la translation doit être de 50 pixels et se diriger vers le haut. Toutefois, si l’élément contextuel est affiché sous l’élément d’interface utilisateur qui l’a déclenché, la translation doit être de 50 pixels et se diriger vers le bas. Par exemple, cette translation vers le bas s’appliquerait à un menu volant déclenché à partir d’une barre de navigation ou d’un en-tête d’application. L’objectif est de fournir à l’utilisateur un lien visuel entre l’élément contextuel et son élément déclencheur.
Pour utiliser les animations contextuelles, vous devez connaître l’objet qui apparaîtra ou disparaîtra et, dans le cas de showPopup, le décalage à partir duquel l’objet se déplace au cours de son affichage.
Autres ressources
Pour les exemples de code qui illustrent l’utilisation des API d’animation de l’interface utilisateur latérale, voir l’exemple de la bibliothèque d’animations HTML.
Pour les meilleures pratiques de conception de l’utilisation de ces animations, voir Recommandations et liste de vérification sur les animations de l’interface utilisateur contextuelle.
Rubriques associées
Animation de votre interface utilisateur