SuperAPI AI 工具集

animate

设计与创作

查看项目

更新于 10-15 22:41

技能介绍

animate 是一个面向功能审查与动效增强的技能,用途是在已有功能中策略性地加入动画与微交互,以增强理解、提供反馈并营造愉悦感。

主要能力:识别缺少反馈、突兀过渡、关系不清、缺乏愉悦感和引导缺失的静态区域;评估产品个性、性能预算、受众与重点;制定动画策略,包括一个标志性主场景、反馈层、过渡层与愉悦层;系统化实现入场动画、微交互、状态过渡、导航与流程、反馈与引导以及惊喜时刻。

使用方式:必须先调用 $impeccable,其中包含设计原则、反模式与上下文收集协议;若尚无设计上下文,必须先运行 $impeccable teach。此外需收集性能约束。若无法从代码库推断个性、性能预算、受众或重点,应直接向用户询问。

技术要点:按用途选择时长(100-150ms 即时反馈、200-300ms 状态变化、300-500ms 布局变化、500-800ms 入场),使用推荐的缓动曲线(如 cubic-bezier(0.25,1,0.5,1) 等),避免 bounce 与 elastic;优先使用 transform 与 opacity 实现 GPU 加速;简单动画用 CSS,复杂交互用 Web Animations API、Framer Motion 或 GSAP;退出动画约为入场时长的 75%。

限制与要求:必须尊重 prefers-reduced-motion,提供非动画替代方案;不要动画布局属性;反馈动画不超过 500ms;不要无目的地动画;不要动画一切;除非有意,否则不要在动画期间阻塞交互。完成后需验证 60fps 流畅度、自然感、时长、减少动效支持、不阻塞交互以及是否增加价值。

资料未提供具体安装命令、收费信息或平台支持细节。