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

嗨我试图触发一个事件，当移动Safari转动到不同的方向。我知道orientationchange但是这是不可接受的，因为它被称为之后定向旋转动画播放和设置新的方向。我有一个元素需要在动画之前或动画过程中隐藏。如何检测移动Safari全球定位旋转动画

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

来源

2013-03-18 kevzettler

我正在寻找解决这个相同的问题，你找到一个？ – 2017-06-24 08:11:55

@WassimGr我没有 – kevzettler 2017-06-24 19:03:13

我找到了一个部分解决方案，我会在这里发布 – 2017-07-14 05:07:42

就我所见，几乎所有的移动浏览器都出现这种问题，并且没有简单的解决方案。

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只适用于全屏模式或独立的网络应用程序......如果您打算让您的应用程序成为全屏体验或独立的网络应用程序，那么您是幸运的。

来源

2017-07-14 05:24:48

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

回答

相关问题