移动端幸运转盘抽奖

移动端幸运转盘抽奖

描述：看网上幸运转盘案例大多采用两种状态切换，感觉过渡的时候不流畅，体验不太好，所以自己写了一下（这里只放一小部分代码）
完整代码地址：https://github.com/wangjing12345678/luck.git

1.页面部分

转盘当中奖项可进行配置(为了方便扩展）

[{id: "1", itemname: "一等奖"},
 {id: "2", itemname: "二等奖"},
 {id: "3", itemname: "三等奖"},
 {id: "4", itemname: "四等奖"},
 {id: "5", itemname: "五等奖"},
 {id: "6", itemname: "未中奖"} ]

每个奖项块利用 transform 变形成菱形 且指针指向第一个奖项的中间
每一个奖项块转的角度

			 document.querySelectorAll('.prize').forEach(function (item, i) {
                    var first = 90 - (360 / that.degNum / 2)
                    if (i == 0) {
                    //第一个角度与其余的不太相同单独写
                        item.style.transform = 'rotate(' + first + 'deg)skewX(' + (90 - (360 / that.degNum)) + 'deg)';
                    } else {
                        item.style.transform = 'rotate(' + (first + (360 / that.degNum) * i) + 'deg)skewX(' + (90 - (360 / that.degNum)) + 'deg)';
                    }
                })
                document.querySelectorAll('.prize-content').forEach(function (item, i) {
                    var first = 90 - (360 / that.degNum / 2)
                    if (i == 0) {
                        item.style.transform = 'rotate(' + first + 'deg)'
                    } else {
                        item.style.transform = 'rotate(' + (first + (360 / that.degNum) * i) + 'deg)'
                    }
                })

2.点击开始旋转

先计算出停止在某一个奖项的随机角度 然后旋转的圈数我是写死的（15圈）
最终利用transform：rotate使其停下

					this.calcRandomDeg() //当前停止时侯的奖项所在角度
                    this.flag += 15 //旋转5圈
                    var playDeg = 0
                    if (this.luckNum == 1) { //指针在第一个奖项中间所以第一个奖项角度是一个数组
                        var arrIndex = Math.floor(Math.random() * 2)
                        playDeg = this.randomDeg[arrIndex]
                    } else {
                        playDeg = this.randomDeg
                    }
                    console.log(playDeg)
                    this.deg = this.flag * 360 + (-playDeg) //这里是最终转盘转动的总度数
                    var time = 5   //转动五秒
                    setTimeout(() => {
                        this.currState = STATE.BRAKE;
                        this.el.style.cssText =
                            `-webkit-transform:rotate(${this.deg}deg);
							-webkit-transition-duration:${time}s;
							transform:rotate(${this.deg}deg);
							transition-duration:${time}s`
                    }, 20)

停止时候可以将转盘重置

 this.$refs.circle.reset()