SuperAPI AI 工具集

animate

设计与创作

查看项目

更新于 10-15 21:46

技能介绍

用途:审查现有功能,并在合适位置有策略地添加动画与微交互,让状态变化更易理解、操作有反馈、体验更愉悦。适用于已有功能需要补强反馈、过渡、引导与惊喜感的场景。

主要能力:

  1. 机会评估:识别缺少反馈的操作、生硬的状态切换、不清晰的空间层级关系、缺乏愉悦感及错失引导的位置,并结合产品性格、性能预算、受众与重点确定策略。
  2. 动画策略:划分英雄时刻、反馈层、过渡层与愉悦层,强调一个精心编排的高光体验优于到处散落动画。
  3. 实现类别:覆盖入场动画(错峰揭示、滚动触发、弹窗进出)、微交互(按钮悬停/点击/加载、表单聚焦与校验、开关、勾选、点赞)、状态过渡(显示隐藏、展开收起、加载态、成功失败、启用禁用)、导航与流转(页面切换、标签、轮播、滚动效果)、反馈与引导(悬停提示、拖放、复制粘贴、焦点流)与愉悦时刻(空状态、完成庆祝、彩蛋、情境动画)。
  4. 技术规范:给出按用途的时长建议(100-150ms 即时反馈、200-300ms 状态变化、300-500ms 布局变化、500-800ms 入场),推荐缓动曲线(如 cubic-bezier(0.25, 1, 0.5, 1) 等),指出应避免 bounce 与 elastic 曲线;退出动画约为入场时长的 75%;简单动画优先 CSS 过渡与 keyframes,复杂交互用 Web Animations API、Framer Motion 或 GSAP;仅使用 transform 与 opacity 以利用 GPU 加速,谨慎使用 will-change,关注 60fps。
  5. 无障碍:始终尊重 prefers-reduced-motion 并提供非动画替代;示例媒体查询将动画与过渡时长压缩至 0.01ms 并限制迭代次数。

必要用法与前置:必须先调用 /impeccable,其中包含设计原则、反模式与上下文收集协议;若尚无设计上下文,必须先运行 /impeccable teach。同时需收集性能约束。若代码库无法明确产品性格、性能预算、受众与重点,应停止并使用 AskUserQuestion 工具澄清。

禁止事项:不使用 bounce/elastic 曲线;不动画化布局属性(width、height、top、left),改用 transform;反馈类不使用超过 500ms 的时长;不为无目的的动画而动画;不忽略 prefers-reduced-motion;不全面动画化以免造成动画疲劳;除非有意为之,否则动画期间不应阻塞交互。

质量验证:需在目标设备上确认 60fps 无卡顿、缓动自然、时长合适、减少动效模式生效、不阻塞交互且确实带来清晰度或愉悦感。

限制:资料未提供具体平台支持范围、定价、安装命令或独立运行方式;实际执行依赖 /impeccable 环境与设计上下文。