How to call the mobile phone gravity sensing interface in HTML5-

Last year, various H5 animation effects broke out in the circle of friends. These H5-based pages quickly formed a viral communication effect through the circle of friends. This article explains the "Shake sign" case, it helps us to analyze in detail how to call the mobile phone gravity sensing interface in HTML5 ....,.

In the past year, H5 marketing has been very popular. I believe that we are not familiar with the viral communication effect brought by the circle of friends. Just as the Lunar New Year is approaching, I will take a small example of "Shake sign" to talk about how to call the mobile phone gravity sensor interface in HTML5.

DEMO code: Shake it, Wanfu sign

　　What is gravity sensing?

When it comes to gravity sensing, one thing has to be mentioned, that is, the gyroscope, that is, the gyroscope has an internal gyroscope. Once the gyroscope starts to rotate, due to the wheel's angular momentum, the gyroscope has the ability to resist changing directions, since the gyro effect is always parallel to the initial direction, the actual direction can be calculated based on the deviation from the initial direction.

　Orientation axis in mobile phone

Call the mobile phone gyroscope interface in a Web application

// Shake (using the DeviceOrientation event, the essence is to calculate the deflection angle) // some devices in the test do not support if (window. deviceOrientationEvent) {$ (window ). on ('deviceorientation', function (e) {if (isStarted) {return true;} if (! LastAcc) {lastAcc = e; return true;} var delA = Math. abs (e. alpha-lastAcc. alpha); var delB = Math. abs (e. beta-lastAcc. beta); var delG = Math. abs (e. gamma-lastAcc. gamma); if (delA> 15 & delB> 15) | (delA> 15 & delG> 15) | (delB> 15 | delG> 15 )) {start () ;}lastacc = e ;});

// Shake (using the DeviceMotion event, recommended, should be able to calculate the acceleration) if (window. deviceMotionEvent) {var speed = 25; var x, y, z, lastX, lastY, lastZ; x = y = z = lastX = lastY = lati = 0; window. addEventListener ('deviceid', function (event) {var acceleration = event. accelerationIncludingGravity; x = acceleration. x; y = acceleration. y; if (Math. abs (x-lastX)> speed | Math. abs (y-lastY)> speed) {start () ;}lastx = x; lastY = y ;}, false );}

　Code judgment Logic

Var isStarted = false; // start the function start () {isStarted = true; $ ('. qiancover '). hide (); $ ('. decode '). hide (); $ ('. result '). show (); // setTimeout (showDecode, 3000);} // The function showDecode () {$ ('. result '). hide (); $ ('. decode '). show (); setTimeout (jumpToDecode, 3000);} // jump to the sign page function jumpToDecode () {var urls = ["#", "#"]; var jumpTo = urls [parseInt (Math. random () * urls. length)]; window. location = jumpTo ;};

Sample Code: https://github.com/lionrock/HTML5-Example/tree/master/wechat-pination

Reference: DeviceOrientation Event Specification

Source: http://xunli.xyz/2016/01/12/html5-device-shake? Utm_source = tuicool & utm_medium = referral