Langage: HTML | XAML

Animation de mouvements de balayage (HTML)

Applies to Windows only

Utilisez des animations de balayage lorsque vous mettez en œuvre le modèle de sélection tactile Windows 8 (appelé balayage) pour la sélection d’un élément.

Cet ensemble d’animations comprend les API suivantes. Ces trois animations doivent être utilisées quand vous implémentez l’interaction de balayage :

La vidéo suivante illustre l’animation d’affichage par balayage :

La vidéo suivante illustre les animations de sélection et désélection par balayage :

Remarque  Comme le contrôle ListView inclut les animations de sélection tactile et de balayage, vous n’avez pas besoin d’implémenter ces animations quand vous utilisez ce contrôle.

Sélection par balayage

Utilisez l’animation de sélection par balayage quand l’utilisateur fait glisser un élément qui prend en charge la sélection par balayage. L’utilisateur doit faire glisser l’élément suffisamment loin pour le sélectionner, puis il le libère. L’animation de sélection par balayage ajoute l’indicateur de sélection par balayage (généralement une coche) qui montre l’état « sélectionné » sur l’élément et replace ce dernier dans sa position de repos.

Illustration montrant les étapes d’une animation de sélection par balayage : déplacement et activation

Pour utiliser cette animation, vous devez connaître l’indicateur de sélection qui sera affiché et la direction ainsi que la distance de l’animation.

Désélection par balayage

Utilisez l’animation de désélection par balayage quand l’utilisateur fait glisser un élément sélectionné suffisamment loin pour le désélectionner, puis le libère. L’animation de désélection par balayage supprime l’indicateur de sélection de l’élément et replace ce dernier dans sa position de repos.

Illustration montrant les étapes dans l’animation de désélection par balayage : déplacement et désactivation

Pour utiliser cette animation, vous devez connaître l’indicateur de sélection qui sera masqué et la direction ainsi que la distance de l’animation.

Affichage par balayage

Utilisez l’animation d’affichage par balayage pour montrer à l’utilisateur que l’élément prend en charge l’interaction par balayage. Lorsque l’utilisateur maintient appuyé un élément qui prend en charge l’interaction par balayage, l’animation déplace l’élément vers le bas puis vers le haut pour indiquer que l’élément prend en charge l’interaction par balayage.

Illustration montrant les étapes dans l’animation d’affichage par balayage : déplacement et désactivation

Pour utiliser cette animation, vous devez connaître la direction et la distance de l’animation. L’animation doit être jouée deux fois de manière séquentielle ; tout d’abord pour déplacer l’élément dans la direction spécifiée, puis pour replacer l’élément dans sa position de repos.

Autres ressources

Pour les exemples de code qui illustrent l’utilisation des API d’animation de balayage, 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 balayage.

Rubriques associées

Animation de votre interface utilisateur
swipeReveal
swipeSelect
swipeDeselect

 

 

Afficher:
© 2014 Microsoft