概述

大家還記得16年的淘寶造物節嗎？那個H5你應該還記得吧。
你平時玩過H5賽車嗎？
你體驗過全景web頁面嗎？

等等這些互動體驗，都用到了一個知識點——陀螺儀。
接下來我們就一起來了解下陀螺儀吧。

基本知識

我們要對以下幾個知識點有基本印象。

1.陀螺儀
2.視差效果
3.CSS 3D Transform

陀螺儀

要想實現重力感應效果，必須取到裝置的方向值。
有兩種Javascript事件負責處理裝置方向資訊。

第一種是DeviceOrientationEvent，它會在感測器檢測到裝置在方向上產生變化時觸發。
第二種是DeviceMotionEvent，它會在加速度發生改變時觸發。
陀螺儀功能主要用到第一種，即DeviceOrientationEvent。後者也稱重力感應。

window.addEventListener("deviceorientation", handleOrientation, false);
//事件物件中包含4個值：
function handleOrientation(event) {
    var absolute = event.absolute;
    var alpha = event.alpha;
    var beta = event.beta;
    var gamma = event.gamma; 
}

1.absolute 表示是否跟地球座標系一致。

2.alpha表示沿Z軸上的旋轉角度，範圍 [0, 360] 。alpha為0時表示裝置的頂部正指北極方向，當裝置向左旋轉時，alpha將增加。

3.beta表示沿X軸上的旋轉角度，也就是前後旋轉角度，範圍 [-180, 180]。當beta為0° 時表示裝置頂部和底部與地表面的距離是一樣的，當裝置向前翻轉時，beta遞增到180°，向後翻轉遞減到-180°。

4.gamma表示沿Y軸上的旋轉角度，也就是左右傾斜時的角度，範圍 [-90, 90]。gamma等於0°表示裝置左右兩邊與地表面的距離相等，當裝置向右翻轉時，gamma遞增到90° ，向左翻轉時，遞減到-90°。

知道了陀螺儀的基本知識後，可以配合transform 3D做一些效果。

視差效果

視差效果的原理就是利用陀螺儀在各個方向上的數值變化，給元素設定不同的位移效果，形成視差，主要在二維層面。

使用步驟：

1.建立html，引入js檔案

<div id="scene">
  <div data-depth="0.2">My first Layer!</div>
  <div data-depth="0.6">My second Layer!</div>
</div>

<script src="path/to/parallax.js"></script>
//CDN https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js

2.新增自定義屬性，例項化物件，配置引數

<div data-relative-input="true" id="scene">
  <div data-depth="0.2">My first Layer!</div>
  <div data-depth="0.6">My second Layer!</div>
</div>

//data-depth為運動幅度

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene, {
  relativeInput: true
});

3.詳細使用看API。

CSS 3D Transform

瞭解幾個CSS 3D Transform的屬性。原理就是給父容器一個3D視角，元素在裡面都變成立體的。

• transform-origin：元素變形的原點（預設值為 50% 50% 0，該數值和後續提及的百分比預設均基於元素自身的寬高算出具體數值）；
• perspective: 指定了觀察者與 z=0 平面的距離，使具有三維變換的元素產生透視效果。（預設值：none，值只能是絕對長度，即負數是非法值）；
• transform-style：為子元素提供 2D 還是 3D 的場景。另外，該屬性是非繼承的；
• transform：修改 CSS 視覺化模型的座標空間，包括 平移（translate）、旋轉（rotate）、縮放（scale） 和 扭曲（skew）。

總結

這篇文章只是對陀螺儀及周邊知識點學習的一個記錄，相當於學習筆記吧，梳理出自己瞭解的東西和不知道的內容，供大家一起學習進步。