HTML5 uses DeviceOrientation to implement the shake function_jquery

HTML5 has an important feature: DeviceOrientation, which provides advanced encapsulation of the underlying direction and motion sensors. It allows us to easily implement interesting functions such as gravity sensing and compass. This article will use examples to introduce how to use HTML5's gravity motion and direction sensors to achieve the effect of shaking your phone.

DeviceOrientation includes two events:

1. deviceOrientation: An event that encapsulates the orientation sensor data and can obtain the orientation data of the mobile phone when it is stationary, such as the angle, orientation, orientation, etc. of the mobile phone.
2. deviceMotion: an event that encapsulates motion sensor data and can obtain data such as motion acceleration when the mobile phone is in motion.

HTML

There is a div#hand on the page, which is used to place a hand-shake image, and div#result is used to display the result information after shaking.

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

We can use CSS3 to enhance the page effect, and use -webkit-animation animation effect to achieve the dynamic effect of hand-cranked images. Please download the source code to view the details.

Javascript

The action of "shake" means "the device moves a certain distance within a certain period of time." Therefore, the change rate of the x, y, and z-axis values ​​within a certain time range obtained by monitoring the shaking of the device through devicemotion is to determine the device Is there any shaking? In order to prevent misjudgment of normal movement, an appropriate critical value needs to be set for the rate of change.
We use the encapsulated shake.js code for HTML5 to determine device shaking, project address: https://github.com/alexgibson/shake.js.

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

First instantiate Shake, then start to monitor device movement, monitor device movement, and call back the monitoring result: 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); 
  } 
}; 

Here, the function shakeEventDidOccur() can be customized. In this example, the shaken result is returned and displayed on the page. Please see the DEMO demonstration.

The above is the entire content of this article, I hope you all like it.