书籍是全世界的营养品。生活里没有书籍，就好像没有阳光；智慧里没有书籍，就好像鸟儿没有翅膀。
概述
大家还记得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
2
3
4
5
6
7
8
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做一些效果。
视差效果
视差效果的原理就是利用陀螺仪在各个方向上的数值变化，给元素设置不同的位移效果，形成视差，主要在二维层面。
这里我们就介绍 parallax.js 插件吧。
GitHub：https://github.com/wagerfield/parallax
使用步骤：
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
1
2
3
4
5
6
7
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
});
1
2
3
4
5
6
7
8
9
10
11
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）。
总结
这篇文章只是对陀螺仪及周边知识点学习的一个记录，相当于学习笔记吧，梳理出自己了解的东西和不知道的内容，供大家一起学习进步。
参考来源：
1.移动端基于陀螺仪实现重力感应效果
2.视差效果-Parallax.js中文文档
3.CSS 3D Panorama - 淘宝造物节技术剖析
---------------------
https://blog.csdn.net/u013778905/article/details/78734395
