122 lines
3.0 KiB
Markdown
122 lines
3.0 KiB
Markdown
# 抖音游戏翻牌特效需求对齐
|
||
|
||
## 原始需求
|
||
|
||
用户希望在 `douyin_game` 项目中开发一个翻牌 Web 应用，参考泡泡玛特直播间的翻牌抽盒效果。
|
||
|
||
## 参考截图分析
|
||
|
||
|
||
|
||
|
||
|
||
### 核心功能分析
|
||
|
||
从截图中观察到以下特征：
|
||
|
||
1. **卡片网格布局**
|
||
- 3x4 的卡片网格（共 12 张卡片）
|
||
- 每张卡片显示挂件产品图片
|
||
- 绿色方格背景，白色卡片
|
||
|
||
2. **卡片状态**
|
||
- 未翻开状态：显示产品缩略图+用户头像+昵称+倒计时
|
||
- 翻开后状态：大图展示产品详情
|
||
|
||
3. **翻牌特效**（图3展示）
|
||
- 深色星空背景
|
||
- 星星闪烁粒子效果
|
||
- 产品大图居中展示
|
||
- 卡片 3D 翻转动画
|
||
|
||
4. **交互元素**
|
||
- 用户头像标识
|
||
- 昵称显示
|
||
- 抽取倒计时
|
||
|
||
---
|
||
|
||
## 边界确认
|
||
|
||
### 开发范围
|
||
|
||
- [x] 卡片网格布局 UI
|
||
- [x] 3D 翻牌动画效果
|
||
- [x] 星空背景特效
|
||
- [x] 粒子闪烁效果
|
||
- [x] 产品大图展示遮罩层
|
||
|
||
### 排除范围
|
||
|
||
- [ ] 后端抽盒逻辑（已有）
|
||
- [ ] 支付流程
|
||
- [ ] 用户身份认证
|
||
|
||
---
|
||
|
||
## 疑问澄清
|
||
|
||
> [!IMPORTANT]
|
||
> 以下问题需要用户确认
|
||
|
||
### 1. 项目位置
|
||
|
||
当前 `douyin_game` 目录为空，请确认：
|
||
- 是否在此目录新建独立项目？
|
||
- 还是集成到现有 `game/app` 项目中？
|
||
|
||
### 2. 技术栈选择
|
||
|
||
现有项目使用 **React + TypeScript + Vite + TailwindCSS**：
|
||
- 是否沿用相同技术栈？
|
||
- 或者使用纯 HTML/CSS/JS 开发独立页面？
|
||
|
||
### 3. 数据来源
|
||
|
||
翻牌游戏的数据（产品信息、用户信息等）：
|
||
- 是否需要对接后端 API？
|
||
- 还是先开发静态演示版本？
|
||
|
||
### 4. 翻牌触发方式
|
||
|
||
用户如何触发翻牌：
|
||
- 点击自己预定的卡片？
|
||
- 观看他人翻牌的直播效果？
|
||
- 两者结合？
|
||
|
||
### 5. 特效细节偏好
|
||
|
||
关于"人物背后的翻牌特效"，请确认：
|
||
- **星空背景**：是否需要动态渐变星空？
|
||
- **粒子效果**：闪烁星星数量和密度？
|
||
- **翻转动画**：水平翻转还是垂直翻转？
|
||
- **展示遮罩**：是否需要毛玻璃效果？
|
||
|
||
---
|
||
|
||
## 技术理解
|
||
|
||
### 现有项目分析
|
||
|
||
项目 `game/app` 技术栈：
|
||
- React 19 + TypeScript
|
||
- Vite 构建工具
|
||
- TailwindCSS 样式
|
||
- 已有丰富的 CSS 动画效果（`Explosion.css`）
|
||
|
||
### 翻牌特效技术方案
|
||
|
||
| 特效组件 | 技术实现 |
|
||
|---------|---------|
|
||
| 3D 翻牌动画 | CSS `transform: rotateY()` + `perspective` |
|
||
| 星空背景 | 深色渐变 + CSS `radial-gradient` |
|
||
| 星星闪烁 | CSS `@keyframes` 动画 + 随机延迟 |
|
||
| 粒子效果 | Canvas API 或 CSS 伪元素 |
|
||
| 遮罩层 | `backdrop-filter: blur()` 毛玻璃效果 |
|
||
|
||
---
|
||
|
||
## 等待用户回复
|
||
|
||
上述疑问需要用户回复后才能进入架构设计阶段。
|