54 lines
1.6 KiB
Markdown
54 lines
1.6 KiB
Markdown
# 翻牌特效架构设计 (DESIGN)
|
||
|
||
## 整体架构
|
||
项目采用单页应用架构，通过 React 状态驱动 UI 更新和动效触发。
|
||
|
||
```mermaid
|
||
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)
|
||
```text
|
||
src/
|
||
components/
|
||
CardGrid.tsx
|
||
FlipCard.tsx
|
||
StarryBackground.tsx
|
||
ProductModal.tsx
|
||
assets/
|
||
images/
|
||
App.tsx
|
||
index.css
|
||
```
|