博客

1. 实现原理

实际解决用户需求：当用户点击抽奖时，会请求接口获取中奖的奖品信息，前端根据中奖编号进行修改css样式，让转盘旋转，调整角度对应后端返回的奖品。如果抽奖有多次机会的话，每次需要抽奖结束后需要

重置角度

2.html 代码

.wheel
    img.turntable(
     src='@/assets/img/second-anniversary/turntable.png'
     :style="{transform:'rotate('+rotateAngle+'deg)',transition:rotateTransition == ''?'transform 4s ease-out':rotateTransition }"
      )
    img.pointer(
       src='@/assets/img/second-anniversary/pointer.png'
       @click='lottery'
     )

transform:用来改变旋转的角度

transition: 旋转过渡效果

3. js逻辑代码

<script>
import { draw, getDrawCount } from '@/service/draw.js'
export default {
    data() {
        return {
            sortNum: -1, // 中奖id
            rotateTransition: '', // 默认过渡效果
            rotateAngle: 0, // 默认角度
            count: 0 // 抽奖次数
        }
    },
    created() {
        this.getDrawTimes()
    },
    methods: {
        // 抽奖次数
        async getDrawTimes() {
            try {
                let res = await getDrawCount()
                this.count = res
            } catch (e) {
                throw new Error(e.msg)
            }
        },
        // 抽奖操作
        async draw() {
            try {
                let res = await draw()
                // 重置抽奖次数
                this.getDrawTimes()
                this.sortNum = res
                this.routePlate()
            } catch (e) {
                throw new Error(e.msg)
            }
        },
                // 转盘动画
        routePlate() {
            let type = 0 // 默认为 0  转盘转动
            let randCircle = 5 // 附加多转几圈
            let duringTime = 5 // 默认为 5s
            this.rotateAngle = '' //转动的角度
            this.rotateAngle = randCircle * 360 + 90 - this.sortNum * 45
            this.isAllowClick = false
            if (type === 0) {
                setTimeout(() => {
                    this.showReward = true
                    this.isAllowClick = true
                    this.rotateAngle = 0 //真正控制转动角度的,为0,回到初始位置
                    this.rotateTransition = 'transform 0.05s ease-out' //控制转动过渡效果的
                    // this.rotateAngle = 0
                }, duringTime * 1000 + 200)
            }
    }
}
</script>

4. 效果展示图