JavaScript HTML5シェイク関数の実装_JavaScriptスキル

インターネット上の情報と私自身の編集を通じて、技術的なバックアップとして HTML シェーク機能の概要を書きました。
重要な知識

1.デバイスモーションイベント
これは HTML5 でサポートされている重力検知イベントです。ドキュメントについては、http://w3c.github.io/deviceorientation/spec-source-orientation.html
を参照してください。 イベント紹介:
deviceorientation ローカル座標系の一連の回転角度として表現される、デバイスの物理的な方向情報を提供します。
devicemotion デバイスに定義された座標系のカルディ座標として表される、デバイスの加速度情報を提供します。また、座標系におけるデバイスの回転速度も提供します。可能であれば、イベントはデバイスの重心の加速度情報を提供する必要があります。
compassneedcalibration は、コンパス情報を使用して上記のイベントを調整するように Web サイトに通知するために使用されます。

2.イベント紹介
window.addEventListener("deviceorientation",function(event){// handle event.alpha、event.beta、event.gamma},true);

{alpha:90,
 beta:0,
 gamma:0};

これは、deviceorientation イベントによって返されるパラメーターです。コンパスの指示を取得するには、360 度からアルファを引いた値を使用するだけです。水平面に平行な場合、コンパスの方向は (360 - アルファ) になります。 ユーザーがデバイスを持っている場合、画面は垂直面にあり、画面の上部が上を向いています。ベータの値は 90 で、アルファはガンマとは関係がありません。 ユーザーはデバイスを持ち、アルファ角度を向いています。画面は垂直画面で、画面の上部が右を指します。方向情報は次のとおりです。

{alpha:270- alpha,
 beta:0,
 gamma:90};

devicemotion イベント レシーバーを登録します:

コードをコピー コードは次のとおりです:

window.addEventListener("devicemotion",function(event){//プロセスイベント。acceleration,event.accelerationincludeGravity,//event.rotationRateおよびevent.interval},true);

画面が垂直面にあり、上部が上を向くようにデバイスを車両の後部に向けて車両に置きます。車両は速度 v で走行し、半径 r で右に曲がります。デバイスは、位置 x での加速度および加速度を記録します。また、デバイスは、rotationRate.gamma の負の値も記録します:

{acceleration:{x: v^2/r, y:0, z:0},
 accelerationIncludingGravity:{x: v^2/r, y:0, z:9.81},
 rotationRate:{alpha:0, beta:0, gamma:-v/r*180/pi}};

関数の実装

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.accelerationIncludingGravity;
 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){
 //简单的摇一摇触发代码
 alert(1);
 }
 lastX = x;
 lastY = y;
 lastZ = z;
 }

まず、ブラウザがこのイベントをサポートしているかどうかを確認します。
YaoYiYao は、携帯電話が振られたかどうかを検出するために使用されます。具体的には、携帯電話の動きのデータを取得し、次回振るイベントがトリガーされたときに、前回振った座標と現在の振った座標を判定します。頻繁に使用される範囲: Math.abs(x-lastX)>speed ||Math.abs(z-lastZ)>speed
基本的に、この条件が満たされた場合、電話機がシェイク状態にあることを意味します。実行したいシェイク コードを if ステートメントに追加するだけです。

上記はhtml5シェイク機能の実装アイデアであり、皆様の学習の参考になれば幸いです。