张翔
1.9 KiB
1.9 KiB
粒子束视觉升级与移动端适配设计
日期: 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 — 测试更新