javascript - 如何检测手机Safari全局方向旋转动画

Question

您好，我正在尝试在移动版 Safari 旋转到不同方向时触发一个事件。我知道 orientationchange 但这是 Not Acceptable ，因为它是在 播放方向旋转动画并设置新方向后调用的。我有一个元素需要在动画之前或期间隐藏。

我正在尝试捕捉方向改变之前的状态，尤其是在动画播放之前。我尝试将 webkitAnimationStart 和 animationstart 等事件应用于 window、document 和 document.body 并且它们似乎都没有被触发。希望我忽略了一些东西。

Answer 1

据我所知，几乎每个移动浏览器都会出现这个问题，并且没有直接的解决方案。

来自 Chrome 团队的半官方建议已发布 on their blog Unlock screen on device orientation change 是使用 deviceorientation 并模拟浏览器在内部执行的操作以确定设备的方向:

var previousDeviceOrientation, currentDeviceOrientation;
  window.addEventListener('deviceorientation', function onDeviceOrientationChange(event) {
    // event.beta represents a front to back motion of the device and
    // event.gamma a left to right motion.
    if (Math.abs(event.gamma) > 10 || Math.abs(event.beta) < 10) {
      previousDeviceOrientation = currentDeviceOrientation;
      currentDeviceOrientation = 'landscape';
      return;
    }
    if (Math.abs(event.gamma) < 10 || Math.abs(event.beta) > 10) {
      previousDeviceOrientation = currentDeviceOrientation;
      // When device is rotated back to portrait, let's unlock screen orientation.
      if (previousDeviceOrientation == 'landscape') {
        screen.orientation.unlock();
        window.removeEventListener('deviceorientation', onDeviceOrientationChange);
      }
    }
  });

Chrome 团队使用此代码的特定用例是在使用 screen.orientation.lock(禁用方向更改事件)后获取设备的方向。

这可以概括为方向更改事件的替代，在动画开始之前为您提供轻微的时间优势。

棘手的部分是找出浏览器决定切换方向的正确 Angular 范围(您不想在浏览器实际上不切换方向时开始动画)。

解决此问题的一种方法是使用 screen.orientation.lock 完全控制方向更改，您基本上可以在其中设置阈值并相应地锁定方向。

然而，由于世界并不完美，screen.orientation.lock 仅适用于全屏模式或独立网络应用程序...如果您希望您的应用程序具有全屏体验或独立的网络应用程序那么你很幸运。