ホームページ > ウェブフロントエンド > H5 チュートリアル > html5 DeviceOrientation_html5 チュートリアル スキルに基づいて WeChat シェイク機能を実装する

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

WBOY
リリース: 2016-05-16 15:46:30
オリジナル
1931 人が閲覧しました

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;
}
}

効果は写真の通りです:


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート