vue实现抽奖轮盘

实现抽奖轮盘的基本思路

使用Vue实现抽奖轮盘需要结合CSS动画和随机算法控制旋转效果。核心是通过动态绑定CSS的transform属性，利用transition实现平滑旋转，并通过计算随机停止角度确定中奖结果。

准备轮盘数据

定义奖品列表和对应的角度区间。假设轮盘分为8个等分区域，每个区域对应一个奖品：

data() {
  return {
    prizes: [
      { name: "奖品1", color: "#FF5252" },
      { name: "奖品2", color: "#FF4081" },
      // ...共8个奖品
    ],
    spinning: false,
    resultIndex: null
  }
}

绘制轮盘UI

使用CSS绘制圆形轮盘，通过v-for循环渲染奖品扇形区域：

<template>
  <div class="wheel-container">
    <div class="wheel" :style="wheelStyle">
      <div 
        v-for="(prize, index) in prizes" 
        :key="index"
        class="slice"
        :style="{
          backgroundColor: prize.color,
          transform: `rotate(${index * 45}deg) skewY(${90 - 45}deg)`
        }"
      >
        <span class="prize-text">{{ prize.name }}</span>
      </div>
    </div>
    <button @click="startSpin" :disabled="spinning">开始抽奖</button>
  </div>
</template>

实现旋转动画

通过计算随机旋转角度并应用CSS过渡效果：

methods: {
  startSpin() {
    if (this.spinning) return;
    this.spinning = true;
    this.resultIndex = Math.floor(Math.random() * this.prizes.length);

    // 计算旋转圈数和最终角度（示例：5圈 + 奖品位置）
    const spins = 5;
    const anglePerPrize = 360 / this.prizes.length;
    const targetAngle = spins * 360 + this.resultIndex * anglePerPrize;

    this.wheelStyle = {
      transition: `transform 3s ease-out`,
      transform: `rotate(${-targetAngle}deg)`
    };

    setTimeout(() => {
      this.spinning = false;
      alert(`恭喜获得：${this.prizes[this.resultIndex].name}`);
    }, 3000);
  }
}

添加指针和样式

完善CSS样式使轮盘视觉效果更专业：

.wheel-container {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: transform 3s ease-out;
}

.slice {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 0;
  top: 0;
  transform-origin: bottom right;
}

.pointer {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #000;
}

优化用户体验

添加开始/结束回调，重置旋转状态：

resetWheel() {
  this.wheelStyle = {
    transition: 'none',
    transform: 'rotate(0deg)'
  };
  // 需要在下一次tick应用重置
  this.$nextTick(() => {
    setTimeout(() => {
      this.wheelStyle.transition = 'transform 3s ease-out';
    }, 50);
  });
}

完整组件示例

将上述代码整合为可复用的Vue组件：

<template>
  <div class="lottery-wheel">
    <div class="pointer"></div>
    <div class="wheel" :style="wheelStyle">
      <!-- 扇形区域 -->
    </div>
    <button 
      class="spin-button" 
      @click="startSpin" 
      :disabled="spinning"
    >
      {{ spinning ? '抽奖中...' : '开始抽奖' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wheelStyle: {
        transform: 'rotate(0deg)',
        transition: 'none'
      }
    }
  },
  methods: {
    // 包含之前定义的startSpin和resetWheel方法
  }
}
</script>