【记录一下】Uniapp实现转盘抽奖效果

效果图如下，点击中间按钮转盘会开始转动，通过对应索引实现展示中奖信息
具体代码还有待优化，仅供参考，欢迎修改优化

uni.createAnimation

//图片对应版权归持有人所有，此处仅供参考，如直接使用此代码中的图片导致法律责任，后果自负
<template>
  <view class="Lottery">
    <div class="Lottery_top_title">

    </div>
    <div class="Lottery_top_tisp">
      每月前三名都可获得一次抽奖机会
    </div>
    <div class="Lottery_top_turntable">
      <u-image width="700" mode="widthFix" src="https://www.ry1688.com/h5/images/Lottery/turntable.png"></u-image>
      <div class="turntable_spin" :animation="animationData">
        <div class="turntable_spin_item" v-for="(item, index) in 6"
          :style="'transform: rotate(' + (index - 1) * 60 + 'deg) translateX(-50%) translateY(-50%) translate(100px)'">
          <div class="item_view">
            {{ index }}
          </div>
        </div>
      </div>
      <div class=" turntable_spin_active">

      </div>
      <div class="turntable_spin_btn" @click="drawClick">

      </div>
    </div>

  </view>
</template>

<script>
export default {
  data () {
    return {
      // 中奖的产品索引
      prizeIndex: 1,
      // 导出的动画函数
      animationData: {},
      //动画函数
      animation: null,
    };
  },
  methods: {

    drawClick () {
      console.log(1);
      //旋转角度
      let rota = ((Math.abs(this.prizeIndex - 6)) % 6) * 60;

      //创建动画
      this.animation = uni.createAnimation({
        // 动画持续时间
        duration: 3000,
        //定义动画的效果
        timingFunction: 'ease-in-out'
      });
      //设置旋转角度
      this.animation.rotate(rota + 3600).step()
      this.animationData = this.animation.export()
    },
  }
}
</script>

<style lang="scss">
.Lottery {
  width: 100vw;
  height: 100vh;
  display: flex;
  padding-top: 200rpx;
  text-align: center;
  align-items: center;
  flex-direction: column;
  background-size: 100% 100%;
  background-image: url('https://www.ry1688.com/h5/images/Lottery/background.png');

  .Lottery_top_title {
    width: 80%;
    height: 140rpx;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url('https://www.ry1688.com/h5/images/Lottery/top_title.png');
  }

  .Lottery_top_tisp {
    color: #ec7240;
    font-weight: 700;
    margin-top: 40rpx;
    letter-spacing: 1px;
    padding: 10rpx 20rpx;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #ffffffc0 50%, rgba(0, 0, 0, 0));
  }

  .Lottery_top_turntable {
    margin-top: 80rpx;
    position: relative;

    .u-image {}

    .turntable_spin {
      top: 117rpx;
      left: 126rpx;
      width: 450rpx;
      height: 450rpx;
      position: absolute;
      border-radius: 50%;
      border-radius: 50%;
      background-size: 100% 100%;
      background-image: url('https://www.ry1688.com/h5/images/Lottery/turntable_spin.png');

      .turntable_spin_item {
        top: 40%;
        left: 40%;
        width: 50px;
        height: 50px;
        z-index: 99999;
        position: absolute;

        .item_view {
          transform: rotate(60deg);
          transform-origin: center center;
        }
      }

    }

    .turntable_spin_btn {
      top: 230rpx;
      left: 260rpx;
      width: 200rpx;
      height: 200rpx;
      position: absolute;
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: url('https://www.ry1688.com/h5/images/Lottery/spin_btn.png');
    }

    .turntable_spin_active {
      top: 68rpx;
      left: 207rpx;
      width: 300rpx;
      height: 236rpx;
      position: absolute;
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: url('https://www.ry1688.com/h5/images/Lottery/turntable_active.png');
    }
  }
}
</style>