酒濃碼濃 - 前端陀螺儀deviceorientation/王者榮耀首屏動效

前端陀螺儀deviceorientation

文檔： https://developer.mozilla.org/en-US/docs/Web/API/Window/deviceorientation_event

前端陀螺儀，可以獲取到手機當前指向，及手機水平朝X，Y軸翻轉的值，默認爲0。

API顯示兼容性蠻好，僅對IE未知。代碼簡單如下：

只需要將event.beta及event.gamma值賦給首屏定位的背景圖上即可達到王者榮耀首屏進入遊戲頁面的效果，晃動手機背景跟着晃動，晃動幅度的大小可調整基值，此處*2。

因爲監聽的事件如同手機滾動條事件一樣觸發的太過密集， 頻繁的設置背景的位移頁面會抖動，可給要做的事加個防抖。

         window.addEventListener("deviceorientation", function(event) {
              const alpha = event.alpha,
                    beta = event.beta,
                    gamma = event.gamma;
              if(alpha && beta && gamma){
                  console.log(beta>0 ? "向下傾斜" : "向上傾斜", beta)
                  console.log(gamma>0 ? "向右傾斜" : "向左傾斜", gamma)
                  $('. 背景container').css('left', gamma*2+'px')
                  $('.背景container').css('top', beta*2+'px')
              }else{
                console.log("當前瀏覽器不支持DeviceOrientation")
              }
          });