vue实现翻牌抽奖动画

实现翻牌抽奖动画的核心思路

翻牌抽奖动画通常包含牌面翻转、选中高亮、结果展示等效果。Vue的过渡系统和动态样式绑定可高效实现这类交互。

基础HTML结构与CSS样式

<template>
  <div class="lottery-container">
    <div 
      v-for="(card, index) in cards" 
      :key="index"
      class="card"
      :class="{ 'is-flipped': card.isFlipped, 'is-selected': card.isSelected }"
      @click="flipCard(index)"
    >
      <div class="card-face card-front"></div>
      <div class="card-face card-back">{{ card.value }}</div>
    </div>
  </div>
</template>

.lottery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.card {
  width: 100px;
  height: 150px;
  position: relative;
  perspective: 1000px;
  cursor: pointer;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  transition: transform 0.6s;
}

.card-front {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  transform: rotateY(0deg);
}

.card-back {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  transform: rotateY(180deg);
}

.is-flipped .card-front {
  transform: rotateY(-180deg);
}

.is-flipped .card-back {
  transform: rotateY(0deg);
}

.is-selected {
  box-shadow: 0 0 20px gold;
}

Vue组件逻辑实现

export default {
  data() {
    return {
      cards: [
        { value: '奖品A', isFlipped: false, isSelected: false },
        { value: '奖品B', isFlipped: false, isSelected: false },
        // 更多奖品...
      ],
      isDrawing: false
    }
  },
  methods: {
    flipCard(index) {
      if (this.isDrawing) return;

      this.cards[index].isFlipped = !this.cards[index].isFlipped;
    },
    startDraw() {
      this.isDrawing = true;

      // 重置所有卡片状态
      this.cards.forEach(card => {
        card.isFlipped = false;
        card.isSelected = false;
      });

      // 模拟抽奖过程
      const duration = 3000; // 3秒抽奖动画
      const interval = 100;  // 高亮切换间隔
      const steps = duration / interval;
      let currentStep = 0;

      const highlightInterval = setInterval(() => {
        const prevIndex = currentStep % this.cards.length;
        const nextIndex = (currentStep + 1) % this.cards.length;

        this.cards[prevIndex].isSelected = false;
        this.cards[nextIndex].isSelected = true;

        currentStep++;
        if (currentStep > steps) {
          clearInterval(highlightInterval);
          this.finalizeDraw();
        }
      }, interval);
    },
    finalizeDraw() {
      // 随机选择中奖卡片
      const winnerIndex = Math.floor(Math.random() * this.cards.length);
      this.cards[winnerIndex].isSelected = true;
      this.cards[winnerIndex].isFlipped = true;

      this.isDrawing = false;
    }
  }
}

进阶优化方案

添加3D翻转效果增强 通过CSS transform增加深度感：

.card {
  transform-style: preserve-3d;
}

.is-flipped {
  transform: rotateY(180deg);
}

添加音效反馈 在抽奖过程中加入音效：

// 在methods中添加
playSound(type) {
  const audio = new Audio();
  audio.src = type === 'flip' ? 'flip-sound.mp3' : 'win-sound.mp3';
  audio.play();
}

响应式设计调整 通过计算属性适应不同屏幕：

computed: {
  cardSize() {
    return window.innerWidth < 768 ? '80px' : '100px';
  }
}

注意事项

• 移动端触摸事件可能需要添加@touchstart事件监听
• 大量卡片时考虑使用requestAnimationFrame优化性能
• 中奖概率可通过调整cards数组中的奖品分布实现
• 实际项目应结合后端API进行真实抽奖逻辑

以上实现方案可根据实际需求调整动画时长、样式细节和交互逻辑。关键是通过Vue的数据驱动特性控制CSS过渡类名的切换，实现流畅的视觉效果。