Tutoriel sur l'utilisation de HTML5 pour réaliser la fonction de secouer votre téléphone

Commentaire: La fonction Shake sur le téléphone mobile est bonne. Comment l'implémenter

Lors de la conférence Baidu Developer, j'ai introduit une autre caractéristique importante de HTML5, qui est l'origine device, qui résume le capteur de direction sous-jacent et le capteur de mouvement dans l'emballage de haut niveau et fournit une prise en charge des événements DOM. Cette fonctionnalité comprend deux événements:

1.

2. Devicemotion: les événements encapsulent les données du capteur de mouvement et peuvent obtenir des données telles que l'accélération de mouvement dans l'état de mouvement du téléphone mobile.

L'utiliser, nous pouvons facilement atteindre 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 balle de détection de gravité dans la version d'essai Opera H5 est obtenu en surveillant l'événement de dispositif d'origine de l'API ORIGNORIENTATION DE DÉVILLAGE.

En fait, cela peut également nous aider à réaliser une fonction très courante et à la mode dans une application mobile sur la page Web: secouez le téléphone mobile.

J'ai d'abord vu cette fonction dans Photoshake, et plus tard de nombreuses applications, y compris WeChat, ont ajouté cette fonction.

Si vous avez déjà fait du développement Android ou iOS, vous pouvez être très familier avec de telles fonctionnalités. Mais ci-dessous, nous implémenterons cette fonctionnalité pour la première fois sur le Web.

Commençons rapidement!

DeviceMotionEvent renvoie les informations pertinentes de l'appareil sur l'accélération et la rotation. Les données d'accélération contiendront trois axes: X, Y et Z (schématiquement illustré dans la figure ci-dessous, l'axe X pénètre dans l'écran de téléphone mobile ou le clavier d'ordinateur portable, et l'axe Y exécute le scisping du téléphone mobile ou le clavier pour ordinateur portable et le clavier d'ordinateur portable). Étant donné que certains appareils peuvent ne pas avoir de matériel pour exclure l'impact de la gravité, l'événement renvoie deux propriétés, accélérez la gravité et l'accélération, qui excluent l'impact de la gravité.

Utilisez HTML5 pour réaliser la fonction de secouer votre téléphone

Surveillons d'abord les événements de détection de mouvement.

[javascript]

if (window.deviceMotionEvent) {

window.addeventListener («DeviceMotion», DeviceMotionHandler, false);

}

[/ javascript]

Obtenez ensuite l'accélération contenant la gravité.

[javascript]

fonction DeviceMotionHandler (eventData) {

var accélération = eventData.ACCELERACE INCLUDEGRAVITY;

}

[/ javascript] </p> <p>

Ce qui suit concerne la façon dont nous calculons le principe des utilisateurs secouant leurs téléphones. Les points clés à considérer sont les suivants:

1. La plupart des utilisateurs secouent leur téléphone dans une direction pour secouer;

2. Les données d'accélération dans trois directions changeront certainement lors de la tremblement;

3. Nous ne pouvons pas mal juger le comportement de mouvement normal des téléphones mobiles. Pensez-y, si votre téléphone portable est placé dans votre poche, il aura également des changements de données d'accélération lors de la marche.

En résumé, nous devons calculer les accélérations dans trois directions, les mesurer à intervalles, examiner leur taux de variation sur une période de temps fixe et devoir déterminer un seuil pour qu'il déclenche l'action.

Nous devons définir plusieurs variables pour enregistrer les données des axes historiques X, Y et Z et le temps du dernier déclencheur. Le code d'implémentation de la méthode principale est le suivant:

var shake_threshold = xxx;

var last_update = 0;

var x, y, z, last_x, last_y, last_z;

fonction DeviceMotionHandler (eventData) {

var accélération = eventData.ACCELERACE INCLUDEGRAVITY;

var curtime = newdate (). gettime ();

if ((Curtime - LastUpdate) & gt; 100) {

var difftime = curtime -last_update;

last_update = curtime;

x = accélération.x;

y = accélération.y;

z = accélération.z;

var speed = math.abs (x + y + z - last_x - last_y - last_z) / difftime * 10000;

if (speed & gt; shake_threshold) {

alerte ("Shaked!");

}

last_x = x;

last_y = y;

last_z = z;

}

}

De cela, nous avons terminé la fonction de secouer le téléphone. N'est-ce pas très simple?