SuperAPI AI 工具集

motion

设计与创作

查看项目

更新于 10-16 08:41

技能介绍

用途:motion 是一个动画相关技能,用于在审查动效质量、添加动画与过渡、增加悬停效果、让界面更有活力,或处理动画卡顿与过渡不流畅时使用。它按意图分为三种模式,只加载对应的参考文件。

主要能力与模式:audit 模式审查现有动画代码质量,按 12 条原则输出 file:line 形式的发现,参考 references/audit-12-principles.md;add 模式为功能添加新动画、微交互与动效设计,参考 references/add-motion.md;fix 模式处理动画卡顿、过渡不流畅,并对 CSS/JS 动效做性能审查,参考 references/fix-performance.md。

使用方式:调用命令为 /motion audit <files>、/motion add [target]、/motion fix [file]。单独使用 /motion fix 会把性能约束应用到当前对话中的所有 UI 动画工作。若未给出模式,则根据请求推断:review/check 对应 audit,add/enhance 对应 add,jank/slow/stutter 对应 fix。

模式边界:各模式的数值规则仅在该模式内生效,且有意不一致。交错动画方面,audit 对现有代码要求每项不超过 50ms,add 建议页面加载编排使用 100-150ms 延迟;若新增动效之后需通过审查,应优先采用 audit 上限。反馈时长方面,audit 判定用户触发的动画超过 300ms 为不合格,add 允许布局变化使用 300-500ms;交互反馈以 audit 数值为准。弹簧与缓动方面,audit 规定用弹簧实现过冲回稳,add 禁止弹跳/弹性缓动曲线;两者并不矛盾:可用弹簧,但不用 bounce/elastic 的 cubic-bezier。

硬性规则(所有模式):动效只使用 transform 与 opacity,绝不动画化布局属性(width、height、top、left);will-change 要少用且临时使用,不可长期保留;除非明确要求,不迁移或重写动画库;尊重项目既定的动效策略,若用户或项目规则要求动画保持醒目可见,则不要添加 prefers-reduced-motion 保护或弱化动效,若要求无障碍优先则相反;若未声明策略且改动较大,应先询问。

限制:资料未提供该技能的安装方式、依赖、收费、支持平台与具体效果数据。