动效
春雨润物，细节有声。动效让状态变化可被理解，让品牌气息被感知；它不负责制造热闹。
在同一内容上感受四档强度
切换等级，再重播一次。内容、层级与空间都不变，只有动作的必要程度发生变化。
一次变化，只说明一件事
先让结果清楚，再让到达结果的过程自然。删掉动作以后，如果信息完全没有损失，它就不该存在。
- 反馈
- 操作已被接收，状态立即回应。
- 连续
- 前后关系清楚，不让版面突然跳变。
- 品牌
- 文心 · 万形
当前为 E9-1 春雨：有限入场帮助读者理解编排。
四档强度不是四种装饰
强度是页面级声明，写在 <html> 的 data-motion 属性上，而不是让每个组件各自决定。
| 等级 | 名称 | 边界 | 典型场景 |
|---|---|---|---|
E8 | 印刷静止 | 完全无动效 | 印刷品、PDF |
E9-0 | 静水 | 仅保留必要状态反馈 | 报告、强调静读的文档 |
E9-1 | 春雨（默认） | 有限入场、悬停与状态过渡 | 网页、文章、本站 |
E9-2 | 微澜 | 额外允许一处品牌呼吸 | 品牌焦点时刻 |
<html data-motion="E9-1">
<body>…</body>
</html>时长与缓动
| Token | 值 | 用途 |
|---|---|---|
--duration-instant | 80ms | 颜色变化 |
--duration-fast | 180ms | 悬停、焦点 |
--duration-base | 260ms | 浮层进出 |
--duration-slow | 420ms | 有限入场 |
--duration-crawl | 600ms | 单次总封顶 |
--ease-default | cubic-bezier(.25,.1,.25,1) | 通用 |
--ease-out | cubic-bezier(0,0,.2,1) | 到达 |
--ease-in-out | cubic-bezier(.42,0,.58,1) | 仅限品牌呼吸 |
编排只用 --stagger-1 到 --stagger-8，每步 60ms。超过八个元素仍要逐项出现，通常说明内容分组本身需要重做。
减少动效仍然保留结果
prefers-reduced-motion: reduce 会把空间运动和装饰循环压到近零时长，焦点、选中、成功与错误等信息状态仍然可见。上方的“预览减少动效”只作用于实验场，方便不改系统设置就核对这条路径。
动效禁令
- 旋转等待、弹跳、回弹、果冻、橡皮筋——与"温和流动"相悖
- 循环 / 闪烁动效（品牌标识除外）——持续争夺阅读注意力
- 单次位移 > 16px、时长 > 600ms——动作开始压过内容
- 视差滚动、滚动驱动的大面积运动
- 减少动效下仍保留装饰动画
- 用动画掩盖信息结构不清——动效不是结构问题的解药
没有加载动画，怎么表示“正在加载”
用文字。“正在导出…”比一个转圈提供更多信息。骨架屏和不确定进度条也不回来：闪烁的 shimmer 与无限循环仍然在制造等待感，而不是解释进展。
完成信号
本站加载 animations-complete.js。全部有限动效落定后，<html> 的 data-animations-complete 会变为 true，供截图、导出和自动化判断页面是否稳定。
品牌呼吸是无限循环，不阻塞完成信号；延迟触发的自定义动效需要主动登记：
window.__wxMotion.hold(myPromise);