react实现翻牌抽奖活动

实现翻牌抽奖的基本思路

翻牌抽奖活动的核心是通过点击卡片触发翻转动画，展示奖品信息。React中可通过状态管理控制翻转状态，结合CSS动画实现视觉效果。

核心代码结构

import React, { useState } from 'react';
import './FlipCard.css';

const FlipCard = () => {
  const [flipped, setFlipped] = useState(false);
  const [prize, setPrize] = useState('');

  const prizes = ['一等奖', '二等奖', '谢谢参与', '优惠券'];

  const handleFlip = () => {
    if (!flipped) {
      const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
      setPrize(randomPrize);
    }
    setFlipped(!flipped);
  };

  return (
    <div className={`flip-card ${flipped ? 'flipped' : ''}`} onClick={handleFlip}>
      <div className="flip-card-inner">
        <div className="flip-card-front">
          <div className="card-content">点击抽奖</div>
        </div>
        <div className="flip-card-back">
          <div className="card-content">{prize}</div>
        </div>
      </div>
    </div>
  );
};

配套CSS样式

.flip-card {
  perspective: 1000px;
  width: 200px;
  height: 300px;
  margin: 20px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.flip-card-front {
  background-color: #ff4757;
  color: white;
}

.flip-card-back {
  background-color: #70a1ff;
  color: white;
  transform: rotateY(180deg);
}

.card-content {
  font-size: 24px;
  font-weight: bold;
}

多卡片布局实现

对于多个抽奖卡片的情况，可将单个卡片组件化：

const PrizeWall = () => {
  return (
    <div className="prize-wall">
      <FlipCard />
      <FlipCard />
      <FlipCard />
    </div>
  );
};

配套CSS：

.prize-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

高级功能扩展

添加抽奖限制逻辑，防止重复抽奖：

const [hasDrawn, setHasDrawn] = useState(false);

const handleFlip = () => {
  if (hasDrawn) return;

  const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
  setPrize(randomPrize);
  setFlipped(true);
  setHasDrawn(true);
};

添加重置功能：

const handleReset = () => {
  setFlipped(false);
  setHasDrawn(false);
  setPrize('');
};

性能优化建议

使用React.memo优化卡片组件：

const MemoizedFlipCard = React.memo(FlipCard);

对于大量卡片的情况，考虑虚拟滚动技术：

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>
    <FlipCard key={index} />
  </div>
);

const PrizeWall = () => (
  <List
    height={600}
    itemCount={100}
    itemSize={320}
    width={800}
  >
    {Row}
  </List>
);

动画增强方案

使用CSS变量控制动画速度：

.flip-card {
  --flip-duration: 0.6s;
}

.flip-card-inner {
  transition: transform var(--flip-duration);
}

添加弹簧动画效果：

.flip-card-inner {
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}