Lors de la conférence des développeurs Baidu, j'ai présenté une autre fonctionnalité importante de HTML5 : DeviceOrientation, qui fournit une encapsulation de haut niveau du capteur de direction et du capteur de mouvement sous-jacents et prend en charge les événements DOM. Cette fonctionnalité comprend deux types d'événements :
1. DeviceOrientation : un événement qui encapsule les données du capteur d'orientation et peut obtenir les données d'orientation du téléphone mobile lorsqu'il est à l'arrêt, telles que l'angle, l'orientation, l'orientation, etc. téléphone mobile.
2. deviceMotion : un événement qui encapsule les données du capteur de mouvement, qui peut obtenir des données telles que l'accélération du mouvement lorsque le téléphone mobile est en mouvement.
En l'utilisant, nous pouvons facilement mettre en œuvre des fonctions intéressantes telles que la détection de gravité et la boussole, qui seront très utiles sur les téléphones mobiles. Par exemple, l'exemple de boule de détection de gravité dans la version d'essai d'Opera H5 est implémenté en écoutant l'événement deviceOrientation de l'API DeviceOrientation.
Utilisez HTML5 pour implémenter la fonction de secouer votre téléphone
En fait, cela peut également nous aider à implémenter une fonction très courante et à la mode dans les applications mobiles sur le Web : secouer votre téléphone.
La première fois que j'ai vu cette fonction, c'était dans PhotoShake. Plus tard, de nombreuses applications, grandes et petites, y compris WeChat, ont ajouté cette fonction.
Utilisez HTML5 pour réaliser la fonction de secouer le téléphone
Si vous avez déjà fait du développement Android ou iOS, vous connaissez peut-être très bien cette fonction. Mais ci-dessous, nous implémenterons cette fonctionnalité pour la première fois sur le Web.
Commençons !
DeviceMotionEvent (événement de mouvement de l'appareil) renvoie des informations sur l'accélération et la rotation de l'appareil. Les données d'accélération contiendront trois axes : x, y et z (comme le montre la figure ci-dessous, l'axe x passe horizontalement à travers l'écran du téléphone mobile ou le clavier de l'ordinateur portable, l'axe y passe verticalement à travers l'écran du téléphone mobile ou le clavier de l'ordinateur portable. , et l'axe z est perpendiculaire à l'écran du téléphone portable ou au clavier de l'ordinateur portable). Étant donné que certains appareils peuvent ne pas disposer de matériel permettant d'exclure l'influence de la gravité, cet événement renvoie deux propriétés, accélérationIncludingGravity (accélération incluant la gravité) et accélération (accélération), cette dernière excluant l'influence de la gravité.
Utilisez HTML5 pour implémenter la fonction de secouer le téléphone
Surveillons d'abord les événements de détection de mouvement.