vue 大转盘旋转效果

场景如下:

用户点击抽奖,转盘立刻线性提速转动,同时请求抽奖接口,旋转过程中等待接口返回抽奖信息

接口返回信息后,转盘减速至停转

网上找到animejs动画框架,想钻研的同学可以看一下,我没有用此框架实现,是手写的

这个demo没有实现停在指定奖品上

也没有实现完全停止后,正好停在0°

<template>
  <div class="hello">
    <!-- 图片自己可以随便找一个 -->
    <img src="@/assets/zhuanpan.png" :style='{"transform":"rotate("+rotate+"deg)"}' class="shunhua">
    <button @click="startRotate">开始</button>
    <button @click="stopRotate">停止</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      //元素当前角度
      rotate:0,
      //定时器对象
      interverObj:null,
      //启动旋转步进角度,就是每阶段提速多少
      rotateStep:1,
      //停止旋转步进角度,每阶段降速多少
      rotateStepStop:1,
      //最大步进角度,就是最高速度
      rotateStepMax:10,
      //每多少毫秒累加一次步进角度,就是多久提速一次
      rotateAddTime:100,
      //每多少毫秒运行一次,定时器的执行间隔时间
      rotateRunTimeOut:10,
      //当前运行毫秒数,累加的毫秒数,用来判断是否达到提速要求
      nowRunTime:0,
      //旋转状态0停止中 1旋转中 2停止中
      rotateState:0,
    }
  },
  mounted(){
    // this.startRotate()
  },
  methods:{
    //重置相关参数
    resetData(){
      //元素角度
      // this.rotate = 0
      //定时器对象
      clearInterval(this.interverObj)
      this.interverObj = null
      //步进角度
      this.rotateStep = 1
      //当前运行毫秒数
      this.nowRunTime = 0
      //旋转状态0停止中 1旋转中 2停止中
      this.rotateState = 0
    },
    //启动旋转
    startRotate(){
      let that = this
      that.rotateState = 1
      that.interverObj = setInterval(function(){that.rotateLogo()},that.rotateRunTimeOut)
    },
    //停止旋转
    stopRotate(){
      this.rotateState = 2
    },
    //控制旋转步进角度
    handleRotate(){      
      if(this.rotateState == 1){//如果当前为旋转中
        //步进角度小于最大步进角度
        if(this.rotateStep < this.rotateStepMax){
          if(this.nowRunTime % this.rotateAddTime == 0){
            //继续累加步进角度
            this.rotateStep += this.rotateStep
          }          
        }
      }else if(this.rotateState == 2){//如果当前为停止中
        if(this.nowRunTime % this.rotateAddTime == 0){
          //减少步进角度
          if((this.rotateStep - this.rotateStepStop)>0){//如果减少之后,步进角度大于0,就继续减少
            this.rotateStep -= this.rotateStepStop
          }else{//否则就是要停止了
            //计算距离12点方向差多少度
            // let cha = 360 - this.rotate % 360
            this.rotateStep = 0
            this.resetData()            
          }          
        }
      }else{//静止状态

      }      
    },
    //停止旋转的函数
    // handleStop(){
    //   //计算完全停止需要多少度
    //   let a = 720 - this.rotate % 360
    //   //
    // },
    //执行旋转
    rotateLogo(){
      //累加运行毫秒数
      this.nowRunTime += this.rotateRunTimeOut
      //累加旋转角度
      this.rotate += this.rotateStep
      //调用控制旋转步进角度函数
      this.handleRotate()
    }    
  }
}
</script>

<style scoped>
.shunhua{
  transition: 0.1s;
}
</style>