三轴陀螺仪：帮移动端实现3D动效

一、背景介绍

看这篇文章：《视差特效的原理和实现方法》的时候，看到有一个很棒的动效。但只是PC端的效果，所以我就想在移动端实现类似的，为后续开发新需求的用户体验（炫技）做好沉淀。

二、前置调研

话不多说，直接开敲。本来打算创建一个div元素来进行调试，但在使用浏览器模拟移动设备时，我迅速遇到了一个问题：移动设备上根本没有鼠标可用！

thinking

而且，桌面端依赖监听鼠标移动事件，在移动端被转变为触摸相关的事件，导致原本通过监听鼠标坐标的交互方式变成了通过用户触摸屏幕的方式交互。这显然与我们的预期不符

PC能监听鼠标移动

移动端只能监听点击

其中，鼠标坐标的作用是用来实时更新倾/斜移动程度的。而我需要一种不同的方式来实时捕获用户的动作位置信息，思考再三，最终决定在移动端使用陀螺仪API：DeviceOrientationEvent平替。

三、陀螺仪介绍

一般来说，放手机上的是三轴陀螺仪，即可测量围绕手机的三个主轴（X、Y、Z）的旋转速率。

三个指标alphabetagamma表示的是相对于坐标轴，设备在某个给定轴上的旋转量:

alpha：表示设备沿Z轴旋转的角度，范围为0~360

beta：表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备「由后向前」旋转的情况

gamma：表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备「由左向右」旋转的情况

注意：将手机水平放置，底部对着自己，此时安卓和苹果alpha初始值不同。

初始值

操作系统

Alpha

Beta

Gamma

Android

90（右转90度趋向0，左转增加）

0（面向用户转增加，背向转减小）

0（右转增加，左转减小）

iOS

0（右转从360减小，左转增加）

0（面向用户转增加，背向转减小）

0（右转增加，左转减小）

四、代码实现

根据掘金文章理解动效实现原理，总共分以下几步：

写一个背景图容器，用background-image声明背景图url；

再于容器里写一个角色图，给图片一个浮动效果；

通过声明鼠标监听事件拿到指针的X、Y坐标

利用这两个值，改变：transform属性，可以倾斜元素backgroundPosition属性，可以平移元素

让背景图和角色图倾斜、移动的程度不同，营造视差样式，实现类裸眼3D效果；

前置阶段就不重复实现了，照着原文代码示例敲就OK，我这里写一下我的实现方法。

主要声明了一个陀螺仪Class、一个平滑方法Class。

通过设置监听方法，实时获取陀螺仪指标变化，更新state值。

最终触发更新角色图和背景图CSS逻辑。

最终效果

其中第三段代码主要声明了一个陀螺仪Class、一个平滑方法Class。实现逻辑就是通过监听陀螺仪指标变化实时更新state值，触发更新角色图和背景图CSS逻辑。可以把代码copy到本地调试着玩玩:/Trade-Offf/…

五、遇到问题01|陀螺仪数据拿不到

现代浏览器对敏感数据的访问越来越多地实施了限制，设备方向和运动传感器（如陀螺仪）属于敏感信息，因为它们可以透露用户设备的物理动作和朝向，所以需要在HTTPS环境下才能正确返回数据。

定位一：环境不对

由于现代浏览器的安全要求，许多设备传感器API（包括陀螺仪）只能在安全的上下文中使用，这通常意味着页面必须通过HTTPS提供服务。当使用HTTP访问网站时，浏览器会阻止对陀螺仪API的访问。

解法：使用ngrok提供临时的HTTPS隧道：

ngrok是一个服务，它允许你将本地服务器暴露到公共互联网上的一个安全隧道。这可以用来快速地将HTTP服务器转换为可通过HTTPS访问的服务。这个方法可以帮助你在开发阶段绕过HTTPS校验，允许你在手机上测试陀螺仪特性。

进ngrok官网，注册个账号，用免费服务；

安装ngrok：brewinstallngrok/ngrok/ngrok

配置你的authtoken：ngrokconfigadd-authtokenxxxx(你的token)

运行ngrok以将本地端口3000转发到公共HTTPS地址：ngrokhttp3000

ngrok会提供一个HTTPSURL，如下图红色块就是你手机要访问的内容

定位二：iOS13+权限拦截

iOS13+，需要用户主动唤起的授权，用户手动同意之后才能拿到陀螺仪的值（页面加载结束后，非主动请求不会唤起授权弹窗）

我后续又测试了安卓机型，不用授权直接就有数据（令人感慨，自由与风险往往并存）

解法：兼容各种环境与情况，需要鉴权就发起请求

functiontestSupportGyro(){returnnewPromise(()={if(typeofDeviceOrientationEvent!=="undefined"==="function"){//iOS13+设备需鉴权().then((permissionState)={//如果用户同意，就可以监听陀螺仪数据if(permissionState==="granted"){("deviceorientation",handleOrientationEvent);}else{//用户不同意，无法使用陀螺仪("设备不支持访问陀螺仪");}}).catch((error)={(error);});}else{//安卓机型不需鉴权，直接监听("deviceorientation",handleOrientationEvent);}});}

很赞哦!（110）