Question

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

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

Answer 1

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

Chrome团队在解锁设备方向更改屏幕下发布on their blog的半官方建议是使用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仅适用于全屏模式或独立网络应用......如果您打算将应用视为全屏体验或独立的网络应用，那么你很幸运。

如何检测移动Safari全局定位旋转动画

1 个答案: