Aller au-delà du panoramique, du zoom et de l'appui à l'aide des événements de mouvement

IEBlog Français

Blog de l'équipe de développement de Windows Internet Explorer

Aller au-delà du panoramique, du zoom et de l'appui à l'aide des événements de mouvement

  • Comments 0

En nous basant sur vos commentaires, nous avons amélioré la façon dont les sites peuvent donner lieu à des expériences tactiles avancées à l'aide d'événements de mouvement dans IE10 dans la Windows 8 Release Preview. Nous avons déjà expliqué les premières mesures que les développeurs Web doivent prendre pour s'assurer que leurs sites sont adaptés aux interfaces tactiles et comment élaborer de nouvelles expériences qui fonctionnent bien sur les dispositifs de saisie, notamment le tactile multipoint, à l'aide d'événements de pointeur, indépendamment du matériel. Ce billet traite des événements de mouvement d'IE10. La démonstration de test Browser Surface affichée ci-dessous présente un exemple d'événements de mouvement.

Capture d'écran de la démonstration Browser Surface présentant des photos organisées de manière aléatoire sur la surface.
Les utilisateurs peuvent faire glisser, pincer et faire pivoter les photos à l'aide de la démonstration Browser Surface

IE10 dans Windows 8 Release Preview introduit les objets de reconnaissance des mouvements dans JavaScript. Les sites peuvent créer des objets de mouvement, décider des pointeurs (souris, stylet ou contacts tactiles) traiter et diriger les événements de mouvement vers l'élément souhaité. Le navigateur calcule ensuite le mouvement qui est effectué et avertit la page via des événements. Ceci permet aux développeurs d'élaborer des expériences tactiles qui ne sont encore possibles nativement dans aucun autre navigateur. Cela inclut plusieurs mouvements simultanés, par exemple la rotation de deux pièces d'un puzzle avec vos mains.

Regardons comment cela fonctionne en code.

Création d'un objet de mouvement

Pour gérer les mouvements dans votre site, vous devez commencer par instancier un objet de mouvement.

var myGesture = new MSGesture();

Ensuite, vous devez attribuer un élément cible au mouvement. Il s'agit de l'élément vers lequel le navigateur déclenchera des événements de mouvement. C'est également l'élément qui détermine l'espace de coordonnées des événements.

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

Enfin, vous devez indiquer à l'objet de mouvement quels pointeurs traiter dans sa reconnaissance des mouvements.

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

Remarque : n'oubliez pas que vous devez utiliser –ms-touch-action pour configurer l'élément de façon à ce qu'il n'effectue pas d'actions tactiles par défaut, telles que le déplacement et le zoom, et qu'à la place, des événements de pointeur doivent être fournis pour la saisie.

Gestion d'événements de pointeur

Lorsqu'un objet de mouvement comporte une cible valide et qu'au moins un pointeur lui a été ajouté, il commence à déclencher des événements de mouvement. Les événements de mouvement se déclinent sous 2 formes : les mouvements statiques (par exemple l'appui ou l'appui prolongé) et les mouvements dynamiques (par exemple le pincement, la rotation ou le balayage).

Appui

La reconnaissance de mouvement la plus élémentaire est un appui. Lorsqu'un appui est détecté, l'événement MSGestureTap est déclenché sur l'élément cible de l'objet de mouvement. Différent de l'événement de clic, l'action d'appuyer se déclenche uniquement lorsqu'un utilisateur effectue une pression (ou appuie sur un bouton de la souris ou sur un stylet) vers le bas et le haut sans déplacement. Ceci est souvent utile pour faire la distinction entre un utilisateur qui appuie sur un élément et un utilisateur qui fait glisser l'élément.

Appui prolongé

L'action d'appuyer et de maintenir se produit lorsqu'un utilisateur exerce une pression avec un doigt, le maintient pendant un moment, puis le lève sans le déplacer. Pendant une interaction d'appui prolongé, l'événement MSGestureHold se déclenche plusieurs fois pour les différents états du mouvement :

element.addEventListener("MSGestureHold", handleHold);

function handleHold(evt) {

if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {

// Begin signals the start of a gesture. For the Hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.

}

if (evt.detail & evt.MSGESTURE_FLAG_END) {

// End signals the end of the gesture.

}

if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {

// Cancel signals the user started the gesture but cancelled it. For hold, this occurs when the user drags away before lifting. This flag is sent together with the End flag, signaling the gesture recognition is complete.

}

}

Mouvements dynamiques (pincement, rotation, balayage et glissement)

Les mouvements dynamiques, tels que le pincement ou la rotation, sont signalés sous la forme de transformations similaires aux transformations 2D CSS. Trois événements sont déclenchés pour les mouvements dynamiques : MSGestureStart, MSGestureChange (il se déclenche de manière répétée lorsque le mouvement continue) et MSGestureEnd. Chaque événement contient des informations sur l'échelle (pincement), la rotation, la conversion et la vitesse.

Comme les mouvements dynamiques signalent les transformations, il est facile d'utiliser MSGesture avec les transformations 2D CSS pour manipuler un élément comme une photo ou une pièce de puzzle. Par exemple, vous pouvez activer la mise à l'échelle, la rotation et le glissement de l'élément comme suit :

targetElement.addEventListener("MSGestureChange", manipulateElement);

function manipulateElement(e) {

// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition

// if (e.detail == e.MSGESTURE_FLAG_INERTIA)

// return;

 

var m = new MSCSSMatrix(e.target.style.transform); // Get the latest CSS transform on the element

e.target.style.transform = m

.translate(e.offsetX, e.offsetY) // Move the transform origin under the center of the gesture

.rotate(e.rotation * 180 / Math.PI) // Apply Rotation

.scale(e.scale) // Apply Scale

.translate(e.translationX, e.translationY) // Apply Translation

.translate(-e.offsetX, -e.offsetY); // Move the transform origin back

}

Les mouvements dynamiques, tels que l'échelle et la rotation, sont pris en charge avec la souris en faisant pivoter la roulette de la souris avec les touches de modification CTRL ou MAJ, respectivement.

Résumé

Les événements de mouvement d'IE10 vous permettent d'élaborer des expériences tactiles qui ne sont encore possibles dans aucun autre navigateur. Consultez MSDN pour une documentation approfondie sur les objets MSGesture et sur les événements MSGesture.

Allez au-delà du panoramique, du zoom et de l'appui avec vos sites à l'aide des événements de mouvement.

—Jacob Rossi, chef de projet, Internet Explorer

  • Loading...