动画与交互（Animation & Interaction）MOC
前端动画与交互效果开发，包括 GSAP、CSS 动画、Web Animations API 等。
学习路径：动画与交互是高级应用阶段的内容，需要掌握 HTML、CSS、JavaScript 基础。动画性能优化与 性能优化 密切相关。
📚 核心主题
- GSAP 完整教程 — GSAP 动画库完整指南（需要掌握 JavaScript 和 DOM 操作）
- CSS 动画进阶 — CSS 动画高级技巧（配合 CSS 基础 使用）
- Web Animations API — 原生 Web Animations API（需要了解 JavaScript）
🎯 动画技术栈
JavaScript 动画库
- GSAP：功能强大的专业动画库（详见 GSAP 教程）
- Anime.js：轻量级动画库
- Framer Motion：React 动画库
- Lottie：JSON 动画库
CSS 动画
- CSS Transitions
- CSS Keyframes
- CSS 动画性能优化
原生 API
- Web Animations API
- Intersection Observer API（用于滚动动画）
- RequestAnimationFrame
📝 学习建议
- 前置知识：需要掌握 HTML、CSS、JavaScript 基础，特别是 DOM 操作 和 事件机制
- 学习顺序：基础 → CSS 动画 → JavaScript 动画库 → 高级交互效果
- 性能优化：动画性能与 性能优化 密切相关，需要关注：
- 60fps 动画性能
- GPU 加速
- 重排重绘优化
- 动画性能监控
- 实践应用：动画与交互需要结合用户体验设计，考虑可访问性和性能