Vue<幸运抽奖-摇一摇>

image.png

首先要实现这种功能并不难，只需要调用设备的运动权限，也就是陀螺仪，监听它的运动数据就能实现摇一摇的监听。

window.addEventListener('devicemotion', funcation(){}, false)

Devicemotion的踩坑点：
1.必须在https环境下才能实现监听，本地运行是会报错的；
2.IOS手机要想实现监听（Android的好像没这么多问题吧），必须要用户手动授权，也就是说要用户手动点击发起的授权操作。因为摇一摇是个单独的页面，因此我就给放到了页面跳转的时候，也就是用户点击跳转页面的时候

   //获取权限
    getPermission() {
      if (
        typeof window.DeviceMotionEvent !== 'undefined' &&
        typeof window.DeviceMotionEvent.requestPermission === 'function'
      ) {
        window.DeviceMotionEvent.requestPermission()
          .then(function(state) {
            if ('granted' === state) {
              //用户同意授权
            } else {
              //用户拒绝授权
              alert('摇一摇需要授权设备运动权限,请重启应用后,再次进行授权!')
            }
          })
          .catch(function(err) {
            alert('error: ' + err)
          })
      }
    },

3.若用户首次拒绝授权后，默认以后就是拒绝的，那么摇一摇就不能用了，这种情况下，只有让用户后台重新启动应用才能解决，也就是上面代码中给到的提示信息摇一摇需要授权设备运动权限,请重启应用后,再次进行授权!

代码如下:

<template>
  <div>
    <div>
      <div class="img">
        <img id="yaoyiyao" src="@/assets/img/yaoyiyao.png" alt />
      </div>
      <p>抽奖可用次数{{num}}</p>
      <!-- <div v-html="text"></div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 2, //抽奖次数
      SHAKE_THRESHOLD: 8000, //动摇阀值，越高需要摇摆的幅度越大
      loading: false, //防止摇摆过程中造成的误操作
      text: '',
      last_update: 0,
      x: 0,
      y: 0,
      z: 0,
      last_x: 0,
      last_y: 0,
      last_z: 0
    }
  },
  mounted() {
    //判断设否授权了 设备运动权限
    if (window.DeviceMotionEvent) {
      //监听设备运动
      window.addEventListener('devicemotion', this.devicemotion, false)
    }
  },
  //页面销毁时
  beforeDestroy() {
    window.removeEventListener('devicemotion', this.devicemotion, false)
  },
  methods: {
    // 设备运动 方法
    devicemotion(event) {
      //获取加速度信息
      //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
      var acceleration = event.accelerationIncludingGravity
      var curTime = new Date().getTime()
      if (curTime - this.last_update > 10) {
        var diffTime = curTime - this.last_update
        this.last_update = curTime
        this.x = acceleration.x
        this.y = acceleration.y
        this.z = acceleration.z
        var speed =
          (Math.abs(
            this.x + this.y + this.z - this.last_x - this.last_y - this.last_z
          ) /
            diffTime) *
          10000
        //而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
        if (speed > this.SHAKE_THRESHOLD) {
          if (this.num <= 0 && !this.loading) {
            alert('抽奖次数用完了')
          } else {
            if (!this.loading) {
              var block = document.getElementById('yaoyiyao')
              block.classList.add('play')
              setTimeout(() => {
                alert('你中奖啦！') // Do something
                block.classList.remove('play')
                this.loading = false
              }, 1000)
              this.num -= 1
              this.loading = true
            }
          }
        }
        this.last_x = this.x
        this.last_y = this.y
        this.last_z = this.z
        /* 相关参数数据 */
        // this.text =
        //   'x：' +
        //   this.last_x +
        //   '<br/>' +
        //   'y：' +
        //   this.last_y +
        //   '<br/>' +
        //   'z：' +
        //   this.last_z +
        //   '<br/>'
      }
    },
    // //获取权限
    // getPermission() {
    //   if (
    //     typeof window.DeviceMotionEvent !== 'undefined' &&
    //     typeof window.DeviceMotionEvent.requestPermission === 'function'
    //   ) {
    //     window.DeviceMotionEvent.requestPermission()
    //       .then(function(state) {
    //         if ('granted' === state) {
    //           //用户同意授权
    //         } else {
    //           //用户拒绝授权
    //           alert('摇一摇需要授权设备运动权限,请重启应用后,再次进行授权!')
    //         }
    //       })
    //       .catch(function(err) {
    //         alert('error: ' + err)
    //       })
    //   }
    // },
  }
}
</script>

<style lang="scss" scoped>
.img {
  height: 8rem;
  text-align: center;
  margin-bottom: 2rem;
  img {
    display: inline-block;
    height: 100%;
  }
}
.play {
  animation: play 0.5s ease both 2;
}
@keyframes play {
  30% {
    transform: rotate(-30deg);
  }
  60% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
</style>