H5之重力感應篇

手機的重力感應支持裏，有兩個主要的事件：

1. OrientationChange (在屏幕發生翻轉的時候觸發)

2. DeviceOrientation+DeviceMotion(重力感應與陀螺儀)

科普時間

重力感應，基本上是平板電腦和智能手機的標準配置，起到的做用也很簡單，好比你玩賽車遊戲，控制左右轉彎，屏幕橫屏和豎屏切換，都須要用到重力感應模塊。

---

而陀螺儀，又叫角速度傳感器，用於測量物理量的偏轉、傾斜是的動做角速度。能夠精確的分析判斷出使用者的實際動做，經過他收集的這些動做給手機下達一些指令。

OrientationChange

 

數值	意義
0	手機豎屏狀態
90	右旋轉
-90	左旋轉

經過OrientationChange能夠獲知手機的橫豎屏狀態，讓橫屏的頁面經過這個事件來彈出告知用戶橫屏的提示。固然，當用戶鎖定了屏幕旋轉功能，就沒辦法觸發了（心塞）。

 

DeviceOrientation && DeviceMotion

 

事件	意功能
DeviceOrientation	移動的角度
DeviceMotion	移動的加速度信息

如表格所知，咱們能夠經過重力感應得知用戶手機移動的角度。

 

基於此，咱們能夠經過判斷用戶的設備移動角度實現視覺的錯層移動效果，這是一個隱藏的交互形式，悄悄地豐富了頁面的效果，也讓頁面的元素有更好的設計感。

若是想快速實現這個效果，這裏給前端推薦一個開源的組件Parallax.JS

http://matthew.wagerfield.com/parallax/

 

除了移動的錯層，咱們也能夠用手機移動的方向去製做遊戲，好比控制車輛移動的方向等。 除了移動角度的獲知之外，有陀螺儀的設備，咱們還能夠利用DeviceMotion獲知手機移動加速度，從而模擬出相似搖一搖的功能。

頁面結合搖一搖的交互，把須要揭曉的內容神祕地包裝了起來，很好地引發用戶的好奇心以及產品的懸念感（這裏要對沒有陀螺儀的設備進行判斷，把交互形式由搖一搖改爲滑動屏幕）

小結

目前愈來愈多的設備自帶陀螺儀，將來相信還會獲得更多的設備支持，出現更多的結合重力感應的創意專題。

 

---

 

仍是老規矩，看幾類運用了重力感應的H5

1轉動手機代替鼠標拖拽

 

一套理想家居的自我修養

咱們日常見到的頁面之間的切換可能是下滑，上拉，左右滑，而這個H5的創意之處在於，用戶要經過左右傾斜手機來切換不一樣的場景。在用戶左右傾斜手機過程當中，主要有四個場景會呈現出來，分別是：區位，園林，配套和戶型。這就是一個典型的經過獲知用戶手機移動的角度來控制視野的案例

2糾正手機平衡

 

三步幫你擺脫朋友圈

這是大衆點評的一個拯救網癮青年的案例，在技術實現上也用了重力感應，你必須把手機放在水平的桌子上，不然遊戲無法進行下去，在60秒內，若是你觸碰了手機屏幕，屏幕也會結束。因此你只好等60秒過去，靜靜得享受60秒沒有手機的時間

 

3重力感應遊戲

 

拯救自在橙

在這個H5中，主要想宣傳的核心點是罕見的6安全氣囊，因此在這個小遊戲中，設計者利用H5的陀螺儀技術，以橙子和安全氣囊爲遊戲元素實現互動，橙子出現後利用重力感應左右晃動手機，橙子便向相應的方向運動，碰到安全氣囊會彈起，連續碰到幾個安全氣囊將橙子送出頂部就算成功。

賽車遊戲一樣也可以使用重力感應技術