HTML5 for shaking and shaking function

Feel very good, just copy it, later may use ....

Use HTML5 to realize the function of shaking the mobile phone to read the tutorial:2057Time: 2013-09-05 14:55:18 font: [Big small]

At the Baidu Developer Conference I introduced HTML5 another important feature is the deviceorientation, which carries the advanced encapsulation of the underlying directional sensor and motion sensor, providing support for DOM events. This feature consists of two events:
1, Deviceorientation: Encapsulate the direction sensor data events, you can get the mobile phone in the static state of the direction of data, such as the angle of the mobile phone, orientation, orientation and so on.
2, Devicemotion: The event that encapsulates the motion sensor data, can get the motion acceleration of the mobile phone.
Using it, we can easily realize the interesting functions of gravity sensor, compass and so on, which will be very useful on the phone. For example, the example of a gravity-sensing ball in opera H5 experience is achieved by listening to the Deviceorientation event of the Deviceorientation API.

Use HTML5 to realize the function of shaking the phone
In fact, it also helps us to implement a very common and fashionable feature in a mobile phone app on the Web: the phone shakes.
The first thing I saw was that this feature was actually in the Photoshake, and then a lot of large and small applications were added to this feature.
Use HTML5 to realize the function of shaking the phone
If you've ever done Android or iOS development, you might know a lot about this feature. But for the first time, we'll implement this feature on the Web.
Let's get started!
The Devicemotionevent (Device motion event) return device has information about acceleration and rotation. The acceleration data will consist of three axes: x, Y and Z (shown as indicated by the axis transverse through the phone screen or notebook keyboard, the Y axis longitudinal through the phone screen or notebook keyboard, the z axis perpendicular to the phone screen or notebook keyboard). Because some devices may not have the hardware to exclude the effects of gravity, the event returns two properties, accelerationincludinggravity (acceleration with gravity) and Acceleration (acceleration), which excludes the effects of gravity.

Use HTML5 to realize the function of shaking the phone
Let's start by monitoring motion sensing events.

Copy CodeThe code is as follows:
[Javacript]
if (window. Devicemotionevent) {
Window.addeventlistener (' devicemotion ', Devicemotionhandler, false);
}
[/javascript]
Then get the acceleration with gravity.
[Javacript]
function Devicemotionhandler (eventData) {
var acceleration =eventdata.accelerationincludinggravity;
}
[/javascript]</p><p>

Here's how we calculate the principle of the user shaking the phone. the main points to consider are as follows:
1, the user is mostly in a direction of shaking the mobile phone to shake;
2, in the shaking of the three-direction acceleration data will certainly change;
3, we can not misjudge the normal movement of mobile phones, think, if you put your phone in the trouser pocket, walking when it will also have acceleration data changes.
In conclusion, we should calculate the acceleration in three directions, measure them at intervals, examine their rate of change over a fixed period of time, and need to determine a threshold to trigger the action.
We need to define several variables to record the historical x, Y, z-axis data, and the time of the last trigger. The core method implementation code is as follows:

Copy CodeThe 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 * 10000;
if (Speed &gt; Shake_threshold) {
Alert ("shaked!");
}
last_x = x;
last_y = y;
Last_z = Z;
}
}

HTML5 for shaking and shaking function