Animation de votre interface utilisateur (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 ]
Vous pouvez intégrer l’apparence de Windows 8 dans votre application du Windows Store en utilisant la suite des animations Windows de la bibliothèque d’animations. Cet article présente les animations et des exemples de scénarios classiques traités par la bibliothèque d’animations.
L’utilisation des animations de la bibliothèque d’animations offre les avantages suivants :
- mouvements conformes aux principes d’animation des applications du Windows Store ;
- transitions rapides et fluides entre les états de l’interface utilisateur qui informent l’utilisateur sans le déranger dans ses activités ;
- signaux visuels plus clairs pour indiquer les transitions de l’utilisateur dans une application.
Par exemple, quand un utilisateur ajoute un élément à une liste, au lieu de s’afficher instantanément dans la liste, le nouvel élément s’anime sur place et les autres éléments bougent pour lui faire de la place. L’utilisateur peut ainsi voir clairement ce qui s’est passé d’une manière qui n’est pas possible avec les transitions instantanées.
Notez que les contrôles introduits dans Windows 8 tels que ListView, FlipView, Flyout et AppBar utilisent tous les animations de la bibliothèque d’animations. En utilisant ces contrôles dans votre application, vous pouvez obtenir l’apparence des animations d’applications du Windows Store sans aucune programmation préalable.
La bibliothèque d’animations ne fournit pas d’animations pour chaque scénario possible. Dans certains cas, il peut être nécessaire de créer une animation personnalisée, par exemple pour refléter votre marque. Vous devez faire attention lorsque vous utilisez une animation différente de celles de la Bibliothèque d’animations. Utilisez une animation personnalisée uniquement pour une raison bien définie, par exemple pour refléter une marque ou lorsque aucune animation de la bibliothèque d’animations ne convient au scénario.
Pour obtenir un exemple de code utilisant les API discutées dans cette rubrique, voir l’Exemple de bibliothèque d’animations HTML.
Animations disponibles dans la bibliothèque
Les animations suivantes sont fournies dans la bibliothèque d’animations. Cliquez sur le nom d’une animation pour en savoir plus sur ses principaux scénarios d’utilisation et les fonctions qui l’exécutent, ainsi que pour afficher un exemple de l’animation.
- Transition de page : anime le contenu d’une page à l’intérieur ou en dehors de la vue.
- Transition de contenu : anime des éléments de contenu à l’intérieur ou en dehors de la vue.
- Apparition/Disparition en fondu : affiche les contrôles ou éléments provisoires.
- Fondu enchaîné : actualise une zone de contenu.
- Pointeur vers le haut/bas : affiche un retour visuel d’un appui ou d’un clic sur une vignette.
- Développer/Réduire : affiche d’autres informations insérées.
- Repositionner : déplace un élément à un autre endroit.
- Afficher/Masquer le menu contextuel : affiche l’interface utilisateur contextuelle sur la vue.
- Afficher/Masquer l’interface utilisateur latérale : fait glisser l’interface utilisateur latérale à l’intérieur ou en dehors de la vue.
- Afficher/Masquer le panneau : fait glisser de grands panneaux latéraux à l’intérieur et en dehors de la vue.
- Ajouter/Supprimer dans la liste : ajoute ou supprime un élément d’une liste.
- Ajouter/Supprimer dans la liste de recherche : ajoute ou supprime un élément d’une liste pendant le filtrage des résultats de recherche.
- Synoptique : met à jour le contenu d’une vignette.
- Mise à jour de badge : met à jour un badge numérique.
- Début/Fin de glissement ou glissement entre entrées/sorties : affiche un retour visuel pendant une opération de glisser-déplacer.
- Indicateur de balayage : indique qu’une vignette prend en charge l’interaction de balayage.
- Sélection/désélection par balayage : active l’état sélectionné d’une vignette suite à un balayage par l’utilisateur.
Transition de page
Les transitions entre les pages animent le contenu d’une page à l’intérieur ou en dehors de la vue. Cela comprend l’affichage de la première page de l’application après l’écran de démarrage et la transition entre les pages d’une application.
La vidéo suivante illustre l’animation qui affiche une page de contenu :
La vidéo suivante illustre les animations qui effectuent la transition entre deux pages de contenu :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations de transition entre les pages.
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Transition de contenu
Les animations de transition de contenu permettent de déplacer des éléments de contenu à l’intérieur ou en dehors de la vue. Ne confondez pas les transitions de contenu, qui impliquent les éléments d’une page, avec les transitions entre les pages, qui effectuent la transition de pages entières. Par exemple, les animations de transition de contenu permettent d’afficher un contenu qui n’était pas prêt à être affiché quand la page a été chargée pour la première fois, ou pendant la modification du contenu d’une section d’une page.
La vidéo suivante illustre les animations qui suppriment du contenu existant puis affichent du nouveau contenu :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations de transition de contenu.
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Apparition/Disparition en fondu
Utilisez des animations d’apparition et de disparition en fondu pour afficher ou masquer une interface utilisateur ou des contrôles provisoires. Il peut s’agir par exemple d’une barre de l’application dans laquelle de nouveaux contrôles peuvent s’afficher suite à une interaction de l’utilisateur. Un autre exemple concerne un indicateur de mouvement panoramique ou une barre de défilement provisoire qui disparaît progressivement si aucune entrée utilisateur n’a été détectée pendant un certain temps. Les applications doivent également utiliser l’animation d’apparition en fondu pendant la transition d’un élément d’espace réservé à l’élément final durant le chargement dynamique du contenu.
La vidéo suivante illustre les animations qui affichent et masquent le contenu en fondu. Notez la barre de défilement qui apparaît et disparaît en fondu au bas de l’écran :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations en fondu.
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Fondu enchaîné
Utilisez une animation de fondu enchaîné pour rendre moins abrupte la transition quand l’état d’un élément change, par exemple quand l’application actualise le contenu actuel d’une vue.
La vidéo suivante illustre l’animation de fondu enchaîné :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations en fondu.
JavaScriptUtilisez cette API pour exécuter cette animation :
Pointeur vers le haut/bas
Utilisez les animations de pointeur vers le haut et vers le bas pour donner à l’utilisateur un retour d’un appui ou d’un clic réussi sur une vignette. Par exemple, quand un utilisateur clique ou appuie sur une vignette, l’animation de pointeur vers le bas est lue. Quand l’utilisateur cesse de cliquer ou d’appuyer, l’animation de pointeur vers le haut est lue.
La vidéo suivante illustre les animations de pointeur vers le haut et vers le bas :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations liées au pointeur.
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Développer/Réduire
Utilisez l’animation de développement pour ajouter un espace supplémentaire dans le contenu de la vue pour afficher d’autres informations insérées. Par exemple, l’apparence d’un message d’erreur entraîne le déplacement d’un autre contenu dans la vue pour lui faire de la place. L’animation de réduction masque ce contenu supplémentaire, pour afficher moins de détails sur un élément particulier. L’animation de réduction est généralement déclenchée par une action de l’utilisateur.
La vidéo suivante illustre les animations de développement et de réduction :
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Repositionner
Utilisez l’animation de repositionnement pour déplacer un élément à un autre endroit. Par exemple, le déplacement des en-têtes dans une vue de panorama a recours à l’animation de repositionnement.
La vidéo suivante illustre l’animation de repositionnement :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur l’animation de repositionnement.
JavaScriptUtilisez cette API pour exécuter cette animation :
Afficher/Masquer l’interface utilisateur contextuelle
Utilisez les animations d’affichage et de masquage de l’interface utilisateur contextuelle pour afficher ou masquer l’interface utilisateur contextuelle sur la vue actuelle. Par exemple, une interface utilisateur contextuelle peut afficher des informations plus détaillées sur une partie d’un élément. Utilisez les animations d’affichage et de masquage de l’interface utilisateur contextuelle quand vous affichez un menu volant ou un menu contextuel personnalisé.
La vidéo suivante illustre les animations qui affichent et masquent l’interface utilisateur contextuelle :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations contextuelles de l’interface utilisateur.
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Afficher/Masquer l’interface utilisateur latérale
Utilisez les animations d’affichage et de masquage de l’interface utilisateur latérale pour faire glisser des éléments d’interface utilisateur latéraux de petite taille à l’intérieur et en dehors de la vue. Par exemple, utilisez ces animations quand vous affichez une barre de l’application personnalisée au bas de l’écran ou une surface d’interface utilisateur pour des erreurs et des avertissements en haut de l’écran.
La vidéo suivante illustre les animations qui affichent et masquent l’interface utilisateur latérale :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations latérales.
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Afficher/Masquer le panneau
Utilisez les animations d’affichage et de masquage de panneau pour afficher et masquer un panneau, qui représente des éléments d’interface utilisateur latéraux de grande taille comme un volet des tâches ou un clavier personnalisé. Ne confondez pas ces animations avec les animations d’affichage et de masquage de l’interface utilisateur latérale, qui sont utilisées avec des éléments d’interface utilisateur de petite taille qui utilisent le bord comme points d’entrée et de sortie.
La vidéo suivante illustre les animations qui affichent et masquent les panneaux :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations latérales.
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Ajouter/Supprimer dans la liste
Utilisez les animations d’ajout et de suppression dans la liste quand vous ajoutez ou supprimez un élément dans une liste existante à une ou deux dimensions. L’animation d’ajout dans la liste commence par repositionner les éléments existants dans la liste pour faire de la place aux nouveaux éléments, puis ajoute les nouveaux éléments. L’animation de suppression dans la liste supprime les éléments d’une liste et, si nécessaire, repositionne les éléments de la liste restants quand les éléments supprimés ont été retirés.
La vidéo suivante illustre les animations qui ajoutent et suppriment des éléments dans une liste :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations de liste.
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Ajouter/Supprimer dans la liste de recherche
Utilisez les animations d’ajout et de suppression dans la liste de recherche lorsque les éléments d’une liste changent rapidement pendant une recherche. Notez que les animations de liste de recherche sont plus rapides que les animations de liste standard. Par exemple, quand un utilisateur entre un terme à rechercher et que la liste filtre les résultats en temps réel, les éléments filtrés doivent utiliser l’animation de suppression dans la liste de recherche. Inversement, un utilisateur peut rechercher une chaîne, puis appuyer sur la touche Retour arrière pour supprimer un caractère. Cela aboutit à un nouvel ajout des éléments à la liste des résultats de recherche ; vous devez par conséquent utiliser l’animation d’ajout dans la liste de recherche.
La vidéo suivante illustre les animations qui ajoutent et suppriment des éléments dans une liste de recherche :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations de liste.
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Synoptique
Utilisez l’animation synoptique pour mettre à jour une vignette si la vignette alterne entre l’affichage d’une image et l’affichage de texte quand sa hauteur n’est pas suffisante pour afficher les deux à la fois. Utilisez également cette animation pour faire défiler un ensemble d’images sur une vignette.
La vidéo suivante illustre l’animation synoptique :
JavaScriptUtilisez cette API pour exécuter cette animation :
Mise à jour de badge
Utilisez la mise à jour de badge pour mettre à jour les badges qui affichent un nombre. Par exemple, une application de messagerie qui affiche le nombre de messages électroniques non lus peut utiliser l’animation de mise à jour de badge pour mettre à jour cette valeur.
La vidéo suivante illustre l’animation qui met à jour un badge :
JavaScriptUtilisez cette API pour exécuter cette animation :
Début/Fin de glissement ou glissement entre entrées/sorties
Utilisez les animations de glissement pour donner un retour visuel quand l’utilisateur fait glisser ou dépose un élément. Utilisez l’animation de début de glissement quand un utilisateur commence à faire glisser un élément. Utilisez l’animation de fin de glissement quand l’utilisateur dépose l’élément.
Vous pouvez éventuellement utiliser les animations de glissement entre les entrées et sorties pour montrer à l’utilisateur que la liste peut être réorganisée autour d’un élément déposé. Il est utile pour les utilisateurs de savoir où l’élément va être placé dans une liste s’il est déposé à l’emplacement actuel. Les animations de glissement entre les entrées et les sorties indiquent visuellement qu’un élément que l’utilisateur fait glisser peut être déposé entre deux autres éléments de la liste et que ces éléments vont disparaître.
La vidéo suivante illustre les animations associées à une opération de glisser-déplacer :
Pour plus d’informations sur l’expérience utilisateur et pour obtenir des instructions d’utilisation, voir Recommandations et liste de vérification sur les animations pour les actions de glisser-déplacer.
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Indicateur de balayage
Utilisez l’animation d’indicateur de balayage pour montrer qu’une vignette prend en charge l’interaction de balayage. Les utilisateurs peuvent effectuer un mouvement de balayage vers le bas pour sélectionner une vignette. Si un utilisateur ne sait pas s’il peut effectuer un mouvement de balayage sur une vignette, un appui prolongé sur la vignette va lire l’animation d’indicateur de balayage pour suggérer que l’utilisateur doit interagir avec la vignette par un balayage.
La vidéo suivante illustre l’animation de balayage :
JavaScriptUtilisez cette API pour exécuter cette animation :
Sélection/désélection par balayage
Utilisez l’animation de sélection par balayage quand un élément a été sélectionné en utilisant l’interaction de balayage pour montrer que la vignette est passée à un état sélectionné et pour rétablir la vignette à son emplacement de pause. Utilisez l’animation de désélection par balayage quand une vignette sélectionnée est désélectionnée par un mouvement de balayage.
La vidéo suivante illustre les animations de sélection et désélection par balayage :
Utilisez ces API pour exécuter cette animation dans le code JavaScript :
Utilisation d’animations avec des contrôles personnalisés
Le tableau suivant résume nos recommandations en matière de choix d’animation lors de la création d’une version personnalisée de ces contrôles système :
| Type d’élément d’interface utilisateur | Animation recommandée |
|---|---|
| Boîte de dialogue | fadeIn et fadeOut |
| Menu volant | showPopup et hidePopup |
| Info-bulle | fadeIn et fadeOut |
| Menu contextuel | showPopup et hidePopup |
| Barre de commandes | showEdgeUI et hideEdgeUI |
| Volet de tâches ou panneau latéral | showPanel et hidePanel |
| Contenu d’un conteneur d’éléments d’interface utilisateur quelconque | enterContent et exitContent |
| Pour les contrôles ou si aucune autre animation ne s’applique | fadeIn et fadeOut |
Rubriques associées
Exemple de bibliothèque d’animations HTML