酒浓码浓 - 前端陀螺仪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")
              }
          });