# 归档抛物线飞入 — design.md

内容版本：sha256:72cdd5e230ed8588b3f3e061cff10596c0aaf926cc0b1bf70e12a1e5b3de7a54

本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明；未提供的数值不作推断。实现建议须在后续开发中选择和验收。

## 元数据记录

- 资产：components/parabola-archive-fly；语义类型：interaction。
- 分类：交互模式。
- 标签：抛物线动画、双轴分层、缩小淡出、角标目标。
- 场景：消息归档、加入购物车飞入、收藏动效、删除回收。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 双轴曲线分层：动画拆两层：横向 translateX 匀速 linear，纵向 translateY 缓出 ease-out，两轴合成自然抛物线弧线
- 伴随缩放淡出：飞行过程中卡片 scale 从 1 缩至约 0.2，opacity 渐隐，整体时长 300-400ms，终点对准角标位置
- 避免单轴瞬移感：单条 transform 写不出弧线，必须用嵌套元素分别承担 X/Y 轴动画

### 实际文件与参考资源

- `cover.png`（sha256:2341dbbfa04e4b7573ec54ffb006efe5d71122b488c381f3fea5b182d54bfe92）
- `demo.html`（sha256:8e2df8a70af698235a40d1eb01d33b2973bb1710c549ddb9f0f72adb83dc6740）
- `meta.yml`
- 实现摘要：sha256:8e2df8a70af698235a40d1eb01d33b2973bb1710c549ddb9f0f72adb83dc6740。

## 未提供

- 未结构化记录的精确色值、字号、间距、断点、动效时长与状态转换参数不作推断；亮点中的数值属于元数据声明，demo 的存在与摘要不代表浏览器行为已验收。

## 实现建议

- 按正常、悬停、聚焦、激活、禁用、加载、成功和错误状态定义适用的状态表。
- 使用语义化元素，验证键盘操作、焦点可见性、触控目标和减少动效偏好。
- 以 demo.html 为实现参考，逐项验证交互、窄屏布局、文本溢出和错误恢复；具体参数由实现与验收确认。