How to Use HTML5 to shake mobile phones

Comments: The shake function on the mobile phone is good. How can this problem be achieved?

At the Baidu Developer Conference, I introduced another important feature of HTML5, DeviceOrientation. It encapsulates the underlying direction sensors and motion sensors in advanced mode and provides DOM Event support. This feature includes two types of events:
1. deviceOrientation: encapsulates the event of the direction sensor data to obtain the direction data in the mobile phone's static state, such as the angle, orientation, and orientation of the mobile phone.
2. deviceMotion: events that encapsulate motion sensor data can be used to obtain Motion Acceleration and other data in the mobile phone's motion status.
Using it, we can easily implement interesting functions such as gravity sensing and compass, which will be very useful on mobile phones. For example, the gravity sensor ball in Opera H5 is implemented by listening to the DeviceOrientation event of the deviceOrientation API.
 
Use HTML5 to shake mobile phones
In fact, it can also help us implement a very common and fashionable function in a mobile app on the webpage: Shake the mobile phone.
I first saw this feature in PhotoShake. Later, many, large, and small applications included this feature.
Use HTML5 to shake mobile phones
If you have developed Android or iOS, you may be familiar with such functions. However, we will implement this function for the first time on the Web.
Let's get started!
DeviceMotionEvent (device motion event) returns information about the device's acceleration and rotation. The acceleration data will contain three axes: x, y, and z (as shown in the diagram, the x axis horizontally runs through the mobile phone screen or notebook keyboard, and the y axis vertically runs through the mobile phone screen or notebook keyboard, Z axis perpendicular to the mobile phone screen or laptop keyboard ). Because some devices may not have hardware to eliminate the impact of gravity, this event will return two attributes, accelerationIncludingGravity (acceleration containing gravity) and acceleration (acceleration), which exclude the impact of gravity.

Use HTML5 to shake mobile phones
Let's first listen to motion sensing events.

The Code is as follows:
[Javacript]
If (window. DeviceMotionEvent ){
Window. addEventListener ('deviceid', deviceMotionHandler, false );
}
[/Javascript]
Then obtain the acceleration of gravity.
[Javacript]
Function deviceMotionHandler (eventData ){
Var acceleration = eventData. accelerationIncludingGravity;
}
[/Javascript] </p> <p>
The following describes how users shake their mobile phones.The main considerations are as follows:
1. Most users shake mobile phones in one direction;
2. When shaking, the acceleration data in the three directions must change;
3. We cannot misjudge the normal motion of a mobile phone. Think about it. If your mobile phone is placed in your trouser pocket, it will also change the acceleration data when walking.
To sum up, we should calculate the acceleration in three directions, measure them at intervals, evaluate their change rate in a fixed period of time, and determine a threshold for it to trigger the action.
We need to define several variables to record the data of x, y, and Z axes and the last trigger time. The core method implementation code is as follows:

The Code is as follows:
Var SHAKE_THRESHOLD = xxx;
Var last_update = 0;
Var x, y, z, last_x, last_y, last_z;
Function deviceMotionHandler (eventData ){
Var acceleration = eventData. accelerationIncludingGravity;
Var curTime = newDate (). getTime ();
If (curTime-lastUpdate) & gt; 100 ){
Var diffTime = curTime-last_update;
Last_update = curTime;
X = acceleration. x;
Y = acceleration. y;
Z = acceleration. z;
Var speed = Math. abs (x + y + z-last_x-last_y-last_z)/diffTime x 10000;
If (speed & gt; SHAKE_THRESHOLD ){
Alert ("shaked! ");
}
Last_x = x;
Last_y = y;
Last_z = z;
}
}


As a result, we have completed the mobile phone shake function, isn't it very simple?