用途:这是一个专项评审技能,只做一件事——按高工艺标准审查动画与动效代码。它不写功能、不修无关缺陷、不评审非动效代码;若被要求评审通用代码,应拒绝并指向通用评审技能。
主要能力:以“资深设计工程师”姿态评审,偏向“感觉对”而非“能跑”。默认标记问题,通过需被证明。实质标准来自 Emil Kowalski 的动画理念(animations.dev),评审方法(不可协商标准、升级触发、补救层级、分级输出、明确通过条件)借鉴激进代码质量评审。完整规则目录(缓动曲线、时长表、弹簧配置、手势、clip-path、性能、无障碍)见 STANDARDS.md,需要精确数值或引用时加载。
十条不可协商标准:动效须有理由(空间一致性、状态指示、反馈、解释或避免突兀变化);频率适配(键盘触发与每日 100+ 次操作不加动画,每日数十次减弱,偶发用标准,罕见/首次可带惊喜);响应式缓动(进入/退出用 ease-out 或强自定义曲线,UI 上 ease-in 属阻断,内置 CSS 缓动过弱,应用自定义 cubic-bezier);UI 动画低于 300ms;起点与物理正确(弹出层从触发点缩放,不用 scale(0),从 scale(0.9–0.97)+opacity 起,模态框例外保持居中);可中断(频繁触发或手势驱动动效须可中断,用过渡或弹簧而非从零重启的关键帧);仅 GPU 属性(只动 transform 与 opacity);无障碍(尊重 prefers-reduced-motion,减弱而非归零;hover 动效需 @media (hover: hover) and (pointer: fine) 门控);进入/退出非对称(刻意动作慢、系统响应快);一致性(动效匹配组件性格与产品整体)。
升级触发(见到即硬标记):transition: all;scale(0) 或纯淡入无初始变换;UI 交互上的 ease-in;键盘快捷键/命令面板/高频操作上的动画;无理由的 >300ms UI 时长;触发锚定弹出层的 transform-origin: center;toast/开关等快速触发元素上的关键帧;动画布局属性;页面繁忙时 Framer Motion 的 x/y/scale;父级 CSS 变量驱动子级 transform;缺少 reduced-motion 处理;未门控的 :hover 动效;按压释放或长按交互的对称进出时长;本应 30–80ms 错开的“全部同时”入场。
补救优先级:删除 → 缩减 → 修缓动 → 修起点/物理 → 改为可中断 → 移到 GPU → 非对称计时 → 打磨 → 无障碍与一致性。
输出格式:第一部分为发现表格(Before/After/Why,每行一个问题);第二部分为裁决,按影响层级分组(破坏手感、可简化、性能、可中断性与计时、起点物理与一致性、无障碍),最后给出明确决定:Block 或 Approve。需具体并引用 file:line,需要数值时从 STANDARDS.md 取精确值。
限制:仅评审动效代码;不提供功能实现或无关修复;具体曲线、时长、弹簧配置等数值需查阅 STANDARDS.md,资料未提供其内容。