Shulou(Shulou.com)06/03 Report--

How to use HTML 5 to achieve mobile phone shake function, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

DeviceOrientation: events that encapsulate the direction sensor data can obtain the direction data in the static state of the phone, such as the phone's angle, orientation, orientation, and so on.

DeviceMotion: encapsulates the events of the motion sensor data, you can obtain the mobile phone motion acceleration and other data.

With it, we can easily achieve gravity sensing, compass and other interesting functions, which will be very useful on mobile phones.

Use HTML5 to realize the function of shaking your phone.

In fact, it can also help us to achieve a very common and fashionable function in a mobile app on the web: shake the phone.

I first saw this feature in PhotoShake, and then many apps, large and small, including Wechat, added it.

Use HTML5 to realize the function of shaking your phone.

If you've ever done Android or iOS development, you probably know a lot about this feature. But next, we will implement this function on Web.

Let's get started!

DeviceMotionEvent (device Motion event) returns information about acceleration and rotation of the device. The acceleration data will contain three axes: XMagol y and z (shown below, the x-axis horizontally runs through the phone screen or laptop keyboard, the y-axis runs longitudinally through the phone screen or laptop keyboard, and the z-axis is perpendicular to the phone screen or laptop keyboard). Because some devices may not have the hardware to eliminate the influence of gravity, this event returns two properties, accelerationIncludingGravity (acceleration with gravity) and acceleration (acceleration), which excludes the influence of gravity.

Use HTML5 to realize the function of shaking your phone.

There is a detailed introduction article "This End Up: Using DeviceOrientation" on DeviceOrientation,HTML5Rocks, which is of great reference value.

Let's start by monitoring motion sensing events.

[javacript] if (window.DeviceMotionEvent) {window.addEventListener ('devicemotion',deviceMotionHandler, false);} [/ javascript]

And then get the acceleration with gravity.

[javacript] function deviceMotionHandler (eventData) {var acceleration = eventData.accelerationIncludingGravity;} [/ javascript]

Here's how we calculate how users shake their phones. The main points to be considered are as follows:

1. Most of the time, users shake their phones in one direction.

2. When sloshing, the acceleration data in all three directions must change.

3. We can't misjudge the normal movement behavior of the mobile phone. Think about it. If you put your phone in your trouser pocket, it will also have acceleration data changes when walking.

To sum up, we should calculate the acceleration in three directions, measure them at intervals, investigate their rate of change in a fixed period of time, and need to determine a threshold for it to trigger the action.

We need to define several variables to record the historical data on the x, y, z axes and the last time it was triggered. The implementation code of the core method 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) > 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 > SHAKE_THRESHOLD) {alert ("shaked!");} last_x = x; last_y = y; last_z = z;}}

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

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.