一、背景介绍

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

二、前置调研

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

thinking...

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

PC 能监听鼠标移动

移动端只能监听点击

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

点击跳转：MDN地址

三、陀螺仪介绍

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

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

• alpha：表示设备沿 Z 轴旋转的角度，范围为 0~360
• beta：表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备「由后向前」旋转的情况
• gamma：表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备「由左向右」旋转的情况

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

初始值

四、代码实现

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

1. 写一个背景图容器，用background-image声明背景图 url；
2. 再于容器里写一个角色图，给图片一个浮动效果；
3. 通过声明鼠标监听事件拿到指针的 X、Y 坐标
4. 利用这两个值，改变： transform 属性，可以倾斜元素 backgroundPosition 属性，可以平移元素
5. 让背景图和角色图倾斜、移动的程度不同，营造视差样式，实现类裸眼 3D 效果；

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

• 主要声明了一个陀螺仪Class、一个平滑方法Class。
• 通过设置监听方法，实时获取陀螺仪指标变化，更新state值。
• 最终触发更新角色图和背景图 CSS 逻辑。

最终效果

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

五、遇到问题

01 | 陀螺仪数据拿不到

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

定位一：环境不对

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

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

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

1. 进 ngrok 官网，注册个账号，用免费服务；
2. 安装 ngrok：brew install ngrok/ngrok/ngrok
3. 配置你的 authtoken：ngrok config add-authtoken xxxx(你的token)
4. 运行 ngrok 以将本地端口 3000 转发到公共 HTTPS 地址：ngrok http 3000
5. ngrok 会提供一个 HTTPS URL，如下图红色块就是你手机要访问的内容

定位二：iOS13+ 权限拦截

• iOS13+，需要用户主动唤起的授权，用户手动同意之后才能拿到陀螺仪的值（页面加载结束后，非主动请求不会唤起授权弹窗）
• 我后续又测试了安卓机型，不用授权直接就有数据（令人感慨，自由与风险往往并存）

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

function testSupportGyro() {
return new Promise(() => {
if (
typeof DeviceOrientationEvent !== "undefined" &&
typeof DeviceOrientationEvent.requestPermission === "function"
) {
// iOS 13+ 设备需鉴权
DeviceOrientationEvent.requestPermission()
.then((permissionState) => {
// 如果用户同意，就可以监听陀螺仪数据
if (permissionState === "granted") {
window.addEventListener(
"deviceorientation",
handleOrientationEvent
);
} else {
// 用户不同意，无法使用陀螺仪
console.error("设备不支持访问陀螺仪");
}
})
.catch((error) => {
console.error(error);
});
} else {
// 安卓机型不需鉴权，直接监听
window.addEventListener("deviceorientation", handleOrientationEvent);
}
});
}

作者：狂炫冰美式
链接：https://juejin.cn/post/7326985988768743461