bindbox-game/docs/翻牌特效/DESIGN_翻牌特效.md

翻牌特效架构设计 (DESIGN)

整体架构

项目采用单页应用架构，通过 React 状态驱动 UI 更新和动效触发。

graph TD
    App[App Component] --> GameState[Game State: revealedCards, selectedId]
    App --> StarLayer[StarryBackground Component]
    App --> Grid[CardGrid Component]
    Grid --> Card[FlipCard Component]
    Card --> CardUI[Front: Avatar/Info | Back: ProductImg]
    App --> Modal[ProductModal Component]

核心组件设计

1. FlipCard (翻牌组件)

• Props: id, user, product, isRevealed, onFlip.
• CSS:
  • .card-inner: transition: transform 0.6s; transform-style: preserve-3d;
  • .card-front, .card-back: backface-visibility: hidden;

2. StarryBackground (星空背景)

• 实现多层叠加背景：
  • 底层：深蓝色渐变 #0a0b1e -> #161b33。
  • 中层：静态微小星星（CSS 粒状纹理）。
  • 高层：关键帧动画模拟的闪烁星星（不同大小、延时）。

3. ProductModal (展示遮罩)

• 当 selectedId 存在时显示。
• Style: fixed inset-0, backdrop-filter: blur(8px), bg-black/40。
• Animation: 放大缩放并带有一圈光晕特效。

实现细节：粒子特效

当翻牌触发时，在卡片位置生成一组临时的粒子元素：

• 随机方向发射。
• 逐渐变小并透明。
• 使用 React useState 管理粒子生命周期。

目录结构 (douyin_game)

src/
  components/
    CardGrid.tsx
    FlipCard.tsx
    StarryBackground.tsx
    ProductModal.tsx
  assets/
    images/
  App.tsx
  index.css