html5 DeviceOrientation_html5 チュートリアル スキルに基づいて WeChat シェイク機能を実装する

HTML5 では、DeviceOrientation 機能によって提供される DeviceMotion イベントは、デバイスのモーション センサー時間をカプセル化します。時間を変更することで、デバイスのモーション ステータス、加速度、その他のデータを取得できます (デバイスの角度を提供する deviceOrientation イベントもあります)。向きやその他の情報）。

DeviceMotion を通じてデバイスの動作ステータスを判断すると、Web ページ上で「シェイク」インタラクティブ効果を実現するのに役立ちます。

モーションイベントモニタリング

コードをコピーします

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

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('携帯電話の調子が悪いので、新しいものを買いましょう。');
}

加速度情報を取得する

「振る」アクションとは、デバイスが一定時間内に一定距離を移動することを意味します。したがって、一定の時間範囲内で、前のステップで取得した x、y、z 値の変化率を監視します。 , 端末に揺れ判定が付いているかどうかを判断できます。正常な動作の誤判定を防ぐためには、変化率に適切な臨界値を設定する必要がある。

コードをコピーします

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

function deviceMotionHandler(eventData) {
var加速 =eventData.accelerationincludeGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 100) {
var diffTime = curTime - last_update;
last_update = curTime;
x =加速度.x;
y = 加速度.y;
z = 加速度.z;
varspeed = Math.abs(x y z - last_x - last_y - last_z) / diffTime * 10000;
var status = document.getElementById("status");
if (speed > SHAKE_THRESHOLD) {
doResult();
}
last_x = x ;
last_y = y;
last_z = z;
}
}

効果は写真の通りです: