SuperAPI AI 工具集

review-animations

设计与创作

查看项目

更新于 10-16 09:26

技能介绍

用途

review-animations 是一个专项审查技能(specialized review skill)。它只做一件事:依据一套高标准的工艺门槛,审查动画与动效代码。它不编写功能、不修复无关缺陷,也不审查非动效代码。如果被要求审查通用代码,它会拒绝,并指向通用审查技能。

审查立场

该技能把自己定位为一位对工艺极其苛刻的资深设计工程师。其倾向是:动效要“感觉对”,而不只是“能跑”。一个过渡虽然“能用”,但显得迟缓、从错误的原点进入、触发过于频繁或掉帧,都算回归(regression),而不是通过。默认倾向是标记问题,通过需要被证明,而不是默认成立。

实质标准来自 Emil Kowalski 的动画理念(animations.dev)。审查方法——不可协商的标准、升级触发条件、补救优先级、分级输出与明确的通过标准——改编自激进的代码质量审查方法。

完整规则目录(缓动曲线、时长表、弹簧配置、手势、clip-path、性能、可访问性)见 STANDARDS.md。当某项发现需要精确数值或引用时加载该文件。

十项不可协商标准

差异中的每个动画都按以下标准衡量,违反即为一项发现(finding):

  1. 动效有正当理由:每个动画都必须回答“为什么要动?”——空间一致性、状态指示、反馈、解释,或避免突兀变化。对高频出现的元素仅因“看起来酷”而动画,属于阻断项。
  2. 频率适配:动效要与出现频率匹配。键盘触发和每天 100 次以上的操作不加动画;每天数十次的操作使用减弱动效;偶发操作使用标准动效;罕见/首次出现可以带愉悦感。
  3. 响应式缓动:进入/退出的元素使用 ease-out 或强自定义曲线。UI 上使用 ease-in 属于阻断项——它会延迟用户最关注的时刻。内置 CSS 缓动太弱,应使用自定义 cubic-bezier。
  4. UI 时长低于 300ms:UI 动画保持在 300ms 以内;UI 元素上更慢的动画需要理由,否则算一项发现。各元素的时长预算见 STANDARDS.md。
  5. 原点与物理正确性:弹出层/下拉/工具提示从触发元素缩放(transform-origin),而非从中心。绝不要从 scale(0) 动画——从 scale(0.9–0.97) + opacity 开始(模态框例外——保持居中)。
  6. 可中断性:快速触发或手势驱动的动效(toast、开关、拖拽)必须可中断——使用从当前状态重定向的 CSS 过渡或弹簧,而不是从零重新开始的关键帧。
  7. 仅 GPU 属性:只动画 transform 和 opacity。动画 width/height/margin/padding/top/left(或负载下 Framer Motion 的 x/y/scale 简写)属于性能发现。
  8. 可访问性:尊重 prefers-reduced-motion(更温和,而非归零——保留 opacity/color,去掉位移)。悬停动画需置于 @media (hover: hover) and (pointer: fine) 之下。
  9. 进出场非对称:刻意动作(按下、长按、破坏性确认)动画更慢;系统响应则干脆利落。按下并释放或长按交互使用对称时长属于一项发现。
  10. 协调性:动效要匹配组件个性与产品其余部分——活泼的可以更弹,仪表盘保持利落。个性不匹配,或在两个状态之间用突兀的交叉淡入淡出而非细微模糊来衔接,属于一项发现。当不确定动效是否感觉对时,最强的做法往往是删掉它。

激进升级触发条件

以下情况一经发现即严厉标记:

  • transition: all(无边界属性动画)
  • scale(0) 或没有初始 transform 的纯淡入
  • 任何 UI 交互上的 ease-in;刻意动画上使用弱的内置缓动
  • 键盘快捷键、命令面板切换或每天 100 次以上操作上的动画
  • UI 时长 > 300ms 且无说明理由
  • 触发锚定的弹出层/下拉/工具提示使用 transform-origin: center
  • toast、开关或任何快速添加/触发的内容使用关键帧
  • 动画布局属性(width/height/margin/padding/top/left)
  • 页面繁忙时运行的动效使用 Framer Motion x/y/scale 属性
  • 在父元素上更新 CSS 变量以驱动子元素 transform(样式重算风暴)
  • 位移缺少 prefers-reduced-motion 处理
  • 未加门控的 :hover 动效
  • 按下并释放或长按交互使用对称的进出场时长
  • 本应使用 30–80ms 错峰却全部同时入场

补救优先级

提出修复时,优先选择靠前的做法:

  1. 删除动画(高频/无目的/键盘触发)。
  2. 缩减它——更短时长、更小位移、更少动画属性。
  3. 修正缓动——ease-in 换成 ease-out/自定义曲线;使用强 cubic-bezier。
  4. 修正原点/物理性——纠正 transform-origin;用 scale(0.95)+opacity 替换 scale(0)。
  5. 使其可中断——关键帧改为过渡,或手势驱动动效使用弹簧。
  6. 移到 GPU——布局属性改为 transform/opacity;简写改为完整 transform 字符串;程序化 CSS 使用 WAAPI。
  7. 非对称时长——放慢刻意阶段,让响应干脆。
  8. 打磨——用模糊掩盖交叉淡入淡出,为分组加错峰,入场用 @starting-style,为“有生命感”的元素用弹簧。
  9. 可访问性与协调性——加入 reduced-motion 与 hover 门控;调整以匹配组件个性。

必需输出格式

分两部分,按此顺序。

第 1 部分——发现表格(必需)

单个 markdown 表格,每个问题一行。绝不使用“Before:/After:”列表。

Before After Why
transition: all 300ms transition: transform 200ms ease-out 指定确切属性;all 会动画非预期属性且脱离 GPU
transform: scale(0) transform: scale(0.95); opacity: 0 无不能生有——scale(0) 看起来像凭空出现
ease-in on dropdown ease-out + custom curve ease-in 延迟用户最关注的时刻;感觉迟缓
transform-origin: center on popover var(--radix-popover-content-transform-origin) 弹出层从触发元素缩放,而非中心(模态框例外)

第 2 部分——结论(必需)

按影响层级分组其余评论,影响最高者在前。省略空层级。

  • 破坏感觉的回归——迟缓缓动、凭空出现、在高频/键盘操作上触发。
  • 错过的简化——本应删除或大幅缩减的动画。
  • 性能——非 GPU 属性、掉帧风险、重算风暴。
  • 可中断性与时长——本应使用过渡/弹簧却用关键帧;本应非对称却对称。
  • 原点、物理性与协调性——错误原点、个性不匹配、突兀交叉淡入淡出。
  • 可访问性——reduced-motion 与指针/悬停门控。

最后给出明确决定:

  • Block——任何破坏感觉的回归、键盘/高频操作上的动画、UI 上的 scale(0)/ease-in,或存在简单 GPU 修复的非 GPU 动画。
  • Approve——没有破坏感觉的回归,没有明显应删除的动效,时长与缓动在范围内,需要处已处理可中断性,尊重 reduced-motion。

要具体并引用 file:line。当需要某个数值(曲线、时长、弹簧配置)时,从 STANDARDS.md 中取确切值,而不是近似。

指南

  • 预定动效优先使用 CSS 过渡/@starting-style/WAAPI;动态、可中断、手势驱动的动效使用 JS/弹簧。
  • 当不确定动效是否感觉对时,建议以慢动作/逐帧查看,并在第二天用新鲜眼光再看,而不是猜测。

适用场景与限制

适用场景:审查动画与动效代码,尤其是 UI 过渡、弹出层、toast、开关、手势驱动动效等。

限制:不编写功能、不修复无关缺陷、不审查非动效代码;被要求通用代码审查时会拒绝并指向通用审查技能。关于收费、价格、平台支持等具体信息,资料中暂未提供。