前端Vue简单编写一个幸运大转盘抽奖游戏

最近公司有一个需求要做一个抽奖类的大转盘游戏配合运营推广，先看看大概的界面ui图吧

 使用rotate计算每一个奖项的角度进行奖项的布局

        <ul class="gift-container">
          <li v-for="(item, index) in prizeList" :key="index" :style="{'transform': `rotate(${index * 360 / prizeList.length}deg)`}">
            <span>{{item.Name}}</span>
            <img :src="item.Pictures || DiscImg" alt="">
          </li>
        </ul>

点击抽奖给奖盘父盒子设置下面的属性

<div class="disc-list" :style="{transform:rotateAngle,transition:tranInof}"></div>

rotateNumber 是指旋转的圈数， 360度一圈， 乘55

rotateAngle 是赋值旋转角度后的CSS3属性

tranInof 是transition属性过度动画

        this.rotateNumber = 360 * 55
        this.rotateAngle = 'rotate(' + this.rotateNumber + 'deg)'
        this.tranInof = 'transform 12s linear'

如果想指向指定的奖项就计算出每个奖项的的角度的中间位置加在rotateNumber后面即可

例如：你要抽中第3个奖项 3 * 60 + 30 = 奖项角度  需要注意的是最后的rotateNumber的结果正负数会导致旋转的方向顺逆时针转动。