乐趣区

加速器陀螺世界系统app模式开发及算法

jiezi

概述
大家还记得 16 年的淘宝造物节吗？陀螺世界系统开发找吴燕：I56- 电 2227- 微 7887, 那个 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 做一些效果。

视差效果
视差效果的原理就是利用陀螺仪在各个方向上的数值变化，给元素设置不同的位移效果，形成视差，主要在二维层面。

这里我们就介绍 parallax.js 插件吧。

GitHub：https://github.com/wagerfield…

使用步骤：

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）。
总结
这篇文章只是对陀螺仪及周边知识点学习的一个记录，相当于学习笔记吧，梳理出自己了解的东西和不知道的内容，供大家一起学习进步。

退出移动版