01

动画基础认知 分类·指标

移动端动画分类 · 60fps与120fps差异

02

CSS过渡动画 transition

属性详解 · 触发条件 · 贝塞尔曲线调优

03

CSS关键帧动画 @keyframes

animation属性 · 填充模式

04

JavaScript动画基础 rAF

requestAnimationFrame · 帧率控制

05

Canvas 2D动画 绘图上下文

基本图形 · 逐帧动画实现

06

Canvas 粒子系统 粒子类

粒子生命周期 · 性能优化策略

07

SVG动画基础 SMIL+CSS

路径动画 · CSS驱动SVG

08

WebGL入门 着色器

三角形绘制 · 矩阵变换

09

Three.js基础 场景·相机

几何体与材质 · 渲染器

10

Three.js动画循环 旋转·缩放

位置插值 · 物体变换

11

GSAP实战 TweenMax

TimelineMax · 缓动函数 · 编排

12

Lottie动画 AE导出

Lottie-web集成 · 交互控制

13

手势动画 touch事件

手势识别 · 惯性滑动模拟

14

滚动驱动动画 Intersection

滚动进度映射 · 视差效果

15

物理引擎基础 速度·加速度

摩擦力 · 弹性碰撞

16

弹簧动画 胡克定律

阻尼系数 · 临界阻尼调参

17

贝塞尔曲线进阶 三次贝塞尔

路径插值 · 曲线拟合

18

动画状态机 状态定义

状态转换 · 有限状态机实现

19

动画队列与链式调用 Promise

队列管理 · 取消与重试

20

性能优化 图层合成

will-change · GPU加速 · 避免重排

21

动画调试工具 DevTools

动画面板 · 帧率监控

22

响应式动画 媒体查询

视口单位 · 动态缩放

23

无障碍动画 prefers-reduced

动画降级方案

24

React动画 react-transition

Framer Motion基础

25

Vue动画 transition组件

transition-group · JS钩子

26

小程序动画 wx.create

CSS动画在小程序中的限制

27

Flutter动画 AnimationController

Tween · 隐式动画组件

28

原生iOS动画 UIView

CAAnimation · Core Animation

29

原生Android动画 属性动画

View动画 · 动画监听器

30

动画设计原则 缓动·分层

引导视线 · 品牌一致性