SuperAPI AI 工具集

review-animations

设计与创作

查看项目

更新于 10-15 21:47

技能介绍

用途:这是一个专项评审技能,只做一件事——按高工艺标准审查动画与动效代码。它不写功能、不修无关缺陷、不评审非动效代码;若被要求评审通用代码,应拒绝并指向通用评审技能。

主要能力:以“资深设计工程师”姿态评审,偏向“感觉对”而非“能跑”。默认标记问题,通过需被证明。实质标准来自 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;不对称计时;打磨(模糊遮罩交叉淡入、分组错开、@starting-style、弹簧);无障碍与一致性。

输出格式:第一部分为发现表格(必填),单张 markdown 表,每行一个问题,列为 Before/After/Why,不用“Before:/After:”列表。第二部分为裁决(必填),按影响层级从高到低分组:破坏手感的回归、错过的简化、性能、可中断性与计时、起点物理性与一致性、无障碍;以明确决定收尾:Block(存在破坏手感的回归、键盘/高频操作动画、UI 上 scale(0)/ease-in,或易修的非 GPU 动画)或 Approve(无破坏手感回归、无应删动效、时长与缓动在界内、必要处可中断、尊重 reduced-motion)。需具体并引用 file:line;需要数值时从 STANDARDS.md 取精确值。

指南:预定动效优先 CSS transitions/@starting-style/WAAPI,动态、可中断、手势驱动动效用 JS/弹簧;不确定手感时建议慢放/逐帧及隔日再看,而非猜测。

限制:仅评审动效代码;不提供功能实现或无关修复;具体数值依赖 STANDARDS.md,资料未提供其内容。