オンライン情報と私自身のコンピレーションを通じて、私はHTML Shake関数の紹介を書き、それを技術的なバックアップとして使用しました。
知識の重要な点
1。DeviceMotionEvent
これは、HTML5がサポートする重力センシングイベントです。ドキュメントについては、http：//w3c.github.io/deviceorientation/spec-source-orientation.htmlを参照してください
イベントの紹介：
Deviceorientationは、一連のローカル座標系の回転角として表されるデバイスの物理的方向情報を提供します。
Devicemotionは、デバイスの座標系で定義されているカーディ座標として表されるデバイスの加速情報を提供します。また、座標系のデバイスの回転速度も提供します。実行可能な場合、イベントはデバイスの重心に加速情報を提供する必要があります。
CompassNeedScalibrationは、コンパス情報を使用して上記のイベントを調整するためにWebサイトに通知するために使用されます。
2。イベントの紹介
window.addeventlistener（ "deviceorientation"、function（event）{// process event.alpha、event.beta and event.gamma}、true）;
{alpha：90、beta：0、gamma：0};これは、deviceorientationイベントによって返されるパラメーターです。コンパスポインティングを取得するために、360度を使用してアルファを引いただけです。水平面に平行な場合、そのコンパスは（360 -alpha）を指します。ユーザーがデバイスを保持している場合、画面は垂直平面にあり、画面の上部が上向きになります。ベータの値は90で、アルファとガンマは関連していません。ユーザーのハンドヘルドデバイスはアルファ角度に面し、画面は垂直画面にあり、画面の上部が右側を指し、その方向情報は次のとおりです。
{アルファ：270-アルファ、ベータ：0、ガンマ：90};Devicemotionイベントのレシーバーを登録します。
コードコピーは次のとおりです。Window.AddeventListener（ "Devicemotion"、function（event）{// processing event.Acceleration、event.AccelerationIncludeGravity、// event.rotationrateおよびevent.interval}、true）;
上部を上に向けて車両の背面を向いた垂直面に画面を置いた車両の上にデバイスを置きます。車両はVの速度で移動し、半径rで右に曲がります。デバイスは、加速と加速がXの位置Xにある状況を記録し、デバイスは回転式の負の値も記録します。
{acceleration：{x：v^2/r、y：0、z：0}、accelerationincludedgravity：{x：v^2/r、y：0、z：9.81}、回転表：{alpha：0、beta：0、gamma：-v/r*180/pi}};機能実装
if（window.devicemotionevent）{window.addeventlistener（ 'devicemotion'、yaoyiyao、false）; } var速度= 30; //速度var x = y = z = lastx = lasty = lastz = 0;関数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）{//単純なシェイクトリガーコードアラート（1）; } lastx = x; lasty = y; lastz = z; }まず、ブラウザがこのイベントをサポートしているかどうかを判断します。
Yaoyiyaoは、携帯電話が揺れているかどうかを検出するために使用されます。具体的には、携帯電話のモバイルデータを取得し、外部変数に保存することです。次回の振動イベントが再びトリガーされたら、最後のシェーキング座標と現在のシェーキング座標が頻繁な動員の範囲にあるかどうかを判断します：Math.Abs（x-Lastx）> speed || math.abs（y-lasty）> speed || math.abs（z-lastz）>速度
基本的に、この条件が満たされている場合、電話は揺れた状態にあり、IFステートメントに実行する振動コードを追加します。
上記は、HTML5 Shake機能を実装するというアイデアであり、すべての人の学習に役立つことを願っています。