如何檢測移動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全球定位旋轉動畫

回答

相關問題