HTML5 utilise DeviceOrientation pour implémenter la fonction shake_jquery

HTML5 possède une fonctionnalité importante : DeviceOrientation, qui fournit une encapsulation avancée des capteurs de direction et de mouvement sous-jacents. Il nous permet d'implémenter facilement des fonctions intéressantes telles que la détection de gravité et la boussole. Cet article utilisera des exemples pour présenter comment utiliser les capteurs de mouvement et de direction gravitationnels de HTML5 pour obtenir l'effet de secouer votre téléphone.

DeviceOrientation comprend deux é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 et peut obtenir des données telles que l'accélération du mouvement lorsque le téléphone mobile est en mouvement.

HTML

Il y a un div#hand sur la page, qui est utilisé pour placer une image de poignée de main, et div#result est utilisé pour afficher les informations de résultat après avoir secoué.

<div id="hand" class="hand hand-animate"></div> 
<div id="result"></div> 

Nous pouvons utiliser CSS3 pour améliorer l'effet de page et utiliser l'effet d'animation -webkit-animation pour obtenir l'effet dynamique des images à manivelle. Veuillez télécharger le code source pour voir les détails.

Javascript

L'action de « secouer » signifie « l'appareil se déplace sur une certaine distance dans un certain laps de temps ». Par conséquent, le taux de changement des valeurs des axes x, y et z dans une certaine plage de temps est obtenu par surveiller les secousses de l'appareil via le mouvement de l'appareil consiste à déterminer l'appareil. Y a-t-il des secousses ? Afin d'éviter une mauvaise appréciation du mouvement normal, une valeur critique appropriée doit être fixée pour le taux de changement.
Nous utilisons le code shake.js encapsulé pour HTML5 pour déterminer le tremblement de l'appareil, adresse du projet : https://github.com/alexgibson/shake.js.

<script src="shake.js"></script> 

Instanciez d'abord Shake, puis commencez à surveiller le mouvement de l'appareil, à surveiller le mouvement de l'appareil et à rappeler le résultat de la surveillance : shakeEventDidOccur.

window.onload = function() { 
  var myShakeEvent = new Shake({ 
    threshold: 15 
  }); 
 
  myShakeEvent.start(); 
 
  window.addEventListener('shake', shakeEventDidOccur, false); 
 
  function shakeEventDidOccur () { 
    var result = document.getElementById("result"); 
    result.className = "result"; 
    var arr = ['妹子一枚','福利图片一套','码农笔记一本','土豪金一台']; 
    var num = Math.floor(Math.random()*4); 
    result.innerHTML = "恭喜，摇得"+arr[num]+"！"; 
    setTimeout(function(){ 
      result.className = "result result-show"; 
    }, 1000); 
  } 
}; 

Ici, la fonction shakeEventDidOccur() peut être personnalisée. Dans cet exemple, le résultat secoué est renvoyé et affiché sur la page. Veuillez consulter la démonstration DEMO.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.