关于 animate
animate 是 ui-craft 的动画子技能，面向为界面添加或修正动效的开发者。它通过决策流程、动效时长预算和强度设置指导实现，并要求直接编辑代码。
主要功能
- 01先按决策流程筛选动效
- 02依据项目技术栈选择动画方案
- 03按元素类型设定时长预算
- 04控制多阶段动画的错开间隔
- 05遵循动效强度与减少动效设置
适用场景
- 01为界面元素添加或修正动画
- 02统一弹窗、面板和页面转场时长
- 03按项目技术栈实现动效并尊重减少动效偏好
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/animate确认已加载。
详细介绍
**上下文：**此子技能是更全面的 ui-craft 技能的一个视角。如果也安装了 ui-craft 技能，请先阅读其 SKILL.md，完成 Discovery + Anti-Slop + Craft Test，然后应用以下特定视角。
在 $ARGUMENTS 中添加或修复动画。加载 ui-craft 技能。
步骤 1 — 决策阶梯：先运行 references/motion.md 中的决策阶梯。未通过的动画应直接移除，而非改进。
步骤 2 — 选择库：
- 如果用户在 Discovery 阶段选择了技术栈 → 阅读
references/stack.md。使用对应章节（Motion、GSAP 或 Three.js）。同一属性上绝不能混用库。 - 否则 → 仅使用 CSS transitions /
@keyframes/animation-timeline: view()。
步骤 3 — 遵循动效预算：
| 元素 | 预算 |
|---|---|
| 颜色/透明度 | 100-150ms |
| 小型 UI（工具提示、下拉菜单） | 150-200ms |
| 中型 UI（模态框、面板） | 200-300ms |
| 大型 UI（页面过渡、抽屉） | 300-400ms |
退出动画时长约为进入动画的 75%（时长更短，使用相同的 ease-out——或使用更平缓的尾段，例如 cubic-bezier(0.4, 0, 1, 1)，让退出更柔和）。UI 上绝不使用 ease-in（参见 references/motion.md）。cubic-bezier(0.22, 1, 0.36, 1) 是安全的弹簧效果默认值。
步骤 4 — 多阶段序列 → 阅读 ../examples/animation-storyboard.md。交错延迟设为 30-80ms，而不是 200ms。
步骤 5 — 遵循参数设置：
MOTION_INTENSITY ≤ 3→ 仅使用悬停状态，不添加进入动画或滚动触发动画。MOTION_INTENSITY 4-7→ 使用标准进入动画和悬停效果，每个区块最多添加一个滚动显现效果。MOTION_INTENSITY 8+→ 可使用滚动联动、页面过渡、磁性光标（仍须遵循减少动态效果的设置）。
输出：直接编辑代码。每个文件编辑完成后，打印 Review Format 表格。标出移除的动画及其原因。
下一步：/polish — 优化刚添加动效周边的细节（第 1 阶段）。
评论
支持 Markdown