58 lines
3.4 KiB
Markdown
58 lines
3.4 KiB
Markdown
# AppLoading 必要加载动效设计
|
||
|
||
## 背景与问题
|
||
|
||
G01 加载态当前使用公共 `components/AppLoading.vue`。组件原本包含印牌与如意结呼吸动画，但在 `prefers-reduced-motion: reduce` 下将两者统一设为 `animation: none`。当前 Chrome 正处于该模式，运行检查确认动画数量为 0，因此页面虽然显示“正在整理家谱”，视觉上却完全静止，用户无法快速判断加载是否仍在进行。
|
||
|
||
## 用户决定
|
||
|
||
- 采用“印牌明暗呼吸”方案。
|
||
- 即使系统开启“减少动态效果”，加载态仍须保留低幅度但明确可见的必要反馈。
|
||
- 减少动态效果模式只取消缩放、旋转和位移，不再把加载动画全部关闭。
|
||
- 当前只返工 G01 加载态及其直接依赖的公共加载组件、测试和证据；不切换到其他 G01 状态，不修改接口或业务逻辑。
|
||
|
||
## 视觉与动效
|
||
|
||
### 正常动态模式
|
||
|
||
- 保留现有红金家谱印牌与如意结真实资产，不新增图片、CSS 图形或文字图标。
|
||
- 印牌使用透明度与轻微缩放组合的循环呼吸，节奏清晰但不跳动，不改变布局。
|
||
- 如意结使用错峰透明度呼吸，作为辅助节奏，不抢夺印牌主视觉。
|
||
- 不旋转、不上下漂移、不闪烁，不改变加载文案。
|
||
|
||
### 减少动态效果模式
|
||
|
||
- 印牌与如意结保持固定尺寸和固定位置，`transform` 始终为 `none`。
|
||
- 两者继续使用透明度循环；印牌为主节奏，如意结错峰变化。
|
||
- 明暗范围必须足以让用户在约 1 秒内感知页面仍在工作，但不得出现完全消失或高频闪烁。
|
||
- 加载文案和说明保持静态，避免文字跳动影响阅读。
|
||
|
||
## 实现边界
|
||
|
||
- 动效规则仍由 `components/AppLoading.vue` 单一维护，G01 不复制动画样式。
|
||
- 不改变 `variant`、`text`、`description` 组件契约。
|
||
- 不改变 G01 的 `isLoading`、路由状态、页面布局、背景、标题栏和底部导航。
|
||
- 公共组件的修正只涉及加载反馈语义；不得顺手调整其他页面布局或视觉。
|
||
- 不使用 JavaScript 定时器驱动动画，继续使用低成本的 `opacity` 与 `transform`。
|
||
|
||
## 测试与验收
|
||
|
||
1. 先更新公共加载组件契约，使旧的 `prefers-reduced-motion` 下 `animation: none` 行为触发失败，并确认 RED。
|
||
2. 最小修改 `AppLoading.vue` 后确认聚焦契约 GREEN。
|
||
3. 在当前 412×915 Chrome G01 加载态检查：
|
||
- `prefers-reduced-motion: reduce` 为真；
|
||
- 印牌和如意结仍存在运行中的动画；
|
||
- 不同时间点透明度确实变化；
|
||
- `transform` 保持 `none`；
|
||
- 页面仍是 G01 加载态，无错误态或列表内容串入。
|
||
4. 捕获并人工检查当前加载态截图；截图只能证明布局和静态帧，动画是否运行必须以运行时多时点证据为准。
|
||
5. 运行 G01 加载态、公共 AppLoading 及直接受影响的加载组件契约，再执行 `git diff --check`。
|
||
6. H5 证据仅为内部候选；Android/HBuilderX 动画与性能仍未验证，不得宣称最终完成。
|
||
|
||
## 通过标准
|
||
|
||
- 用户能在当前系统的减少动态效果模式下明确感知加载仍在继续。
|
||
- 动画没有缩放、旋转或位移，且不会造成明显闪烁。
|
||
- 当前页面结构、文案和其他状态不发生无关变化。
|
||
- 用户重新审核 G01 加载态并明确说“通过”后，才继续展示失败态；G01 整页在全部状态通过前仍保持 `[!]`。
|