jiapuapp/docs/superpowers/specs/2026-07-19-app-loading-essential-motion-design.md

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 整页在全部状态通过前仍保持 [!]。