安利DeviceMotionEvent，帶你手寫一個搖一搖功能

歡迎關注個人我的博客分享一些前端技術、面試題、面試技巧等

事件介紹

1. deviceorientation 提供設備的物理方向信息，表示爲一系列本地座標系的旋角。
2. devicemotion 提供設備的加速信息，表示爲定義在設備上的座標系中的卡爾迪座標。其還提供了設備在座標系中的自轉速率。若可行的話，事件應該提供設備重心處的加速信息。
3. compassneedscalibration 用於通知 Web 站點使用羅盤信息校準上述事件。

用法簡介

deviceorientation

註冊一個 deviceorientation 事件的接收器

window.addEventListener("deviceorientation", function(e) {
  console.log(e);
  // 處理event.alpha、event.beta及event.gamma
  document.querySelector("#item").innerHTML = ` <p> 設備沿z軸上的旋轉角度${e.alpha} </p> <p> 設備在x軸上的旋轉角度，描述設備由前向後旋轉的狀況 ${e.beta} </p> <p>表示設備在y軸上的旋轉角度，描述設備由左向右旋轉的狀況${e.gamma} </p> <p>與北方向的角度差值，正北爲0度，正東爲90度，正南爲180度，正西爲270度${e.webkitCompassHeading}</p> <p>指北針的精確度，表示誤差爲正負多少度${e.webkitCompassAccuracy} </p> `;
});
複製代碼

須要在手機端使用

安卓端不支持顯示 webkitCompassHeading 和 webkitCompassAccuracy 小夥伴能夠經過蘋果手機訪問獲取

• deviceorientation 事件包含的屬性
  • alpha 表示設備沿 z 軸上的旋轉角度，範圍爲 0~360
  • beta 表示設備在 x 軸上的旋轉角度，範圍爲 -180~180,，它描述的是設備由前向後的旋轉的狀況
  • gamma 表示設備在 y 軸上的旋轉角度，範圍爲-90~90，它描述的是設備在由左向右旋轉的狀況
  • webkitCompassHeading 與正北方向的角度差值，正北爲 0 度，正東爲 90 度，正南爲 180 度，正西爲 270 度，由於 0 表示正北，因此叫指北針
  • webkitCompassAccuracy 指北針的精確度，表示誤差爲正負多少度，通常爲 10

compassneedscalibration

使用自定義界面通知用戶校準羅盤

window.addEventListener("compassneedscalibration", function(event) {
  alert("您的羅盤須要校準，請將設備沿數字8方向移動。");
  event.preventDefault();
});
複製代碼

devicemotion

註冊一個 devicemotion 時間的接收器

window.addEventListener("devicemotion", function(event) {
  console.log(event);
});
複製代碼

• deviceorientation 事件包含的屬性
  • accelerationIncludingGravity 包括重心引力，z 軸方向加了 9.8，在 x，y 方向上的值二者相同
  • acceleration 重力加速度(須要陀螺儀支持)
  • rotationRate (alpha, beta, gamma) 旋轉速率
  • interval 獲取時間間隔

均爲只讀屬性

代碼示例

咱們嘗試使用 HTML 的這個對象方法實現一個搖一搖功能

let SHAKE_THRESHOLD = 800
let last_update = 0
let x, y, z, last_x = 0, last_y = 0, last_z = 0
function deviceMotionHandler (eventData) {
  let acceleration = eventData.accelerationIncludingGravity
  let curTime = +new Date()
  if ((curTime - last_update) > 300) {
    let diffTime = curTime - last_update
    last_update = curTime
    x = acceleration.x
    y = acceleration.y
    z = acceleration.z
    let speed = Math.abs(x + y + z -last_x - last_y - last_z) / diffTime * 10000

    if (speed > SHAKE_THRESHOLD) {
      // 這裏寫要執行的代碼
    }
    last_x = x
    last_y = y
    last_z = z
  }
}

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false)
} else {
  alert('Not supported on your device')
}
複製代碼

---

但願對讀完本文的你有幫助、有啓發，若是有不足之處，歡迎批評指正交流！

歡迎關注個人我的博客分享一些前端技術、面試題、面試技巧等

辛苦整理良久，還望手動點贊鼓勵~

---

'摘抄'不是單純的「粘貼->複製」，而是眼到，手到，心到的一字一句敲打下來。

博客聲明:全部轉載的文章、圖片僅用於做者本人收藏學習目的，被要求或認爲適當時，將標註署名與來源。若不肯某一做品被轉用，請及時通知本站，本站將予以及時刪除。