SuperAPI AI 工具集

animate

前端与建站

查看项目

更新于 10-16 07:07

技能介绍

用途

animate 用于在现有技术栈中实现被请求的 UI 动效或过渡。它的定位是“构建动效”,而不是发现动效机会、审计界面或审查代码差异。

主要能力

  • 在既有代码库中实现指定的动画或过渡。
  • 先确定动效的目的与使用场景;当动画会拖慢高频操作或分散对功能性内容的注意力时,无动效或更细微的反馈方案是有效选择。
  • 尊重明确请求的行为,同时保持可访问性与响应式;说明取舍,而不是悄悄替换为更小的功能。
  • 仅键盘触发并不排除提供有用且非阻塞的反馈。

使用方式

工作流程如下:

  1. 检查组件、交互状态、现有动效令牌以及已安装库的版本。
  2. 选择最简单的合适机制:简单状态变化可用 CSS 过渡/@starting-style;程序化浏览器动画可用 WAAPI;手势、布局、退出或弹簧行为可用项目自带的动效库。
  3. 根据组件与产品匹配时长、缓动、距离和原点,而不是把表格数值当作定律。在实际可行时,优先采用响应式入场、连贯的空间路径和对合成器友好的属性。
  4. 让快速重定向或手势驱动的动效可中断。当所选库支持时,保留当前位置与速度。
  5. 包含合适的 prefers-reduced-motion 替代方案。将仅悬停效果限制在支持悬停的指针设备上,并保留键盘/触摸语义。
  6. 实现并运行聚焦检查。在浏览器工具可用时检查渲染后的交互;测试重复触发与中断,而不仅是理想路径。
  7. 仅当 RECIPES.md 中列出的配方与任务匹配时才使用它。将其适配到代码库,并对照已安装库验证 API;不要为无关动效加载它。
  8. 报告实现、聚焦验证以及仍待完成的设备相关或手感相关检查。当最佳结果是即时状态变化时,不要人为制造动效。

适用场景

  • 被明确要求为某个 UI 组件或交互添加动画或过渡。
  • 需要在现有技术栈内实现动效,并兼顾可访问性与响应式。
  • 需要处理手势驱动、可中断或快速重定向的动效。

限制

  • 不用于发现动效机会、审计界面或审查代码差异。
  • 关于收费、价格、平台支持范围等具体信息,资料中暂未提供。