review-animations / 中文方法笔记

如何审查动画变更

整理于 2026.10.23 · 8 个小节

来源:review-animations/SKILL.md 与 STANDARDS.md。它审查变更中的 motion,不承担一般代码审查,也不自动实施修改。原文采取严格审查姿态;实际 findings 仍必须有上下文和证据。

12.1 十个检查维度

  1. 用途明确:能解释运动增加什么信息。

  2. 频率合适:高频输入不被动画拖住。

  3. 曲线合适:响应及时,停止合理,不机械套内置曲线或自定义曲线。

  4. 时长合适:结合幅度、距离和曲线,超过常规预算有理由。

  5. 空间与尺度:原点贴近触发,按压/hover 幅度合适。

  6. 可中断:重触发从当前表现继续,直接操控不滞后。

  7. 性能:属性、驱动线程、布局与图层有证据。

  8. 无障碍:reduce、焦点、触摸、命中范围和媒体行为。

  9. 非对称时间:确认过程与取消反馈各有合理节奏。

  10. 整体一致:组件像一个对象,来去关系与品牌一致。

12.2 高风险信号不是自动判错

原文要求见到 transition:all、scale(0)、ease-in、键盘动画、>300ms、默认原点、动态 UI keyframes、布局属性、父级继承变量、过强 hover、重入场、重 blur 等立即重点检查。

这些是检索信号。需要确认:该规则是否真的作用于交互、是否引发当前问题、是否已有记录的设计取舍。模态居中、计时器 linear、营销长动画、有意品牌回弹都可能合理。已知例外应写入报告,而非机械套表。

12.3 调整优先级

先删不必要动画→减小幅度/时长/同时运动数量→调曲线→修原点与空间关系→修中断→减少渲染工作→再做淡化双影、错峰等精修。无障碍与功能正确性不是最后才处理,而是贯穿所有步骤的验收条件。

12.4 证据要求

引用真实 file:line 和当前代码,描述具体触发、用户可见结果、为何是本次变更造成。Feel 仅靠代码不能判断时明确缺少运行证据,不发明实测。数值从项目 token 或原标准查,不能凭空编一个“高级曲线”。

原文将问题分为:体验回归、可删减项、性能、中断时序、原点/物理/一致性、无障碍。按实际影响排序,避免一百条风格意见淹没一个会卡住操作的问题。

12.5 固定输出格式

BeforeAfterWhy
Hover 位移作用在外层命中节点位移放内层,外层保持稳定指针靠近底边时可能反复失去 hover
面板关闭时 Presence 也被条件移除保留 Presence,仅移除其子项退出生命周期才能完成
同时修改高度与测量同一节点测量自然内层,动画外层避免测量被自身动画反馈约束

表格后按影响补充必要说明,再给明确结论:阻止合入/通过。原文的 Block/Approve 是审查结论,不是实际执行 merge 的授权。

12.6 验收不能只看一次

完整播放、半途反向、连续触发、首屏、退出、焦点恢复、reduce、低性能环境、真实手机。布局/共享元素还要看圆角、文字拉伸、滚动后的测量和匹配身份。

Skill 的实现方式

固定标准→升级信号→修复偏好顺序→证据要求→强制输出格式→明确 verdict。这个结构提高一致性,但原标准中的绝对表述需要工程判断修正,不能把“默认挑错”变成捏造缺陷。

自测与答案

  1. 看到 height 动画就应 Block?先确认实际影响、必要布局语义和性能。

  2. 原文说内置 easing 太弱,能仅凭使用 ease-out 报 bug?不能,需要场景与可见问题。

  3. 没有问题也必须凑表格吗?不必,明确范围和没有发现可操作问题即可。

关于这份笔记

来自作者已整理的 Skills 中文自学资料。数字和配方是调试起点,库与浏览器的行为需结合实际版本验证;教材中的原演示验收记录不等同于你的项目已通过测试。

技术校正与版本边界 ↗完整来源说明 ↗
继续下一篇全局审计与可执行改进计划