txyzznc 分析功能并战略性地添加动画和微交互，以增强用户理解、提供反馈并带来愉悦感。
必备准备工作
收集上下文信息（请首先完成）
如果没有必要的上下文信息，你无法出色完成工作，比如目标受众（关键信息）、预期使用场景（关键信息）、品牌个性/风格（活泼 vs 严肃，活力四射 vs 沉稳）以及性能限制。
尝试从当前对话线程或代码库中收集这些信息。
- 如果你没有找到确切的信息，必须从现有设计和功能中推断，那么你必须停止工作并{{ask_instruction}}确认你的推断是否正确。
- 否则，如果你无法完全推断出来，或者你的置信度为中等或更低，你必须先{{ask_instruction}}提出澄清问题，以完善你的上下文信息。
在得到答案之前不要继续推进。猜测会导致不合适或过度的动画效果。
评估动画应用机会
分析哪些场景下添加动效可以提升体验：
识别静态区域：
- 缺少反馈：没有视觉确认的操作（按钮点击、表单提交等）
- 生硬的过渡：瞬间的状态变化显得突兀（显示/隐藏、页面加载、路由切换）
- 不清晰的关联关系：空间或层级关系不明确的区域
- 缺乏愉悦感：功能完整但交互毫无乐趣
- 缺少引导：可以引导注意力或解释交互逻辑的场景
理解上下文信息：
- 品牌风格是什么？（活泼 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流畅运行：目标设备上无卡顿
- 感觉自然：缓动曲线有机自然，而非机械生硬
- 时长合适：不会太快（生硬）或太慢（延迟）
- 简化动效正常工作：动画已被禁用或适当简化
- 不阻碍交互：用户可在动画期间/之后进行交互
- 带来价值：让界面更清晰或更愉悦
记住：动效应增强理解并提供反馈，而不仅仅是装饰。要有目的地添加动画，尊重性能限制，并始终考虑无障碍访问。优秀的动画是无形的——它只是让一切感觉恰到好处。