Html5 JS implémente les compétences du didacticiel de la fonction Shake du téléphone mobile

Html5 JS implémente les compétences du didacticiel de la fonction Shake du téléphone mobile_html5

WBOY

Libérer： 2016-05-16 15:46:51

original

1561 Les gens l'ont consulté

Une fonctionnalité importante de HTML5 est 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.

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 implémenter 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. 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 le téléphone.

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 renverra 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é.

1. [Code] Écoute des événements de détection de mouvement
2. [Code] Obtention de l'accélération, y compris la gravité
3 [Code] Code d'implémentation de la méthode de base

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 capteur de gravité dans la version d'essai d'Opera H5 est implémenté en écoutant l'événement deviceOrientation de l'API DeviceOrientation
.

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 le téléphone.

1. [Code] Écoute des événements de détection de mouvement

Copiez le code

Le code est le suivant suit :

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}

2. Code] Obtenez le contenu contenant Accélération de la gravité

Copier le code

Le code est le suivant :

function deviceMotionHandler(eventData) {
var accélération =eventData.accelerationIncludingGravity;
}

3. [Code] Code d'implémentation de la méthode principale

Copiez le code

Le code est le suivant :

var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x, y, z, last_x, last_y, last_z;