animate

name	animate
description	评审功能并通过有目的性的动画、微交互和动效来优化它，提升易用性并带来愉悦体验。
args	[{"name":"target","description":"The feature or component to animate (optional)","required":false}]
user-invokable	true
tags	frontend-animation, micro-interactions, motion-design, accessibility, performance-optimization
tags_cn	前端动画, 微交互实现, 动效设计, 无障碍访问, 性能优化

分析功能并战略性地添加动画和微交互，以增强用户理解、提供反馈并带来愉悦感。

必备准备工作

收集上下文信息（请首先完成）

如果没有必要的上下文信息，你无法出色完成工作，比如目标受众（关键信息）、预期使用场景（关键信息）、品牌个性/风格（活泼 vs 严肃，活力四射 vs 沉稳）以及性能限制。

尝试从当前对话线程或代码库中收集这些信息。

1. 如果你没有找到确切的信息，必须从现有设计和功能中推断，那么你必须停止工作并{{ask_instruction}}确认你的推断是否正确。
2. 否则，如果你无法完全推断出来，或者你的置信度为中等或更低，你必须先{{ask_instruction}}提出澄清问题，以完善你的上下文信息。

在得到答案之前不要继续推进。猜测会导致不合适或过度的动画效果。

---

评估动画应用机会

分析哪些场景下添加动效可以提升体验：

1. 识别静态区域：

   • 缺少反馈：没有视觉确认的操作（按钮点击、表单提交等）
   • 生硬的过渡：瞬间的状态变化显得突兀（显示/隐藏、页面加载、路由切换）
   • 不清晰的关联关系：空间或层级关系不明确的区域
   • 缺乏愉悦感：功能完整但交互毫无乐趣
   • 缺少引导：可以引导注意力或解释交互逻辑的场景

2. 理解上下文信息：

   • 品牌风格是什么？（活泼 vs 严肃，活力四射 vs 沉稳）
   • 性能预算是多少？（移动端优先？复杂页面？）
   • 目标受众是谁？（对动敏感的用户？追求速度的高级用户？）
   • 最核心的需求是什么？（一个主打动画 vs 多个微交互？）

如果从代码库中无法明确以上任何一点，请{{ask_instruction}}

关键提示：请尊重prefers-reduced-motion设置。始终为有需求的用户提供无动画替代方案。

制定动画策略

制定有目的性的动画方案：

• 核心亮点时刻：哪一个是标志性动画？（页面加载？核心区域？关键交互？）
• 反馈层：哪些交互需要视觉确认？
• 过渡层：哪些状态变化需要平滑过渡？
• 愉悦层：哪些场景可以带来惊喜和愉悦感？

重要提示：一个精心编排的体验胜过零散分布的多个动画。专注于高影响力的场景。

实现动画效果

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

入场动画

• 页面加载编排：元素依次显示（100-150ms延迟），淡入+滑动组合效果
• 核心区域：主要内容的醒目入场效果（缩放、视差或创意效果）
• 内容展示：使用Intersection Observer实现滚动触发的动画
• 模态框/侧边栏入场：平滑的滑动+淡入效果，背景淡入，焦点管理

微交互

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

状态过渡

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

导航与流程

• 页面过渡：路由间淡入淡出、共享元素过渡
• 标签切换：滑动指示器、内容淡入/滑动
• 轮播/滑块：平滑变换、对齐点、动量效果
• 滚动效果：视差图层、状态变化的粘性头部、滚动进度指示器

反馈与引导

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

愉悦时刻

• 空状态：插图的轻微浮动动画
• 完成操作：彩屑效果、对勾装饰、成功庆祝动画
• 复活节彩蛋：供用户探索的隐藏交互
• 上下文动画：天气效果、时段主题、季节性元素

技术实现

为每个动画选择合适的技术：

时长与缓动

按用途划分的时长：

• 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 Animations

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

JavaScript Animation

/* 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流畅运行：目标设备上无卡顿
• 感觉自然：缓动曲线有机自然，而非机械生硬
• 时长合适：不会太快（生硬）或太慢（延迟）
• 简化动效正常工作：动画已被禁用或适当简化
• 不阻碍交互：用户可在动画期间/之后进行交互
• 带来价值：让界面更清晰或更愉悦

记住：动效应增强理解并提供反馈，而不仅仅是装饰。要有目的地添加动画，尊重性能限制，并始终考虑无障碍访问。优秀的动画是无形的——它只是让一切感觉恰到好处。