Through online information and my own compilation, I wrote an introduction to the html shake function and used it as a technical backup.
Key points of knowledge
1. DeviceMotionEvent
This is a gravity sensing event supported by html5. For the documentation, please see: http://w3c.github.io/deviceorientation/spec-source-orientation.html
Event introduction:
deviceorientation provides the physical direction information of the device, expressed as the rotation angle of a series of local coordinate systems.
devicemotion provides acceleration information for the device, expressed as the Cardi coordinates defined in the coordinate system on the device. It also provides the rotation rate of the device in the coordinate system. If feasible, the event should provide acceleration information at the center of gravity of the device.
compassneedscalibration is used to notify the Web site to calibrate the above events using compass information.
2. Introduction to the event
window.addEventListener("deviceorientation",function(event){// Process event.alpha, event.beta and event.gamma},true);
{alpha:90, beta:0, gamma:0};This is the parameter returned by the deviceorientation event. In order to obtain the compass pointing, you can simply use 360 degrees to minus alpha. If it is parallel to the horizontal surface, its compass pointing at (360 - alpha). If the user holds the device, the screen is in a vertical plane and the top of the screen points upwards. The value of beta is 90, alpha and gamma are not related. The user's handheld device faces the alpha angle, the screen is in a vertical screen, and the top of the screen points to the right, and its direction information is as follows
{alpha:270- alpha, beta:0, gamma:90};Register a receiver for devicemotion event:
The code copy is as follows: window.addEventListener("devicemotion",function(event){// Processing event.acceleration, event.accelerationIncludeGravity, // event.rotationRate and event.interval},true);
Place the device on top of the vehicle with the screen in a vertical plane with the top facing upwards and facing the rear of the vehicle. The vehicle travels at a speed of v and turns to the right with a radius r. The device records the situation where acceleration and accelerationIncludedGravity are at position x, and the device also records the negative value of rotationRate.gamma:
{acceleration:{x: v^2/r, y:0, z:0}, accelerationIncludedGravity:{x: v^2/r, y:0, z:9.81}, rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}};Functional implementation
if(window.DeviceMotionEvent){ window.addEventListener('devicemotion', YaoYiYao,false); } var speed =30;//speed var x = y = z = lastX = lastY = lastZ =0; function YaoYiYao(eventData){ var acceleration =eventData.accelerationIncludedGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed){ //Simple shake trigger code alert(1); } lastX = x; lastY = y; lastZ = z; }First, determine whether the browser supports this event.
YaoYiYao is used to detect whether the mobile phone is shaking. Specifically, it is to obtain the mobile phone's mobile data and store it in an external variable. When the shaking event is triggered again next time, determine whether the last shaking coordinate and the current shaking coordinate are in a range of frequent mobilization: Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed
Basically, if this condition is met, the phone is in a shaking state, and add the shaking code you want to execute into the if statement.
The above is the idea of implementing the html5 shake function, and I hope it will be helpful to everyone's learning.