如何审查动画变更
来源:review-animations/SKILL.md 与 STANDARDS.md。它审查变更中的 motion,不承担一般代码审查,也不自动实施修改。原文采取严格审查姿态;实际 findings 仍必须有上下文和证据。
12.1 十个检查维度
-
用途明确:能解释运动增加什么信息。
-
频率合适:高频输入不被动画拖住。
-
曲线合适:响应及时,停止合理,不机械套内置曲线或自定义曲线。
-
时长合适:结合幅度、距离和曲线,超过常规预算有理由。
-
空间与尺度:原点贴近触发,按压/hover 幅度合适。
-
可中断:重触发从当前表现继续,直接操控不滞后。
-
性能:属性、驱动线程、布局与图层有证据。
-
无障碍:reduce、焦点、触摸、命中范围和媒体行为。
-
非对称时间:确认过程与取消反馈各有合理节奏。
-
整体一致:组件像一个对象,来去关系与品牌一致。
12.2 高风险信号不是自动判错
原文要求见到 transition:all、scale(0)、ease-in、键盘动画、>300ms、默认原点、动态 UI keyframes、布局属性、父级继承变量、过强 hover、重入场、重 blur 等立即重点检查。
这些是检索信号。需要确认:该规则是否真的作用于交互、是否引发当前问题、是否已有记录的设计取舍。模态居中、计时器 linear、营销长动画、有意品牌回弹都可能合理。已知例外应写入报告,而非机械套表。
12.3 调整优先级
先删不必要动画→减小幅度/时长/同时运动数量→调曲线→修原点与空间关系→修中断→减少渲染工作→再做淡化双影、错峰等精修。无障碍与功能正确性不是最后才处理,而是贯穿所有步骤的验收条件。
12.4 证据要求
引用真实 file:line 和当前代码,描述具体触发、用户可见结果、为何是本次变更造成。Feel 仅靠代码不能判断时明确缺少运行证据,不发明实测。数值从项目 token 或原标准查,不能凭空编一个“高级曲线”。
原文将问题分为:体验回归、可删减项、性能、中断时序、原点/物理/一致性、无障碍。按实际影响排序,避免一百条风格意见淹没一个会卡住操作的问题。
12.5 固定输出格式
| Before | After | Why |
|---|---|---|
| Hover 位移作用在外层命中节点 | 位移放内层,外层保持稳定 | 指针靠近底边时可能反复失去 hover |
| 面板关闭时 Presence 也被条件移除 | 保留 Presence,仅移除其子项 | 退出生命周期才能完成 |
| 同时修改高度与测量同一节点 | 测量自然内层,动画外层 | 避免测量被自身动画反馈约束 |
表格后按影响补充必要说明,再给明确结论:阻止合入/通过。原文的 Block/Approve 是审查结论,不是实际执行 merge 的授权。
12.6 验收不能只看一次
完整播放、半途反向、连续触发、首屏、退出、焦点恢复、reduce、低性能环境、真实手机。布局/共享元素还要看圆角、文字拉伸、滚动后的测量和匹配身份。
Skill 的实现方式
固定标准→升级信号→修复偏好顺序→证据要求→强制输出格式→明确 verdict。这个结构提高一致性,但原标准中的绝对表述需要工程判断修正,不能把“默认挑错”变成捏造缺陷。
自测与答案
-
看到 height 动画就应 Block?先确认实际影响、必要布局语义和性能。
-
原文说内置 easing 太弱,能仅凭使用 ease-out 报 bug?不能,需要场景与可见问题。
-
没有问题也必须凑表格吗?不必,明确范围和没有发现可操作问题即可。
来自作者已整理的 Skills 中文自学资料。数字和配方是调试起点,库与浏览器的行为需结合实际版本验证;教材中的原演示验收记录不等同于你的项目已通过测试。
技术校正与版本边界 ↗完整来源说明 ↗