# Animate

> 评审功能并通过有目的性的动画、微交互和动效来优化它，提升易用性并带来愉悦体验。

- Skill: `txyzznc/animate` (Agent Skill)
- Install (CLI): `npx skillmds@latest add txyzznc/animate`
- Raw SKILL.md: https://api.skillmd.com/api/skills/txyzznc/animate/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: txyzznc (https://skillmd.com/u/txyzznc)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/txyzznc/animate

---


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

## 必备准备工作

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

如果没有必要的上下文信息，你无法出色完成工作，比如目标受众（关键信息）、预期使用场景（关键信息）、品牌个性/风格（活泼 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默认值）：**
```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
```css
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)
```

### JavaScript Animation
```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

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

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