用途
animate 用于在现有技术栈中实现被请求的 UI 动效或过渡。它的定位是“构建动效”,而不是发现动效机会、审计界面或审查代码差异。
主要能力
- 在既有代码库中实现指定的动画或过渡。
- 先确定动效的目的与使用场景;当动画会拖慢高频操作或分散对功能性内容的注意力时,无动效或更细微的反馈方案是有效选择。
- 尊重明确请求的行为,同时保持可访问性与响应式;说明取舍,而不是悄悄替换为更小的功能。
- 仅键盘触发并不排除提供有用且非阻塞的反馈。
使用方式
工作流程如下:
- 检查组件、交互状态、现有动效令牌以及已安装库的版本。
- 选择最简单的合适机制:简单状态变化可用 CSS 过渡/@starting-style;程序化浏览器动画可用 WAAPI;手势、布局、退出或弹簧行为可用项目自带的动效库。
- 根据组件与产品匹配时长、缓动、距离和原点,而不是把表格数值当作定律。在实际可行时,优先采用响应式入场、连贯的空间路径和对合成器友好的属性。
- 让快速重定向或手势驱动的动效可中断。当所选库支持时,保留当前位置与速度。
- 包含合适的 prefers-reduced-motion 替代方案。将仅悬停效果限制在支持悬停的指针设备上,并保留键盘/触摸语义。
- 实现并运行聚焦检查。在浏览器工具可用时检查渲染后的交互;测试重复触发与中断,而不仅是理想路径。
- 仅当 RECIPES.md 中列出的配方与任务匹配时才使用它。将其适配到代码库,并对照已安装库验证 API;不要为无关动效加载它。
- 报告实现、聚焦验证以及仍待完成的设备相关或手感相关检查。当最佳结果是即时状态变化时,不要人为制造动效。
适用场景
- 被明确要求为某个 UI 组件或交互添加动画或过渡。
- 需要在现有技术栈内实现动效,并兼顾可访问性与响应式。
- 需要处理手势驱动、可中断或快速重定向的动效。
限制
- 不用于发现动效机会、审计界面或审查代码差异。
- 关于收费、价格、平台支持范围等具体信息,资料中暂未提供。