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

Question

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

我试图在方向改变之前捕捉状态，特别是在动画播放之前。我尝试将webkitAnimationStart和之类的事件animationstart应用于window，但似乎都没有被触发。希望我忽略了一些东西。documentdocument.body

Answer 1

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

Chrome 团队在他们的博客上发布的关于设备方向更改的解锁屏幕下发布的一个半官方建议是使用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（禁用方向更改事件）。

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

棘手的部分是确定浏览器决定切换方向的正确角度范围（您不想在浏览器实际上不切换方向时开始动画）。

screen.orientation.lock解决此问题的一种方法是使用基本上设置阈值并相应地锁定方向的位置来完全控制方向变化。

然而，由于世界并不完美，screen.orientation.lock只能在全屏模式或独立网络应用程序中工作......如果您希望您的应用程序成为全屏体验或独立网络应用程序，那么您很幸运。