陀螺仪初探

概述

大家还记得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时表示设备的顶部正指北极方向