animate

分析一项功能，并策略性地添加动画和微交互，以增进理解、提供反馈并带来愉悦体验。

必须完成的准备工作

调用 /impeccable — 其中包含设计原则、反模式和上下文收集流程。继续之前，请遵循该流程——如果尚无设计上下文，必须先运行 /impeccable teach。此外，还要收集：性能限制。

---

评估动画机会

分析哪些地方可以通过动效改善体验：

1. 找出静态区域：

   • 缺少反馈：操作没有视觉确认（例如点击按钮、提交表单等）
   • 生硬的过渡：状态瞬间变化，显得突兀（例如显示／隐藏、页面加载、路由切换）
   • 关系不明确：空间或层级关系不够直观
   • 缺少愉悦感：交互虽实用，却缺乏趣味
   • 缺少引导：有机会引导注意力或说明行为

2. 了解上下文：

   • 产品的个性是什么？（活泼还是严肃、充满活力还是平静）
   • 性能预算是多少？（优先适配移动端？页面复杂吗？）
   • 受众是谁？（对动效敏感的用户？希望操作快速的高级用户？）
   • 什么最重要？（一个主视觉动画，还是许多微交互？）

如果无法从代码库中确定上述任何信息，请直接询问用户，澄清你无法推断的内容。

至关重要：尊重 prefers-reduced-motion。始终为需要减少动效的用户提供非动画替代方案。

制定动画策略

制定有明确目的的动画方案：

• 主视觉时刻：标志性的动画是什么？（页面加载？主视觉区域？关键交互？）
• 反馈层：哪些交互需要给予确认？
• 过渡层：哪些状态变化需要平滑处理？
• 愉悦层：哪些地方可以带来惊喜和愉悦？

重要：精心编排的一套完整体验，胜过四处零散的动画。聚焦于影响最大的时刻。

实现动画

按以下类别系统地添加动效：

入场动画

• 页面加载编排：依次显示元素（延迟 100-150ms），结合淡入与滑动效果
• 主视觉区域：让主要内容以醒目方式入场（缩放、视差或创意效果）
• 内容显现：使用交叉观察器触发滚动动画
• 模态框／抽屉入场：平滑滑动并淡入，背景淡入，并管理焦点

微交互

• 按钮反馈：
  • 悬停：轻微放大（1.02-1.05）、颜色变化、阴影增强
  • 点击：快速先缩小再恢复（0.95 → 1），并添加涟漪效果
  • 加载：显示旋转指示器或脉冲状态
• 表单交互：
  • 输入框聚焦：边框颜色过渡，并轻微缩放或发光
  • 验证：错误时抖动，成功时显示勾号，颜色平滑过渡
• 切换开关：平滑滑动并过渡颜色（200-300ms）
• 复选框／单选框：勾号动画、涟漪效果
• 点赞／收藏：缩放并旋转、粒子效果、颜色过渡

状态过渡

• 显示／隐藏：淡入并滑动，而非瞬间切换；使用合适的时长（200-300ms）
• 展开／折叠：处理溢出的同时过渡高度，并旋转图标
• 加载状态：骨架屏淡入、旋转指示器动画、进度条
• 成功／错误：颜色过渡、图标动画、轻柔的缩放脉冲
• 启用／禁用：透明度过渡、光标变化

导航与流程

• 页面过渡：路由之间交叉淡入淡出、共享元素过渡
• 标签切换：滑动指示器、内容淡入／滑动
• 轮播／滑块：平滑变换、吸附点、惯性效果
• 滚动效果：视差层、状态变化式粘性页眉、滚动进度指示器

反馈与引导

• 悬停提示：工具提示淡入、光标变化、元素高亮
• 拖放：抬起效果（阴影 + 缩放）、放置区域高亮、平滑移动
• 复制/粘贴：粘贴时短暂闪烁高亮，显示“已复制”确认提示
• 焦点流：高亮表单或工作流中的路径

惊喜时刻

• 空状态：插图上微妙的悬浮动画
• 完成操作：彩纸屑、勾选标记的华丽动画、成功庆祝效果
• 隐藏彩蛋：等待用户探索的隐藏交互
• 情境动画：天气效果、一天中不同时段的主题、季节元素

技术实现

为每种动画采用恰当的技术：

时长与缓动

按用途设置时长：

• 100-150ms：即时反馈（按钮按下、切换开关）
• 200-300ms：状态变化（悬停、菜单打开）
• 300-500ms：布局变化（折叠面板、模态框）
• 500-800ms：进入动画（页面加载）

缓动曲线（使用这些，不要使用 CSS 默认值）：

/* Recommended - natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */

/* AVOID - feel dated and tacky */
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */

退出动画应比进入动画更快。 时长约为进入动画的 75%。

CSS 动画

/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)

JavaScript 动画

/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences

性能

• GPU 加速：使用 transform 和 opacity，避免使用布局属性
• will-change：仅对已知的高开销动画谨慎添加
• 减少绘制：尽量减少重绘，适当使用 contain
• 监控 FPS：确保目标设备达到 60fps

无障碍

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

切勿：

• 使用弹跳或弹性缓动曲线——它们显得过时，还会让人注意到动画本身
• 为布局属性设置动画（width、height、top、left）——改用 transform
• 将反馈动画的时长设为 500ms 以上——会显得迟滞
• 进行没有目的的动画——每个动画都需要有理由
• 忽略 prefers-reduced-motion——这违反无障碍要求
• 为所有内容添加动画——动画疲劳会让界面令人厌倦
• 在动画期间阻止交互，除非这是有意为之

验证质量

全面测试动画：

• 在 60fps 下流畅运行：目标设备上没有卡顿
• 感觉自然：缓动曲线自然流畅，而非机械生硬
• 时机恰当：不宜太快（令人不适）或太慢（显得迟滞）
• 减少动态效果模式有效：动画应适当禁用或简化
• 不阻碍操作：用户可以在动画期间或之后进行交互
• 提升体验：让界面更清晰或更有趣

请记住：动态效果应帮助用户理解并提供反馈，而不只是装饰。动画要有目的，遵守性能限制，并始终考虑无障碍需求。出色的动画不会引人注意——它只是让一切感觉恰到好处。