Modèles d’animation pour les applications du Windows Store

Découvrez comment utiliser des animations utiles pour lier visuellement des éléments et raconter une histoire. Les animations pour les scénarios Windows 8 ont été conçues pour transmettre des informations, informer les utilisateurs de ce qui les attend et instaurer un climat de confiance. Pour obtenir des procédures et des instructions détaillées, voir la section Animation de votre interface utilisateur.

Lancer votre application

Affichez la première page de votre application.

JavaScript : utiliser enterPage

XAML : utiliser EntranceThemeTransition

Voir aussi Animation de transitions à l’aide de la bibliothèque d’animations

Transition entre les pages

Assurez la transition d’une page à une autre de votre application.

JavaScript : utiliser exitPage, puis enterPage

XAML : utiliser EntranceThemeTransition

Voir aussi Animation de transitions à l’aide de la bibliothèque d’animations

Transition entre les contenus

Assurez la transition du contenu d’une zone dans votre page.

JavaScript : utiliser exitContent, puis enterContent

XAML : utiliser ContentThemeTransition

Voir aussi Animation de transitions à l’aide de la bibliothèque d’animations

Retour d’action tactile et de clic

Affichez un retour visuel montrant que l’utilisateur a appuyé ou cliqué sur une vignette.

JavaScript : utiliser pointerDown et pointerUp

XAML : utiliser PointerDownThemeAnimation et PointerUpThemeAnimation

Voir aussi Animation de pointeurs à l’aide de la bibliothèque d’animations

Afficher une interface utilisateur ou des contrôles provisoires

Affichez et masquez une interface utilisateur ou des contrôles provisoires.

JavaScript : utiliser fadeIn, puis fadeOut

XAML : utiliser FadeInThemeAnimation et FadeOutThemeAnimation

Voir aussi Animation des éléments de l’interface utilisateur à l’aide de la bibliothèque d’animations

Actualiser

Actualisez le contenu ou animez une modification de disposition de la page existante.

JavaScript : utiliser crossFade

XAML : utiliser FadeOutThemeAnimation et FadeInThemeAnimation

Voir aussi Animation des éléments de l’interface utilisateur à l’aide de la bibliothèque d’animations

Afficher des contrôles supplémentaires ou du contenu inséré

Faites de la place et affichez des contrôles ou du contenu supplémentaires dans votre interface utilisateur existante.

JavaScript : utiliser createExpandAnimation et createCollapseAnimation

XAML : non applicable

Ajouter ou supprimer des éléments d’une liste

Ajoutez ou supprimez un ou plusieurs éléments d’une liste existante.

JavaScript : utiliser createAddToListAnimation et createDeleteFromListAnimation

XAML : utiliser AddDeleteThemeTransition

Voir aussi Animation de listes et d’éléments de liste avec la Bibliothèque d’animations

Filtrer une liste en cours de recherche

Ajoutez ou supprimez rapidement divers éléments dans une liste en cours de recherche.

JavaScript : utiliser createAddToSearchListAnimation et createDeleteFromSearchListAnimation

XAML : non applicable

Voir aussi Animation de listes et d’éléments de liste avec la Bibliothèque d’animations

Afficher une commande ou une barre de messages

Affichez et masquez une commande ou une barre de messages au bord de l’écran.

JavaScript : utiliser showEdgeUI et hideEdgeUI

XAML : utiliser EdgeUIThemeTransition

Voir aussi Animation des éléments de l’interface utilisateur à l’aide de la bibliothèque d’animations

Afficher un volet des tâches

Affichez et masquez un volet de tâches ou un autre conteneur d’interface utilisateur volumineux au bord de l’écran.

JavaScript : utiliser showPanel et hidePanel

XAML : utiliser PaneThemeTransition

Voir aussi Animation des éléments de l’interface utilisateur à l’aide de la bibliothèque d’animations

Afficher un élément d’interface indépendant

Affichez et masquez un élément d’interface indépendant tel qu’un menu volant ou un menu contextuel.

JavaScript : utiliser showPopup et hidePopup

XAML : utiliser PopInThemeAnimation et PopOutThemeAnimation

Voir aussi Animation des éléments de l’interface utilisateur à l’aide de la bibliothèque d’animations

Glisser

Faites glisser les éléments pour réorganiser une liste.

JavaScript : utiliser dragSourceStart, dragSourceEnd, dragBetweenEnter et dragBetweenLeave

XAML : utiliser DragItemThemeAnimation, DropTargetItemThemeAnimation et DragOverThemeAnimation

Voir aussi Animation de listes et d’éléments de liste avec la Bibliothèque d’animations

Balayer-sélectionner une vignette

Animez le retour d’une vignette à sa position de repos après que l’utilisateur a effectué un mouvement de balayage.

JavaScript : utiliser swipeSelect et swipeDeselect

XAML : utiliser SwipeBackThemeAnimation

Révéler la fonctionnalité de balayage

Prévoyez une animation pour indiquer qu’une vignette prend en charge le mouvement de balayage.

JavaScript : utiliser swipeReveal

XAML : utiliser SwipeHintThemeAnimation

Mettre à jour une vignette

Mettez à jour l’ensemble du contenu d’une vignette ou affichez temporairement des informations supplémentaires sur la vignette.

JavaScript : utiliser createPeekAnimation

XAML : non applicable

Mettre à jour un badge

Mettez à jour un badge numérique avec une nouvelle valeur.

JavaScript : utiliser updateBadge

XAML : non applicable

Repositionner

Repositionnez l’interface utilisateur ou le contenu.

JavaScript : utiliser createRepositionAnimation

XAML : utiliser RepositionThemeTransition

Voir aussi Animation des éléments de l’interface utilisateur à l’aide de la bibliothèque d’animations

Rubriques associées

Recommandations en matière d’expérience utilisateur pour les applications du Windows Store

Animation de votre interface utilisateur