HTML5 JS で携帯電話シェイク機能を実装_html5 チュートリアル スキル

HTML5 の重要な機能は DeviceOrientation です。これは、基礎となる方向センサーとモーション センサーの高レベルのカプセル化を提供し、DOM イベントのサポートを提供します。この機能には 2 種類のイベントが含まれています:

1. deviceOrientation: 方位センサーデータをカプセル化し、携帯電話の角度、向き、方位など、携帯電話が静止しているときの方向データを取得できるイベント。

2. deviceMotion: 携帯電話が動いているときにモーション加速度などのデータを取得できるモーション センサー データをカプセル化するイベント。 これを使用すると、携帯電話で非常に役立つ重力感知やコンパスなどの興味深い機能を簡単に実装できます。たとえば、Opera H5 試用版の重力感知ボールの例は、DeviceOrientation API の deviceOrientation イベントをリッスンすることによって実装されます。 実際、これは、Web 上のモバイル アプリケーションに非常に一般的でファッショナブルな機能、つまり電話を振るという機能を実装するのにも役立ちます。

DeviceMotionEvent (デバイス モーション イベント) は、デバイスの加速と回転に関する情報を返します。加速度データには、x、y、z の 3 つの軸が含まれます (下の図に示すように、x 軸は携帯電話の画面またはラップトップのキーボードを水平に通過し、y 軸は携帯電話の画面またはラップトップのキーボードを垂直に通過します) 、z 軸は携帯電話の画面またはラップトップのキーボードに対して垂直です)。一部のデバイスには重力の影響を排除するハードウェアが備わっていない可能性があるため、このイベントは 2 つのプロパティ、accelerationincludeGravity (重力を含む加速度) と加速度 (加速度) を返します。後者は重力の影響を除きます。

1. [コード] モーションセンシングイベントのリスニング
2. [コード] 重力を含む加速度の取得
3. [コード] コアメソッドの実装コード

HTML5 の重要な機能は DeviceOrientation です。これは、基礎となる方向センサーとモーション センサーの高レベルのカプセル化を提供し、DOM イベントのサポートを提供します。この機能には 2 種類のイベントが含まれています:

1. deviceOrientation: 方位センサーデータをカプセル化し、携帯電話の角度、向き、方位など、携帯電話が静止しているときの方向データを取得できるイベント。

2. deviceMotion: 携帯電話が動いているときにモーション加速度などのデータを取得できるモーション センサー データをカプセル化するイベント。
これを使用すると、重力感知やコンパスなどの興味深い機能を簡単に実装でき、携帯電話で非常に役立ちます。たとえば、Opera H5 試用版の重力センサー ボールの例は、DeviceOrientation
API の deviceOrientation イベントをリッスンすることによって実装されます。

実際、これは、Web 上のモバイル アプリケーションで非常に一般的でファッショナブルな機能、つまり電話を振ることの実装にも役立ちます。

DeviceMotionEvent (デバイス モーション イベント) は、デバイスの加速と回転に関する情報を返します。加速度データには、x、y、z の 3 つの軸が含まれます (下の図に示すように、x 軸は携帯電話の画面またはラップトップのキーボードを水平に通過し、y 軸は携帯電話の画面またはラップトップのキーボードを垂直に通過します) 、z 軸は携帯電話の画面またはラップトップのキーボードに対して垂直です)。一部のデバイスには重力の影響を排除するハードウェアが備わっていない可能性があるため、このイベントは 2 つのプロパティ、accelerationincludeGravity (重力を含む加速度) と加速度 (加速度) を返します。後者は重力の影響を除きます。

1. [コード] モーション センシング イベントをリッスンします

コードをコピーします

コードは次のとおりです

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}

2.コード] 重力加速度を含むコンテンツを取得します

コードをコピー

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

function deviceMotionHandler(eventData) {
var加速度 =eventData.accelerationincludeGravity;
}

3. [コード] コアメソッド実装コード

コードをコピーします

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

var SHAKE_THRESHOLD = xxx;
var last_update = 0;
var x、y、z、last_x、last_y、last_z;

function deviceMotionHandler(eventData) {
var加速 =eventData.accelerationincludeGravity;

var curTime = newDate().getTime();

if ((curTime – lastUpdate)> 100) {

var diffTime = curTime -last_update;
last_update = curTime;

x = 加速度.x;
y = 加速度.y;
z = 加速度.z;

var 速度 = Math.abs(x y z – last_x – last_y – last_z) / diffTime * 10000;

if (速度 > SHAKE_THRESHOLD) {
alert(“shaked!”);
}
last_x = x;
last_y = y;
last_z = z;
}
}