Langage: HTML | XAML

Animation de votre interface utilisateur (XAML)

Applies to Windows and Windows Phone

Vous pouvez intégrer l’apparence de Windows dans votre application en utilisant la bibliothèque d’animations Windows décrite dans cette rubrique. Cette rubrique présente les animations et des exemples de scénarios classiques où chacune d’elles est utilisée.

Les contrôles Windows Runtime pour XAML incluent certains types d’animations en tant que comportements intégrés qui proviennent d’une bibliothèque d’animations. Les contrôles tels que ListView, FlipView, Flyout et AppBar utilisent tous ces animations comme comportement intégré. En utilisant ces contrôles dans votre application, vous pouvez obtenir l’apparence des animations sans aucune programmation préalable.

Les animations de la bibliothèque d’animations Windows Runtime offrent les avantages suivants :

  • mouvements conformes aux principes d’animation ;
  • transitions rapides et fluides entre les états de l’interface utilisateur qui informent l’utilisateur sans le déranger dans ses activités ;
  • comportement visuel qui indique à l’utilisateur les transitions dans une application.

Par exemple, quand l’utilisateur ajoute un élément à une liste, au lieu que ce nouvel élément apparaisse instantanément dans la liste, il se met en place par animation. Les autres éléments de la liste sont animés vers leur nouvelle position en peu de temps, faisant ainsi de la place pour le nouvel élément. Ce comportement de transition rend l’interaction du contrôle plus apparente à l’utilisateur.

La bibliothèque d’animations ne fournit pas des animations pour chaque scénario possible. Il peut arriver que vous souhaitiez créer une animation personnalisée en XAML. Pour plus d’informations, voir Animations dans une table de montage séquentiel.

Pour obtenir un exemple de code utilisant les API discutées dans cette rubrique, voir l’Exemple d’animation XAML, l’Exemple d’animations de caractéristiques XAML ou Démarrage rapide : animation de votre interface utilisateur avec des animations de la bibliothèque.

Types d’animations

La bibliothèque d’animations et le système d’animations Windows Runtime ont pour but majeur de permettre aux contrôles et autres parties de l’interface utilisateur d’avoir un comportement animé. Il existe plusieurs types distincts d’animations.

  • Les transitions thématiques sont appliquées automatiquement quand certaines conditions sont modifiées dans l’interface utilisateur, impliquant des éléments ou contrôles provenant des types d’interface utilisateur XAML Windows Runtime prédéfinis. Elles sont appelées transitions thématiques, car elles prennent en charge l’apparence Windows et définissent les actions de toutes les applications pour des scénarios d’interface utilisateur particuliers quand elles passent d’un mode d’interaction à un autre. Les transitions thématiques font partie de la bibliothèque d’animations.
  • Les animations thématiques sont des animations appliquées à une ou plusieurs propriétés de types d’interface utilisateur XAML Windows Runtime prédéfinis. Elles diffèrent des transitions thématiques car elles ciblent un élément spécifique et existent dans des états visuels spécifiques dans un contrôle, alors que les transitions thématiques sont affectées à des propriétés du contrôle qui existent en dehors des états visuels et influencent les transitions entre ces états. Une grande partie des contrôles XAML Windows Runtime comprennent des animations thématiques dans des storyboards qui font partie de leur modèle de contrôle, les animations étant déclenchées par les états visuels. Du moment que vous ne changez pas les modèles, vous disposez de ces animations thématiques intégrées pour les contrôles dans votre interface utilisateur. En revanche, si vous remplacez des modèles, vous supprimez également les animations thématiques de contrôle intégrées. Pour les récupérer, vous devez définir un storyboard qui comprend des animations thématiques dans le jeu d’états visuels du contrôle. Vous pouvez aussi exécuter des animations thématiques à partir de storyboards qui ne sont pas dans des états visuels et les démarrer avec la méthode Begin, mais ce scénario est moins courant. Les animations thématiques font partie de la bibliothèque d’animations.
  • Les transitions visuelles sont appliquées quand un contrôle passe de l’un de ses états visuels définis à un autre état. Il s’agit d’animations personnalisées que vous créez et elles sont généralement associées au modèle personnalisé que vous créez pour un contrôle et aux définitions d’état visuel de ce modèle. L’animation est exécutée uniquement pendant le délai entre les états et celui-ci est généralement court, quelques secondes au plus. Pour plus d’informations, voir la section « VisualTransition » dans Animations dans une table de montage séquentiel pour les états visuels.
  • Les animations de table de montage séquentiel sont appliquées quand elles sont spécifiquement lancées par le code de votre application ou par le code qui accompagne un composant, par exemple un contrôle que vous avez inclus. Les animations dans une table de montage séquentiel peuvent changer la valeur de n’importe quelle propriété de dépendance Windows Runtime au fil du temps. Elles ne sont pas limitées aux scénarios d’interface utilisateur ; en fait, il peut être utile de les considérer comme une technique de machine à états, si vous connaissez ce concept. Une animation dans une table de montage séquentiel n’est pas limitée au délai de transition entre les états visuels ; elle peut être exécutée à tout moment indépendamment de la modification de l’état d’un contrôle et l’animation peut éventuellement être exécutée en continu. Pour plus d’informations, voir Animations dans une table de montage séquentiel. Pour plus d’informations sur les propriétés de dépendance et sur l’emplacement où elles existent, voir Vue d’ensemble des propriétés de dépendance.

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, comment la définir, ainsi que pour afficher un exemple de l’animation.

Remarque  Les animations expand, peek, badge et search list fournies par le biais de la bibliothèque d’animations JavaScript ne sont pas disponibles pour XAML.

Comportement de Windows 8

Pour Windows 8, les transitions de thème XAML et plusieurs autres comportements animés automatiques dans la bibliothèque d’animations n’ont pas honoré un paramètre d’Options d’ergonomie Microsoft Windows particulier qui permet aux utilisateurs de désactiver les « animations inutiles ».

À partir de Windows 8.1, les transitions de thème, les animations de thème et les transitions visuelles honorent toutes le paramètre Désactiver toutes les animations inutiles (si possible) dans Options d’ergonomie. Les animations ne sont pas exécutées et les modifications de l’état d’un contrôle ou modifications visuelles sont instantanées.

Si vous migrez le code de votre application de Windows 8 vers Windows 8.1, vous pouvez tester les comportements de vos animations avec le paramètre Désactiver toutes les animations inutiles (si possible) activé. Étant donné que certaines de ces animations sont contrôlées par des tables de montage séquentiel, et que vous associez parfois des animations personnalisées pour qu’elles démarrent une fois les transitions visuelles ou animations de thème terminées, le paramètre Désactiver toutes les animations inutiles (si possible) peut affecter les synchronisations de vos animations. Par ailleurs, si vous avez implémenté un élément en tant que VisualTransition dans un état visuel plutôt qu’en tant qu’animation de table de montage séquentiel, vous pouvez le transformer en animation personnalisée réelle, pour que le paramètre Désactiver toutes les animations inutiles (si possible) ne le désactive pas.

Les applications qui ont été compilées pour Windows 8 mais qui sont exécutées dans Windows 8.1 continuent d’utiliser le comportement Windows 8 pour les animations de thème et les transitions visuelles. Toutefois, les transitions de thème sont désactivées par le paramètre dans Windows 8.1, même si une application n’est pas recompilée.

Transition de contenu et transition d’entrée

Les animations de transition de contenu (ContentThemeTransition) permettent de déplacer des éléments de contenu dans ou en dehors de la vue actuelle. Par exemple, les animations de transition de contenu affichent du contenu qui n’était pas prêt à être affiché quand la page a été chargée pour la première fois, ou quand le contenu d’une section d’une page change.

La bibliothèque d’animations XAML n’offre aucun concept d’animation qui s’applique à la page entière quand celle-ci est chargée, mais elle propose une transition distincte (EntranceThemeTransition) qui peut s’appliquer au contenu quand la page contenant le contenu est chargée pour la première fois et que cette partie du contenu est affichée. Ainsi, la première apparence du contenu et un changement de contenu peuvent offrir un retour différent.

Pour plus d’informations, voir Animation des transitions de contenu et d’entrée.

Apparition/disparition en fondu et fondu enchaîné

Utilisez des animations d’apparition et de disparition en fondu pour afficher ou masquer une interface utilisateur ou des contrôles provisoires. En XAML, elles sont représentées comme FadeInThemeAnimation et FadeOutThemeAnimation. 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.

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 bibliothèque d’animations XAML ne fournit aucune animation de fondu enchaîné dédiée (aucun équivalent pour crossFade), mais vous pouvez obtenir le même résultat à l’aide de FadeInThemeAnimation et FadeOutThemeAnimation avec synchronisation superposée.

Pour plus d’informations, voir Animation de fondus.

Pointeur vers le haut/bas

Utilisez les animations PointerUpThemeAnimation et PointerDownThemeAnimation 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.

Pour plus d’informations, voir Animation des actions de pointeur.

Repositionner

Utilisez les animations de repositionnement (RepositionThemeAnimation ou RepositionThemeTransition) pour déplacer un élément à un autre endroit. Par exemple, le déplacement des en-têtes dans un contrôle d’éléments d’en-tête a recours à l’animation de repositionnement.

Pour plus d’informations, voir Animation de repositionnement.

Afficher/Masquer le menu contextuel

Utilisez PopInThemeAnimation et PopOutThemeAnimation quand vous affichez et masquez un objet Popup ou interface utilisateur contextuelle similaire par-dessus la vue actuelle. PopupThemeTransition est une transition thématique qui fournit un retour utile si vous souhaitez effectuer un abandon interactif d’une fenêtre contextuelle.

Pour plus d’informations, voir Animation de l’interface utilisateur contextuelle.

Afficher/Masquer l’interface utilisateur latérale

Utilisez l’animation EdgeUIThemeTransitionpour faire glisser des éléments d’interface utilisateur latéraux de petite taille dans et en dehors de la vue. Par exemple, utilisez ces animations quand vous affichez une barre de l’application personnalisée en haut ou en bas de l’écran ou une surface d’interface utilisateur pour des erreurs et des avertissements en haut de l’écran.

Utilisez l’animation PaneThemeTransition pour afficher ou masquer un volet ou un panneau. Cette animation convient à l’interface utilisateur latérale de grande taille, telle qu’un clavier personnalisé ou un volet de tâches.

Pour plus d’informations, voir Animation latérale de l’interface utilisateur.

Changements d’éléments de listes

Utilisez l’animation AddDeleteThemeTransition pour ajouter un comportement animé quand vous ajoutez ou supprimez un élément dans une liste existante. Pour l’ajout, la transition commence par repositionner les éléments existants dans la liste pour faire de la place aux nouveaux éléments, puis elle ajoute les nouveaux éléments. Pour la suppression, la transition 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.

Il existe aussi un objet ReorderThemeTransition distinct que vous appliquez si un élément change de position dans une liste. Son animation diffère de la suppression d’un élément et de son ajout à un nouvel emplacement avec les animations d’ajout/suppression associées.

Pour plus d’informations, voir Animation de changements d’éléments de listes.

Glisser-déplacer

Utilisez les animations de glissement (DragItemThemeAnimation, DragOverThemeAnimation) et de déplacement (DropTargetItemThemeAnimation) pour donner un retour visuel quand l’utilisateur fait glisser ou dépose un élément.

Quand elles sont actives, les animations montrent à 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 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.

Pour plus d’informations, voir Animation de séquences de glisser-déplacer.

Mouvements de balayage

Utilisez l’animation SwipeHintThemeAnimation 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.

Utilisez l’animation SwipeBackThemeAnimation pour montrer que la vignette a été sélectionnée et pour la renvoyer à son emplacement de pause.

Pour plus d’informations, voir Animation de mouvements de balayage.

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 Windows Runtime :

Type d’élément d’interface utilisateurAnimation recommandée
Boîte de dialogue FadeInThemeAnimation et FadeOutThemeAnimation
Menu volant PopInThemeAnimation et PopOutThemeAnimation
Info-bulle FadeInThemeAnimation et FadeOutThemeAnimation
Menu contextuel PopInThemeAnimation et PopOutThemeAnimation
Barre de commandes EdgeUIThemeTransition
Volet de tâches ou panneau latéral PaneThemeTransition
Contenu d’un conteneur d’éléments d’interface utilisateur quelconque ContentThemeTransition
Pour les contrôles ou si aucune autre animation ne s’applique FadeInThemeAnimation et FadeOutThemeAnimation

 

Rubriques associées

Feuille de route pour les applications Windows Runtime en C# ou Visual Basic
Exemple d’animations de caractéristiques XAML
Exemple de bibliothèque d’animations HTML
Espace de noms Windows.UI.Xaml.Media.Animation

 

 

Afficher:
© 2014 Microsoft