コメント：携帯電話のシェイク機能は良いです。それを実装する方法
Baidu Developer Conferenceでは、HTML5の別の重要な機能を紹介しました。これは、高レベルのパッケージで基礎となる方向センサーとモーションセンサーをカプセル化し、DOMイベントをサポートするDeviceorientationです。この機能には2つのイベントが含まれています。
1。Deviceorientation：イベントは方向センサーデータをカプセル化し、携帯電話の角度、方向、向きなど、携帯電話の固定状態の方向データを取得できます。
2。Devicemotion：イベントはモーションセンサーデータをカプセル化し、携帯電話のモーション状態でのモーション加速などのデータを取得できます。
それを使用すると、重力センシングやコンパスなどの興味深い機能を簡単に実現できます。これは携帯電話で非常に役立ちます。たとえば、Opera H5トライアルバージョンの重力センシングボールの例は、Deviceorientation APIのDeviceorientationイベントを監視することにより実現されます。
HTML5を使用して、電話を振る機能を実現します実際、Webページのモバイルアプリケーションで非常に一般的でファッショナブルな機能を実現するのにも役立ちます：携帯電話を振る。
私は最初にこの機能をPhotoshakeで見ましたが、後にWeChatを含む多くのアプリケーションがこの関数を追加しました。
HTML5を使用して、電話を振る機能を実現しますAndroidまたはiOS開発を行ったことがある場合は、そのような機能に非常に精通している可能性があります。ただし、以下では、この機能を初めてWebで実装します。
すぐに始めましょう！
DevicemotionEvent加速と回転に関するデバイスに関連する情報を返します。加速度データには、x、y、zの3つの軸が含まれます（下の図に概略的に示す、x軸は携帯電話の画面またはラップトップキーボードを水平に浸透させ、y軸は携帯電話画面またはラップトップキーボードを垂直に実行し、z軸は携帯電話の画面またはラップトップキーボードに垂直である）。一部のデバイスには重力の影響を除外するハードウェアがない場合があるため、イベントは2つの特性を返します。加速度は重力と加速を含み、重力の影響を除外します。
HTML5を使用して、電話を振る機能を実現します
最初にモーションセンシングイベントを監視しましょう。
[JavaScript]
if（window.devicemotionevent）{
window.addeventlistener（ 'devicemotion'、devicemotionhandler、false）;
}
[/javascript]
次に、重力を含む加速度を取得します。
[JavaScript]
関数DeviceMotionHandler（eventData）{
var acceleration = eventData.AccelerationIncludeGravity;
}
[/javascript] </p> <p>
以下は、ユーザーが電話を振るという原則をどのように計算するかについてです。考慮すべき重要なポイントは次のとおりです。
1.ほとんどのユーザーは携帯電話を一方向に振って揺れます。
2。3方向の加速データは、揺れたときに間違いなく変化します。
3.携帯電話の通常の動きの動作を誤解することはできません。それについて考えてください、あなたの携帯電話があなたのポケットに入れられている場合、それはまた、歩くときに加速データの変更があります。
要約すると、加速度を3方向に計算し、間隔で測定し、固定期間にわたって変化率を調べ、アクションをトリガーするためのしきい値を決定する必要があります。
履歴x、y、z軸のデータと最後のトリガーの時間を記録するには、いくつかの変数を定義する必要があります。コアメソッド実装コードは次のとおりです。
var shake_threshold = xxx;
var last_update = 0;
var x、y、z、last_x、last_y、last_z;
関数DeviceMotionHandler（eventData）{
var acceleration = eventData.AccelerationIncludeGravity;
var curtime = newdate（）。gettime（）;
if（（curtime -lastupdate）＆gt; 100）{
var difftime = curtime -last_update;
last_update = curtime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = math.abs（x + y + z -last_x -last_y -last_z） / difftime * 10000;
if（speed＆gt; shake_threshold）{
アラート（ "Shaked！"）;
}
last_x = x;
last_y = y;
last_z = z;
}
}
これから、電話を振る機能を完了しました。とても簡単ではありませんか？