vue实现点击旋转轮盘

实现点击旋转轮盘效果

在Vue中实现点击旋转轮盘效果，可以通过CSS动画和Vue的数据绑定结合完成。以下是一个完整的实现方案：

准备工作

需要安装Vue.js环境，可以通过CDN引入或使用Vue CLI创建项目。

HTML结构

<template>
  <div class="wheel-container">
    <div 
      class="wheel" 
      :style="{ transform: `rotate(${rotation}deg)` }"
      @click="spinWheel"
    >
      <div class="wheel-item" v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

JavaScript部分

<script>
export default {
  data() {
    return {
      rotation: 0,
      items: ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6'],
      spinning: false
    }
  },
  methods: {
    spinWheel() {
      if (this.spinning) return;

      this.spinning = true;
      const minRotation = 1080; // 最小旋转角度
      const maxRotation = 2160; // 最大旋转角度
      const randomRotation = Math.floor(
        Math.random() * (maxRotation - minRotation + 1) + minRotation
      );

      this.rotation += randomRotation;

      setTimeout(() => {
        this.spinning = false;
        this.calculatePrize();
      }, 5000); // 动画持续时间
    },
    calculatePrize() {
      const normalizedRotation = this.rotation % 360;
      const itemAngle = 360 / this.items.length;
      const winningIndex = Math.floor(normalizedRotation / itemAngle);
      alert(`恭喜获得: ${this.items[winningIndex]}`);
    }
  }
}
</script>

CSS样式

<style scoped>
.wheel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.wheel {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(
    from 0deg,
    #ff0000 0deg 60deg,
    #00ff00 60deg 120deg,
    #0000ff 120deg 180deg,
    #ffff00 180deg 240deg,
    #ff00ff 240deg 300deg,
    #00ffff 300deg 360deg
  );
  transition: transform 5s cubic-bezier(0.17, 0.67, 0.12, 0.99);
  cursor: pointer;
}

.wheel-item {
  position: absolute;
  width: 100%;
  text-align: center;
  transform-origin: center;
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px 2px black;
}

.wheel-item:nth-child(1) { transform: rotate(30deg) translateY(-120px); }
.wheel-item:nth-child(2) { transform: rotate(90deg) translateY(-120px); }
.wheel-item:nth-child(3) { transform: rotate(150deg) translateY(-120px); }
.wheel-item:nth-child(4) { transform: rotate(210deg) translateY(-120px); }
.wheel-item:nth-child(5) { transform: rotate(270deg) translateY(-120px); }
.wheel-item:nth-child(6) { transform: rotate(330deg) translateY(-120px); }
</style>

实现要点

轮盘旋转通过CSS的transform属性实现，Vue的数据绑定使旋转角度动态变化。transition属性创建平滑的动画效果。

conic-gradient创建彩色扇形区域，每个区域对应一个奖品。通过计算旋转后的角度确定最终获奖项。

点击事件触发spinWheel方法，生成随机旋转角度并启动动画。动画完成后计算获奖结果。

扩展功能

可以添加指针元素，增强视觉效果。调整动画曲线使旋转更自然。增加音效提升用户体验。设置奖品概率权重使某些奖品更难获得。