JavaScript动画原理与进阶

📘 30章 · 从入门到架构
01 动画基础
  • JS动画概述
  • requestAnimationFrame原理
  • 性能优化基础
开始学习
02 定时器动画
  • setTimeout vs setInterval
  • 优缺点
  • 实际应用场景
开始学习
03 requestAnimationFrame详解
  • 浏览器渲染机制
  • 帧率控制
  • 与定时器性能差异
开始学习
04 动画循环设计
  • 游戏循环模式
  • 状态管理
  • delta time计算
开始学习
05 缓动函数基础
  • 线性运动
  • 缓入缓出
  • 贝塞尔曲线原理
开始学习
06 自定义缓动函数
  • 构建缓动函数库
  • 数学公式解析
  • 实际应用
开始学习
07 CSS动画与JS动画对比
  • CSS transition/animation
  • JS动画优势
  • 何时选择哪种方案
开始学习
08 DOM动画操作
  • 获取元素位置
  • 修改样式
  • 批量操作优化
开始学习
09 Canvas动画入门
  • Canvas基础
  • 绘制图形
  • 动画循环
开始学习
10 Canvas高级动画
  • 粒子系统
  • 碰撞检测
  • 性能调优
开始学习
11 SVG动画
  • SMIL动画
  • JS控制SVG
  • 路径动画
开始学习
12 Web Animations API
  • Element.animate()
  • 关键帧与选项
  • 控制播放
开始学习
13 动画性能监控
  • FPS监控
  • 帧率分析工具
  • Chrome Performance面板
开始学习
14 GPU加速与硬件加速
  • CSS 3D变换
  • will-change属性
  • 合成层优化
开始学习
15 动画防抖与节流
  • 滚动动画优化
  • resize事件处理
  • 高频触发场景
开始学习
16 路径动画
  • 贝塞尔曲线路径
  • Catmull-Rom曲线
  • 路径插值
开始学习
17 物理引擎基础
  • 速度与加速度
  • 重力模拟
  • 弹性与摩擦力
开始学习
18 碰撞检测与响应
  • AABB碰撞
  • 圆形碰撞
  • 碰撞后运动模拟
开始学习
19 骨骼动画原理
  • 层级变换矩阵
  • 正向运动学
  • 简单实现
开始学习
20 补间动画库原理
  • Tween.js核心思想
  • 补间队列
  • 链式调用
开始学习
21 动画状态机
  • 状态模式
  • 状态转换
  • 复杂动画控制
开始学习
22 时间线动画
  • 时间线控制
  • 多动画同步
  • 时间缩放
开始学习
23 手势与动画
  • 触摸事件
  • 拖拽动画
  • 惯性滑动
开始学习
24 滚动驱动动画
  • Intersection Observer
  • 滚动进度映射
  • 视差效果
开始学习
25 WebGL动画入门
  • Three.js基础
  • 3D变换
  • 简单3D动画
开始学习
26 Shader动画基础
  • GLSL入门
  • 顶点着色器
  • 片元着色器
开始学习
27 动画调试技巧
  • 断点调试
  • 可视化辅助工具
  • 日志策略
开始学习
28 动画设计模式
  • 工厂模式
  • 观察者模式
  • 策略模式在动画中应用
开始学习
29 无障碍动画
  • prefers-reduced-motion
  • 动画暂停
  • 替代方案
开始学习
30 综合实战
  • 构建完整动画框架
  • 项目架构
  • 发布与优化
开始学习
📢 ： ｜