HTML5 shaking a shake the exploration of a failure in the strengthened edition

Recently looking at the API of the device sensor, of course, it is also a study to let God's "shake". About "shake a shake" realization, the online a lot of information so not detailed said, but always have layout, effect is not congruent with all kinds of problems, so as a senior Copypaster, code must be affixed: source in this

The core code is this paragraph:

 This. Devicemotionhandler =function(eventData) {varAcceleration =eventdata.acceleration; varCurtime =NewDate (). GetTime (); //detection frequency: 100ms per time    if((curtime-that.last_update) > 100) {             varDifftime = Curtime-that.last_update; That.last_update=Curtime; That.x=acceleration.x; That.y=ACCELERATION.Y; That.z=acceleration.z; varSpeed = Math.Abs (that.x + that.y + that.z-that.last_x-that.last_y-that.last_z)/difftime * 10000; if(Speed >That . Shake_threshold) {//Do somethingThat.shakeAudio.play ();//Shake a soundWindow.navigator.vibrate (200);//Vibration EffectThat.shakeEffect.className = ' shake-box shaking ';//shake a picture dynamiccleartimeout (shaketimeout); varShaketimeout = SetTimeout (function() {that.shakeEffect.className= ' Shake-box '; },4000);} that.last_x=That.x; That.last_y=That.y; That.last_z=that.z; }        };

principle: To scan the accelerometer at 100ms intervals, when the acceleration mutation is detected (the rate of change is greater than the threshold), it can be assumed that the mobile phone is swinging at this time. as can be seen from the formula, the acceleration is detected in 3 directions, so the shaking effect can be triggered whenever the direction is thrown.

Note the point: Here add a shake to shake the sound, mobile side about the audio pit too much, presumably you also met a lot. This time the pit is even called play can not play, the solution is to let the user operation for the first time to play or load, specifically to bind an event, as follows. and loading takes a while, it should have been buffered, but I didn't, so the first play would have a noticeable delay.

 window.addeventlistener (' Touchstart ', function   () { if  (!shake1.audioloaded) {shake1.shakeAudio.load ();  // load event must be triggered by user  Shake1.audiolo aded = true    false ); 

Layout aspects: layout to try to use the CSS3 elastic box, but never thought the advanced X5 kernel actually only support display:-webkit-box, so here need to write a set of compatible style. The dynamic effect originally wanted to use transition make up a bit, see the effect or can not pass oneself this close, finally still replace animation realizes. The problem with transition is that the border behaves wrong when it is stretched and shrunk, and is better solved by animation. The layout needs to be noted: the upper part of the background map requires a more nested implementation of the adaptive. In addition, the border also has a shadow, these details we temporarily first ignored. The HTML structure is as follows:

<div class= "Bodymask" >
:
The above to achieve a "shake" effect, but the landlord of course will not end. Below is the landlord failure and beneficial exploration ("useful" word can be ignored)

 
  
 
the landlord's blind engage
In fact, the landlord is a meal do not want to do the heavy lazy cancer patients, holding a mobile phone to see is cool when I put out the middle finger to click the screen or slide, really tired ah ... Especially when lying down, the thumb is a lidian weights, it is not natural to support the mobile phone and to stretch out to slide the screen. So why not just flip the page? For example, the following scenario:
Analysis:
This demand seems very simple appearance, acceleration is a direction, directly determine the x-axis acceleration positive or negative can be judged to be left or right to dump it? Shake the code a little change seems to be able to achieve it, but the ideal is always too plump, but the reality is too bony. No matter which direction we swing, the final stop or need to add a resistance, so there is at least one change in the direction of acceleration during a swing. Please note that there is a "at least" here, because sometimes when we want to go to the left, we may start to turn to the right to the left, and at the time of the brake it is also possible to brake too much, where the acceleration will have a jitter.
imagination is always unconvincing, let's look at the data.  Of course, the first use of shaking a similar screening rules to remove the non-swinging action. When the acceleration mutation is detected (the rate of change is greater than the threshold) is considered to have occurred a swing, this time the output x-axis of the acceleration value, the scanning frequency set to 100ms when the data is as follows:
The above is left and right when the data, according to the characteristics of the data, judging each cycle of the first matching the conditions of the acceleration positive or negative can judge the direction of the swing, the landlord here to define each swing cycle is 1s.
varSpeed = Math.Abs (that.x + that.y + that.z-that.last_x-that.last_y-that.last_z)/difftime * 10000; if(Speed >That . Shake_threshold) {if((Curtime-that.last_catch) > 1000) {        if(That.x > 5) {output.innerhtml+ = ' Right throw x: ' + that.x + ' <br/> ';//acceleration Right, right throwThat.last_catch =Curtime; } Else if(That.x <-5) {output.innerhtml+ = ' Left throw x: ' + that.x + ' <br/> ';//acceleration left, left-flungThat.last_catch =Curtime; }     }}
Theoretically this can be filtered out of the unsuitable acceleration data, the test is as follows:
It looks like it's getting accurate results, but different people have different habits and dynamics, and the methods above do not get the most accurate solutions.
A more accurate approach should be to find out the displacement of x, plus the x-axis acceleration changes to determine whether the swing, the combination of the two can be very good to judge the direction of the swing. here the displacement only requires to be able to judge the left and right, so directly with high school physics formula can. However, after testing n times, I began to think, is this requirement real? Or does it mean there's only my imagination? Suddenly think of the red clothes, many people ah is mastered a technology after the technology will be packaged into a product, will be forced to adapt to this product a lot of demand, but these requirements are yy, are pseudo demand!
Truth! Old week This is a burst of throat!
However, accelerometers and gyroscopes are great fun things to do, and there are a lot of interesting things you can do with them, such as this: Aiwi Use the mobile phone to play the body feeling game. 
As long as you can use the accelerometer and gyroscope to calculate the trajectory of the space, that all good, but to get a better precision can not be used in high school physics that simple time domain integral Oh, this landlord will not be forced to force, interested students self-search ha.
Above, this article is really too water, or put a map.
(Photo source: Small Zhou Classmate, reprint please specify)
Original articles, reproduced please specify the source! This article link: http://www.cnblogs.com/qieguo/p/5448786.html
HTML5 shaking a shake the exploration of a failure in the strengthened edition