JavaScript动画引擎通过requestAnimationFrame实现时间驱动，利用性能时间计算动画进度，结合缓动函数对属性进行插值更新，支持队列控制与链式调用，优化DOM操作以提升性能。
JavaScript动画引擎的核心在于控制元素在一段时间内的视觉变化，比如位置、大小、透明度等。它不依赖CSS transition 或 animation，而是通过 JavaScript 主动计算每一帧的状态，并更新 DOM 或 Canvas 等渲染目标。实现一个基础的动画引擎并不复杂，关键在于理解时间驱动和状态插值的机制。
时间驱动：requestAnimationFrame
现代 JavaScript 动画引擎依赖 requestAnimationFrame (rAF) 实现流畅的帧更新。rAF 会告诉浏览器你希望执行动画，让浏览器在下一次重绘前调用指定函数。它通常每秒执行 60 次（约 16.7ms/帧），与屏幕刷新率同步，避免卡顿或撕裂。
动画引擎利用 rAF 循环持续计算当前时间相对于动画开始的时间差，判断动画是否进行中、已完成或需回调结束事件。
示例逻辑：- 记录动画起始时间（performance.now()）
- 在 rAF 回调中计算已流逝时间
- 根据持续时间和缓动函数计算当前进度（0 到 1）
- 更新目标属性值
- 若未结束，继续调用 rAF；否则触发完成回调
属性插值与缓动函数
动画的本质是“从 A 变到 B”。JavaScript 引擎需要对数值型属性（如 left: 0px → 100px）进行插值计算。插值公式通常是：
立即学习“Java免费学习笔记（深入）”；
currentValue = startValue + (endValue - startValue) * progress其中 progress 是经过缓动函数处理的时间比例。缓动函数（easing function）决定了动画的速度曲线，例如 ease-in、ease-out、cubic-bezier 等。
常见缓动函数如：
- linear：progress 不变
- easeOutQuad：progress = 1 - (1 - t)^2
- bezier 曲线：通过控制点模拟 CSS 的 cubic-bezier()
高级引擎支持多种数据类型插值，如颜色（#ff0000 → #00ff00）、transform 矩阵、甚至路径运动。
动画队列与链式控制
实际应用中，动画常需组合执行：并行（同时动）、串行（一个接一个）、延迟、重复等。动画引擎通过管理动画实例的生命周期实现这些功能。
核心结构通常包括：
- Animation 类：封装目标元素、属性、起止值、持续时间、缓动、回调
- Timeline 时间轴：协调多个动画的开始时间与顺序
- Promise 接口：支持 then、catch 处理完成状态
例如，可以实现 .then() 方法让下一个动画在前一个结束后自动启动。
性能优化与注意事项
频繁操作 DOM 会影响性能，因此引擎应尽量减少重排（reflow）和重绘（repaint）。建议：
- 使用 transform 和 opacity，它们由合成器处理，性能更高
- 批量更新样式，避免在循环中读取 layout 属性
- 提供暂停、恢复、销毁接口，防止内存泄漏
- 支持 cancel() 中断动画，释放 rAF 引用
一些成熟引擎如 GSAP 还实现了虚拟渲染、插件扩展、精确时间控制等高级特性。
基本上就这些。一个轻量级 JS 动画引擎可以通过几百行代码实现核心功能，关键是掌握 rAF 循环、时间进度计算和属性插值。理解这些原理后，使用或定制动画库都会更加得心应手。
