场景如下:
用户点击抽奖,转盘立刻线性提速转动,同时请求抽奖接口,旋转过程中等待接口返回抽奖信息
接口返回信息后,转盘减速至停转
网上找到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>