Animation de séquences de glisser-déplacer (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 ces animations pour les actions de glisser-déplacer lorsque des personnes déplacent des objets avec leurs doigts ou des périphériques d’entrée, tels qu’une souris ou un stylet. Les actions de glisser-déplacer courantes comprennent le déplacement d’un seul élément dans une liste et le positionnement d’un élément au-dessus d’un autre.

Remarque  Utilisez les animations par glissement uniquement si l’utilisateur déplace l’objet. Pour déplacer l’objet d’une autre manière, utilisez l’animation de repositionnement.

Cet ensemble d’animations comprend les fonctions suivantes :

• dragSourceStart : l’utilisateur commence à faire glisser un objet.
• dragBetweenEnter : l’utilisateur fait glisser un objet entre deux autres objets où ce dernier peut venir se placer.
• dragBetweenLeave : l’utilisateur fait glisser un objet en l’éloignant d’un lieu de placement éventuel.
• dragSourceEnd : l’utilisateur place un objet qu’il fait glisser.

La prise en charge du glissement par défaut est disponible dans ListView et GridLayout pour JavaScript. Les animations de type glisser-déplacer sont intégrées lorsque vous utilisez ces contrôles dans votre interface utilisateur. Cependant, les animations évoquées dans cette rubrique sont utiles si vous étendez la fonctionnalité glisser-déplacer à d’autres contrôles, en particulier vos propres contrôles personnalisés.

La vidéo suivante illustre les animations associées à une opération de glisser-déplacer :

Début du glissement

Chaque séquence d’animation pour les actions de glisser-déplacer commence par un début de glissement (dragSourceStart), qui est affiché lorsque l’utilisateur commence à faire glisser un objet.

Cette animation modifie l’apparence de la source du déplacement (à savoir l’objet glissé) et du ou des objets affectés. Un objet affecté représente un objet susceptible de changer de position en réponse à la séquence de glisser-déplacer. Par exemple, si vous réorganisez une liste, tous les éléments qu’elle contient, hormis la source du déplacement, sont des objets affectés car leur emplacement dans la liste est à même de changer. Les éléments affectés sont animés afin de montrer à l’utilisateur comment leur emplacement changerait en réponse à l’action en cours. Notez que les sources de déplacement ne possèdent pas toutes des objets affectés.

Pour utiliser la fonction dragSourceStart, vous devrez connaître l’objet que l’utilisateur fait glisser ainsi que ses objets affectés.

Les images suivantes illustrent la relation entre la source du déplacement et les objets affectés dans l’animation de début du glissement. La première image montre l’objet à glisser et ses voisins avant que l’utilisateur commence à le faire glisser.

Lorsque l’utilisateur sélectionne l’objet et commence à le faire glisser, la taille de l’objet glissé s’accroît tandis que la taille des objets affectés diminue.

L’image suivante illustre le scénario dans lequel les objets voisins ne sont pas affectés.

Fin du glissement

Chaque séquence d’animation pour les actions de glisser-déplacer se termine par l’animation de fin du glissement (dragSourceEnd), qui est affichée ici lorsque l’utilisateur dépose un objet glissé. L’animation de fin du glissement n’est jamais utilisée à moins que l’animation de début du glissement ne soit utilisée en premier.

L’animation de fin du glissement place la source du déplacement (l’objet glissé) dans sa position finale. En même temps, elle supprime les changements visuels apportés à la source du déplacement et aux éléments affectés, qui ont été appliqués par l’animation de début du glissement. Les objets affectés dans un appel à dragSourceEnd sont toujours les mêmes objets que ceux utilisés dans l’appel à dragSourceStart.

Pour utiliser la fonction dragSourceEnd, vous devrez connaître l’objet que l’utilisateur dépose, l’emplacement final de l’objet déposé, ainsi que les objets affectés (si la fonction dragSourceStart les a inclus).

Les images suivantes illustrent la relation entre la source du déplacement et ses objets affectés dans l’animation de fin du glissement. La première image illustre un objet avant que l’utilisateur ne le dépose dans un ensemble d’objets affectés. La source du déplacement a une taille supérieure à sa taille normale et est décalée par rapport à la liste. Les objets affectés ont une taille inférieure à leur taille normale.

L’image suivante illustre le scénario dans lequel l’objet déposé n’affecte pas d’autres objets. La source du déplacement apparaît à nouveau plus grande et décalée par rapport aux autres objets, mais ceux-ci s’affichent avec leur taille normale.

Une fois que l’utilisateur dépose la source du déplacement, tous les objets reprennent leur taille d’origine, et sont repositionnés si nécessaire.

Glissement entre les objets

Utilisez l’animation de glissement entre les objets (dragBetweenEnter) lorsque l’utilisateur fait glisser un objet (c’est-à-dire la source du déplacement) entre deux autres objets où l’objet peut être déposé. Cette animation montre à l’utilisateur les objets affectés qui s’écartent pour faire de la place à la source de déplacement s’il choisit de la déposer à l’emplacement désigné.

Pour utiliser la fonction dragBetweenEnter, vous devrez connaître les objets affectés ainsi que la direction et la distance que ces objets parcourront dans le cadre de l’animation.

Les images suivantes affichent le déplacement des objets affectés en réponse à la source de déplacement. La première image affiche les objets affectés avant que la source de déplacement ne déclenche l’animation de glissement entre les objets.

Dans l’image suivante, l’animation de glissement entre les objets a entraîné l’écartement des deux objets de chaque côté de la source de déplacement.

Glissement entre les objets par éloignement

Utilisez l’animation de glissement entre les objets par éloignement (dragBetweenLeave) lorsque l’utilisateur fait glisser en éloignant la source de déplacement de la zone légitime cible entre les deux objets. Cette animation montre à l’utilisateur que la source de déplacement n’est plus en position pour être déposée entre ces deux objets. L’animation de glissement entre les objets par éloignement est utilisée uniquement après une animation de glissement entre les objets.

L’action de l’animation de glissement entre les objets par éloignement est l’opposée de l’animation de glissement entre les objets. L’animation de glissement entre les objets par éloignement replace les objets affectés dans leur position d’origine.

Pour utiliser la fonction dragBetweenLeave, vous devez connaître les objets affectés.

Les images suivantes affichent le déplacement des objets affectés en réponse à la source de déplacement. La première image illustre les objets affectés séparés par l’animation pour la source de déplacement entre les objets en réponse à la position de la source de déplacement.

Dans l’image suivante, l’animation de glissement entre les objets par éloignement a été appelée pour rétablir les objets affectés dans leur emplacement d’origine.

Autres ressources

Pour les exemples de code qui illustrent l’utilisation des fonctions d’animation de type glisser-déplacer, 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 type glisser-déplacer.

Rubriques associées

Animation de votre interface utilisateur

dragSourceEnd

dragSourceStart

dragBetweenLeave

dragBetweenEnter