Animation de mouvements de balayage (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 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.
.png "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.
.png "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.
.png "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.