🎬 前端动画实战
30 章 · 从入门到综合
01
动画基础与CSS过渡
理解CSS transition属性，掌握过渡触发条件与性能优化，实现平滑状态变化。
02
CSS关键帧动画
深入@keyframes规则，掌握animation系列属性，制作循环与非线性动画。
03
2D变换与3D变换
熟练使用transform进行平移、旋转、缩放、倾斜，理解3D空间与透视原理。
04
JavaScript动画基础
使用requestAnimationFrame驱动动画，对比setInterval，实现帧率控制。
05
贝塞尔曲线与缓动函数
理解cubic-bezier原理，自定义缓动效果，掌握常见缓动模式。
06
Web Animations API
使用Element.animate()方法，掌握关键帧与时间线控制，实现声明式JS动画。
07
Canvas 2D动画
从零绘制图形，使用Canvas API实现粒子系统与帧动画。
08
SVG动画基础
使用SMIL与CSS驱动SVG元素，实现路径动画与描边效果。
09
GSAP基础入门
掌握TweenMax/TweenLite核心API，实现时间线与时间轴控制。
10
GSAP高级技巧
使用TimelineLite管理复杂序列，实现stagger与回调函数。
11
滚动驱动动画
使用Intersection Observer与ScrollTrigger，实现视差滚动与进入视口动画。
12
鼠标交互动画
监听mousemove/mouseenter事件，实现跟随、悬停与拖拽动画效果。
13
触摸与手势动画
处理touch事件，实现滑动、缩放与旋转手势的动画反馈。
14
性能优化与帧率监控
使用Chrome Performance面板，分析重排重绘，优化动画性能。
15
will-change与硬件加速
理解GPU加速原理，合理使用will-change与transform3D。
16
动画库对比与选型
对比Anime.js、Mo.js、Lottie、Framer Motion等库的适用场景。
17
Lottie动画实战
导出与集成After Effects动画，控制播放、暂停与循环。
18
Three.js入门与3D动画
搭建基础场景，使用OrbitControls实现3D交互。
19
粒子系统与特效
使用Canvas或Three.js构建烟花、星空、雨雪等粒子特效。
20
路径动画与运动曲线
使用SVG path与JS计算，实现物体沿复杂路径运动。
21
交互动画状态机
使用有限状态机管理动画状态，实现复杂交互逻辑。
22
响应式动画设计
根据屏幕尺寸与设备性能，动态调整动画参数与复杂度。
23
无障碍动画
遵循prefers-reduced-motion，为运动敏感用户提供替代方案。
24
动画与路由切换
结合Vue/React路由，实现页面过渡与元素进出动画。
25
微交互动效设计
按钮反馈、加载指示器、表单验证等小细节的动画实现。
26
数据可视化动画
使用D3.js或ECharts，为图表添加入场与更新动画。
27
WebGL与Shader基础
理解顶点着色器与片元着色器，实现简单的GPU动画。
28
动画调试与工具链
使用Chrome Animations面板、GSAP DevTools等工具。
29
动画设计原则与心理学
理解缓动、节奏、预期与反馈在用户体验中的作用。
30
综合实战：品牌展示页面
构建完整品牌展示页，融合多种动画技术与交互设计。