当前位置：首页 > VUE

vue实现转盘抽奖

2026-01-08 05:33:42VUE

Vue 实现转盘抽奖

基本思路

转盘抽奖的核心是通过 CSS 动画实现旋转效果，Vue 负责控制旋转逻辑和数据绑定。关键点包括转盘扇形区域的绘制、旋转动画的触发与停止、中奖结果的判定。

实现步骤

HTML 结构

<template>
  <div class="wheel-container">
    <div class="wheel" :style="wheelStyle" ref="wheel">
      <div class="wheel-item" v-for="(item, index) in prizes" :key="index" :style="getItemStyle(index)">
        {{ item.name }}
      </div>
    </div>
    <button @click="startRotate" :disabled="isRotating">开始抽奖</button>
  </div>
</template>

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 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

.wheel-item {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: 100% 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

JavaScript 逻辑

<script>
export default {
  data() {
    return {
      prizes: [
        { name: '奖品1', color: '#FF5252' },
        { name: '奖品2', color: '#FF4081' },
        { name: '奖品3', color: '#E040FB' },
        { name: '奖品4', color: '#7C4DFF' },
        { name: '奖品5', color: '#536DFE' },
        { name: '奖品6', color: '#448AFF' }
      ],
      isRotating: false,
      rotation: 0,
      targetRotation: 0
    }
  },
  computed: {
    wheelStyle() {
      return {
        transform: `rotate(${this.rotation}deg)`
      }
    }
  },
  methods: {
    getItemStyle(index) {
      const angle = 360 / this.prizes.length
      return {
        backgroundColor: this.prizes[index].color,
        transform: `rotate(${angle * index}deg) skewY(${90 - angle}deg)`
      }
    },
    startRotate() {
      if (this.isRotating) return
      this.isRotating = true

      // 随机选择中奖索引
      const prizeIndex = Math.floor(Math.random() * this.prizes.length)
      const anglePerItem = 360 / this.prizes.length

      // 计算目标旋转角度（多转几圈后停在目标位置）
      this.targetRotation = this.rotation + 360 * 5 + (360 - prizeIndex * anglePerItem)

      // 开始动画
      this.animateRotation()

      // 动画结束后处理
      setTimeout(() => {
        this.isRotating = false
        alert(`恭喜获得: ${this.prizes[prizeIndex].name}`)
      }, 4000)
    },
    animateRotation() {
      const startTime = Date.now()
      const duration = 4000

      const animate = () => {
        const now = Date.now()
        const progress = Math.min((now - startTime) / duration, 1)
        const easeProgress = this.easeOut(progress)
        this.rotation = this.rotation + (this.targetRotation - this.rotation) * easeProgress

        if (progress < 1) {
          requestAnimationFrame(animate)
        }
      }

      animate()
    },
    easeOut(t) {
      return 1 - Math.pow(1 - t, 3)
    }
  }
}
</script>