张翔
56 lines
1.9 KiB
Markdown
56 lines
1.9 KiB
Markdown
# 粒子束视觉升级与移动端适配设计
|
||
|
||
日期: 2026-05-03
|
||
状态: 已批准
|
||
|
||
## 目标
|
||
|
||
提升 InkDataMorph 粒子动画的视觉美观度，并确保移动端展示体验。
|
||
|
||
## 核心改动
|
||
|
||
### 1. 多色调系统（5级水墨色调）
|
||
|
||
| 色调 | 色值 | 用途 | 分配比例 |
|
||
|------|------|------|----------|
|
||
| 浓墨 | #1C1C1C | 核心墨点 | 15% |
|
||
| 淡墨 | #4A4A4A | 中间层次 | 25% |
|
||
| 浅墨 | #8C8C8C | 氛围渲染 | 30% |
|
||
| 朱砂 | #C41E3A | 点缀焦点 | 10% |
|
||
| 淡朱 | #E8707A | 淡雅扩散 | 20% |
|
||
|
||
### 2. 粒子形态升级
|
||
|
||
- 椭圆粒子 + 随机旋转角度（ctx.ellipse 替代 ctx.arc）
|
||
- 浓墨粒子：纵横比 0.8-1.0（近圆）
|
||
- 淡墨/浅墨粒子：纵横比 0.5-0.9（椭圆）
|
||
- 墨迹飞溅：10% 粒子为飞溅粒子（更快速度、更小半径、不参与 morphing）
|
||
|
||
### 3. 响应式适配
|
||
|
||
| 参数 | 移动端 (<768px) | 平板 (768-1023px) | 桌面 (≥1024px) |
|
||
|------|-----------------|-------------------|----------------|
|
||
| 粒子数量 | 80 | 140 | 220 |
|
||
| 墨点起始 | 单墨点（右侧中上） | 双墨点（缩小间距） | 双墨点（当前） |
|
||
| 目标区域X | W*(0.55-0.9) | W*(0.5-0.9) | W*(0.5-0.9) |
|
||
| 目标区域Y | H*(0.1-0.5) | H*(0.12-0.6) | H*(0.12-0.65) |
|
||
| 连接距离 | 60px | 80px | 100px |
|
||
| 光晕缩放 | 0.5x | 0.75x | 1.0x |
|
||
| 渐变层数 | 2 | 2 | 3 |
|
||
| 拖尾效果 | 关闭 | 5帧 | 8帧 |
|
||
| 飞溅粒子 | 无 | 5% | 10% |
|
||
|
||
### 4. 技术实现
|
||
|
||
- Particle 接口新增: rotation, scaleX, scaleY, isSplash, toneIndex
|
||
- 新增 InkTone 枚举和 TONES 常量数组
|
||
- 新增 getResponsiveConfig(W) 函数根据屏幕宽度返回配置
|
||
- resize 监听（debounced 300ms）重新初始化粒子系统
|
||
- DPR 适配: Math.min(window.devicePixelRatio, 2)
|
||
- 移动端性能优化: 减少渐变层、关闭拖尾、减少粒子数
|
||
|
||
## 文件影响
|
||
|
||
- src/components/effects/ink-data-morph.tsx — 主要改动文件
|
||
- src/components/effects/ink-data-morph.test.tsx — 测试更新
|