vue 实现抽奖轮盘

Vue 实现抽奖轮盘

使用 CSS 动画和 Vue 数据绑定

创建一个抽奖轮盘需要结合 CSS 动画和 Vue 的数据绑定功能。通过 Vue 控制旋转角度和动画时间，实现抽奖效果。

<template>
  <div class="wheel-container">
    <div 
      class="wheel" 
      :style="{ transform: `rotate(${currentRotation}deg)`, transition: `transform ${spinTime}s ease-out` }"
      @transitionend="onSpinEnd"
    >
      <div 
        v-for="(item, index) in items" 
        :key="index" 
        class="wheel-item" 
        :style="{ transform: `rotate(${(360 / items.length) * index}deg)` }"
      >
        {{ item }}
      </div>
    </div>
    <button @click="spinWheel" :disabled="isSpinning">开始抽奖</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6'],
      currentRotation: 0,
      spinTime: 0,
      isSpinning: false
    }
  },
  methods: {
    spinWheel() {
      this.isSpinning = true;
      const rounds = 5; // 旋转圈数
      const randomIndex = Math.floor(Math.random() * this.items.length);
      const segmentAngle = 360 / this.items.length;
      this.spinTime = 3; // 旋转时间
      this.currentRotation += rounds * 360 + (360 - (segmentAngle * randomIndex));
    },
    onSpinEnd() {
      this.isSpinning = false;
      const segmentAngle = 360 / this.items.length;
      const normalizedRotation = this.currentRotation % 360;
      const winningIndex = Math.floor((360 - normalizedRotation) / segmentAngle) % this.items.length;
      alert(`恭喜获得: ${this.items[winningIndex]}`);
    }
  }
}
</script>

<style>
.wheel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wheel {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(
    from 0deg,
    red 0deg 60deg,
    blue 60deg 120deg,
    green 120deg 180deg,
    yellow 180deg 240deg,
    purple 240deg 300deg,
    orange 300deg 360deg
  );
  transform: rotate(0deg);
}

.wheel-item {
  position: absolute;
  width: 100px;
  text-align: center;
  left: 50%;
  top: 10px;
  transform-origin: bottom center;
  color: white;
  font-weight: bold;
}
</style>

使用第三方库

对于更复杂的效果，可以考虑使用第三方库如 vue-wheel 或 gsap 实现更流畅的动画。

npm install gsap

<template>
  <div class="wheel-container">
    <div ref="wheel" class="wheel">
      <div 
        v-for="(item, index) in items" 
        :key="index" 
        class="wheel-item" 
        :style="{ transform: `rotate(${(360 / items.length) * index}deg)` }"
      >
        {{ item }}
      </div>
    </div>
    <button @click="spinWheel" :disabled="isSpinning">开始抽奖</button>
  </div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  data() {
    return {
      items: ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6'],
      isSpinning: false
    }
  },
  methods: {
    spinWheel() {
      this.isSpinning = true;
      const randomIndex = Math.floor(Math.random() * this.items.length);
      const segmentAngle = 360 / this.items.length;
      const targetRotation = 360 * 5 + (360 - (segmentAngle * randomIndex));

      gsap.to(this.$refs.wheel, {
        rotation: targetRotation,
        duration: 3,
        ease: "power2.out",
        onComplete: () => {
          this.isSpinning = false;
          alert(`恭喜获得: ${this.items[randomIndex]}`);
        }
      });
    }
  }
}
</script>

响应式设计

确保轮盘在不同设备上都能正常显示，可以添加响应式样式：

@media (max-width: 600px) {
  .wheel {
    width: 200px;
    height: 200px;
  }

  .wheel-item {
    width: 70px;
    font-size: 12px;
  }
}

奖品概率控制

如果需要控制不同奖品的概率，可以修改 spinWheel 方法：

spinWheel() {
  const probabilities = [0.1, 0.2, 0.3, 0.2, 0.1, 0.1]; // 各奖品概率
  let random = Math.random();
  let cumulativeProbability = 0;
  let selectedIndex = 0;

  for (let i = 0; i < probabilities.length; i++) {
    cumulativeProbability += probabilities[i];
    if (random <= cumulativeProbability) {
      selectedIndex = i;
      break;
    }
  }

  // 其余旋转逻辑...
}

通过以上方法，可以实现一个功能完善的抽奖轮盘，包含动画效果、概率控制和响应式设计。