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 を使用して電話を振る機能を実装します
まず、モーション センシング イベントを監視しましょう。