HTML5を使って携帯電話を振る機能を実現するチュートリアル_html5チュートリアル スキル

Baidu 開発者カンファレンスで、HTML5 のもう 1 つの重要な機能である DeviceOrientation を紹介しました。これは、基礎となる方向センサーとモーション センサーの高レベルのカプセル化を提供し、DOM イベントのサポートを提供します。この機能には、次の 2 種類のイベントが含まれます。
1. deviceOrientation: 方向センサー データをカプセル化し、携帯電話が静止しているときの角度、方向、向きなどの方向データを取得できるイベント。携帯電話。
2. deviceMotion: 携帯電話が動いているときにモーション加速度などのデータを取得できるモーション センサー データをカプセル化するイベント。
これを使用すると、重力感知やコンパスなどの興味深い機能を簡単に実装でき、携帯電話で非常に役立ちます。たとえば、Opera H5 試用版の重力感知ボールの例は、DeviceOrientation API の deviceOrientation イベントをリッスンすることによって実装されます。

HTML5 を使用して携帯電話を振る機能を実装します
実際、HTML5 は、Web 上のモバイル アプリケーションで非常に一般的でファッショナブルな機能である携帯電話を振る機能を実装するのにも役立ちます。
私がこの機能を初めて見たのは PhotoShake でした。その後、WeChat を含む大小の多くのアプリケーションがこの機能を追加しました。
HTML5 を使用して電話を振る機能を実現します
Android または iOS の開発を行ったことがある場合は、この機能によく馴染みがあるかもしれません。ただし、以下では、この機能を Web 上で初めて実装します。
始めましょう!
DeviceMotionEvent (デバイス モーション イベント) は、デバイスの加速と回転に関する情報を返します。加速度データには、x、y、z の 3 つの軸が含まれます (下の図に示すように、x 軸は携帯電話の画面またはラップトップのキーボードを水平に通過し、y 軸は携帯電話の画面またはラップトップのキーボードを垂直に通過します) 、z 軸は携帯電話の画面またはラップトップのキーボードに対して垂直です)。一部のデバイスには重力の影響を排除するハードウェアが備わっていない可能性があるため、このイベントは 2 つのプロパティ、accelerationincludeGravity (重力を含む加速度) と加速度 (加速度) を返します。後者は重力の影響を除きます。

HTML5 を使用して電話を振る機能を実装します
まず、モーション センシング イベントを監視しましょう。

コードをコピーします

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

[javacript]
if (window .DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
[/javascript]
次に、重力を含む加速度を取得します。
[javascript]
function deviceMotionHandler(eventData) {
var加速度 =eventData.accelerationincludeGravity;
}
[/javascript]

次に、ユーザーが電話を振る原理を計算する方法を示します。 考慮すべき重要な点は次のとおりです:
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;
function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
var curTime = newDate().getTime();
if ((curTime - lastUpdate)> 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 > SHAKE_THRESHOLD) {
alert("shaked!");
}
last_x = x;
last_y = y;
last_z = z;
}
}

由此我们完成了手机摇一摇的功能，是不是非常简单？