communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > Implémenter la fonction de tremblement de WeChat basée sur les compétences du didacticiel html5 DeviceOrientation_html5

Implémenter la fonction de tremblement de WeChat basée sur les compétences du didacticiel html5 DeviceOrientation_html5

WBOY
Libérer： 2016-05-16 15:46:30
original
1930 Les gens l'ont consulté

En HTML5, l'événement DeviceMotion fourni par la fonctionnalité DeviceOrientation encapsule l'heure du capteur de mouvement de l'appareil. En modifiant l'heure, vous pouvez obtenir l'état de mouvement, l'accélération et d'autres données de l'appareil (il existe également un événement deviceOrientation qui fournit l'angle de l'appareil, orientation et autres informations) .

Déterminer l'état de mouvement de l'appareil via DeviceMotion peut nous aider à obtenir l'effet interactif « secouer » sur la page Web.

Surveillance des événements de mouvement


Copier le code
Le code est le suivant :

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('Votre téléphone est horrible, achetez-en un nouveau.');
}

Obtenir des informations sur l'accélération

L'action « secouer » signifie que l'appareil se déplace sur une certaine distance dans un certain laps de temps. Par conséquent, en surveillant le taux de changement des valeurs x, y, z obtenues à l'étape précédente dans une certaine plage de temps. , vous pouvez déterminer si l'appareil a fait un jugement tremblant. Afin d'éviter une mauvaise appréciation du mouvement normal, une valeur critique appropriée doit être fixée pour le taux de changement.


Copier le code
Le code est le suivant :

fonction deviceMotionHandler(eventData) {
var accélération = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 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;
var status = document.getElementById("status");
if (speed > SHAKE_THRESHOLD) {
doResult();
}
last_x = x ;
last_y = y;
last_z = z;
}
}

L'effet est comme indiqué sur l'image :


Étiquettes associées：
html5
source：php.cn
Article précédent：Analyse approfondie de l'utilisation de l'attribut viewBox lors de l'utilisation d'images SVG dans les compétences du didacticiel HTML5_html5 Article suivant：Dessin sur toile HTML5 - Utilisez Canvas pour dessiner des graphiques et des didacticiels textuels Utilisez la toile HTML5 pour dessiner de belles images_html5 compétences du didacticiel
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal