前言：移动端H5开发的时候有时需要H5里面的图片或者说是盒子（div）实现，随着用户的手机晃动，里面的盒子也跟着一起晃动

实现方法

通过deviceorientation 的浏览器API处理方法

具体来说，可以先在组件的 setup 函数中监听 deviceorientation 事件，并在回调函数中获取设备的 beta 和 gamma 值，它们分别表示手机前后倾斜和左右倾斜的角度。然后根据这两个值计算出需要移动的距离，通过修改图片或盒子的 transform 属性来实现平移的效果。

deviceorientation的浏览器兼容性

  • 可以看出来这个API的在各个浏览器兼容性还是相当可以的。

检测

  • 可以尝试使用以下代码来检查设备是否支持deviceorientation事件
1
2
3
4
5
if(window.DeviceOrientationEvent) {
  console.log("Device orientation is supported");
} else {
  console.log("Device orientation is not supported");
}
  • 如果设备支持deviceorientation事件，则应该会输出“Device orientation is supported”。如果它不支持，则应该会输出“Device orientation is not supported”。
  • 另外，您还需要确保将handleOrientation函数正确定义，并且它能够正确地处理deviceorientation事件。

案例

  • 首先是html代码
1
2
3
4
5
6
7
<!-- 岛屿 -->
<div id="isle" ref="isle">
  <div class="left w-176 h-202 absolute top-441"></div>
  <div class="center w-637 h-736 absolute top-156 left-48 right-65"></div>
  <!-- 右边的岛屿 -->
  <div class="left w-160 h-110 absolute right-0 top-515"></div>
</div>
  • css
1
2
3
#isle div {
  transition: transform 0.2s ease-out;
}
  • Vue3的代码实现案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { onMounted, onUnmounted, ref } from 'vue';

export default {
  setup() {
    const isle = ref(null); // 获取岛屿（图片）元素
    let startX = null;
    let startY = null;

    // 监听 deviceorientation 事件
    onMounted(() => {
      window.addEventListener('deviceorientation', handleOrientation);
    });

    // 移除事件监听
    onUnmounted(() => {
      window.removeEventListener('deviceorientation', handleOrientation);
    });

    function handleOrientation(event) {
      const beta = event.beta || 0; // 前后倾斜的角度
      const gamma = event.gamma || 0; // 左右倾斜的角度

      if (startX === null && startY === null) {
        startX = gamma;
        startY = beta;
        return;
      }

      const deltaX = gamma - startX; // 计算需要平移的距离
      const deltaY = beta - startY;

      isle.value.style.transform = `translate3d(${deltaX}px, ${-deltaY}px, 0)`;
    }

    return {};
  },
};
  • 在组件的模板中，需要给岛屿元素添加一个 ref 属性，然后在 setup 函数中使用 ref 函数获取该元素的引用。同时，在 element 中增加 transition: transform 0.2s ease-out; 的样式，以实现平滑过渡的效果。

效果调试——浏览器怎么模拟设备晃动

在浏览器中模拟设备晃动，您可以使用 Chrome 开发者工具。以下是一些步骤：

  1. 打开 Chrome 浏览器并访问您要调试的网站。
  2. 打开 Chrome 开发者工具 (F12)。
  3. 点击 Toggle Device Toolbar (Ctrl+Shift+M)，以便在开发者工具中打开设备模式工具栏。
  4. 选择一个设备，例如 iPhone 或 Android 设备。
  5. 在设备模式工具栏上，单击三个点图标，然后选择 Senssors 选项卡。
  6. 在 Sensors 选项卡中，您可以模拟设备的晃动和其他运动。

注：这个功能可能不适用于所有版本的 Chrome 浏览器。如果您的 Chrome 浏览器不支持此功能，您可以尝试使用其他浏览器或安装 Chrome 插件来模拟设备晃动。