JavaScript 动画核心原理与 Tween 缓动算法实现

Hazel

发布时间：2026-10-13| 3人浏览过

原创

JavaScript 动画的核心在于高频更新 DOM 属性以产生视觉连续感。本文深入剖析如何使用 requestAnimationFrame 同步浏览器渲染周期以避免卡顿，并通过封装运动函数与应用多种 Tween 缓动算法（如 ease-in、ease-out），实现从匀速到复杂加速度的动画效果，帮助开发者理解 JS 驱动动画的底层逻辑。

为什么选择 requestAnimationFrame？

在浏览器中制造动画的本质是高频改变 DOM 元素的样式属性。早期常使用 setInterval 或 setTimeout 来控制帧率，但这种方式存在明显的性能隐患。

浏览器的渲染机制通常将一周期内的所有 DOM 操作整合后统一渲染，这个周期大约为 16.7ms（对应 60fps）。如果脚本执行时间与渲染周期不同步，会导致掉帧或资源浪费。此外，setTimeout 的定时器回调在实际运行中会有延迟，无法保证精确的帧率。

requestAnimationFrame (rAF) API 提供了更可靠的解决方案。它通知浏览器在下一次重绘前执行指定回调，时机与屏幕刷新率同步，从而确保动画流畅且不损耗性能。该特性在现代浏览器及 IE10+ 中均得到支持。

封装基础动画框架

为了兼容旧版浏览器，通常需要对 requestAnimationFrame 进行封装，降级处理为 setTimeout：

window.requestAnimFrame = (function(){
 return window.requestAnimationFrame    ||
     window.webkitRequestAnimationFrame ||
     window.mozRequestAnimationFrame  ||
     function( callback ){
      window.setTimeout(callback, 1000 / 60);
     };
})();

编写可复用的动画函数

rAF 解决了“何时执行”的问题，而“如何执行”则需要设计良好的运动方程。一个标准的 JS 动画函数应包含以下核心要素：

起点与终点：确定初始状态和目标状态。
持续时间 (duration)：控制动画节奏。
进度变量 (p)：计算从 0 到 1 的变化比例。

以下是一个小球从左向右匀速运动的示例。关键在于利用 Date.now() 计算当前已消耗的时间比例：

var ele = document.getElementById("block");
var start = Date.now(); // 获取动画开始时间
var during = 1000;      // 动画时长 1000ms
var p = 0;              // 动画完成度 0~1

requestAnimationFrame(function f(){
 if(p >= 1) {
   ele.style.left = "800px"; // 到达终点
   return;
 }
 // 计算当前进度比例
 p = (Date.now() - start) / during;
 // 执行位移：起点100px + 移动距离(700 * 当前进度)
 ele.style.left = 100 + 700 * p + "px";
 requestAnimationFrame(f); // 请求下一帧
})

引入 Tween 算法实现缓动效果

上述代码实现了匀速运动。若要实现更具表现力的“先慢后快”或“先快后慢”效果，只需修改计算位置的公式，即应用 Tween (补间) 算法。

我们可以针对进度变量 p 套用不同的数学公式：

2次方缓动 (Ease-In/Out)：p*p（加速）或 -p*(p-2)（减速）
3次方缓动：p*p*p
正弦曲线：Math.sin(p * Math.PI / 2)
指数曲线：Math.pow(2, 10 * (p - 1))
超范围三次方：p*p*(2.70158*p - 1.70158)（常用于带有回弹效果的动画）

操作示例：若想实现向左蓄力再弹出的效果，可将原代码中的线性计算公式替换为超范围三次方算法：
ele.style.left = 100 + 700 * (p*p*(2.70158*p - 1.70158)) + "px";

总结与应用建议

掌握 Tween 算法后，JS 动画可以实现的不再局限于位置移动，还能通过渐变属性实现透明度变化（类似 jQuery 的 fadeOut）、高度滑动（slideDown）以及基于三角函数的周期性运动（如圆周运动）。

在实际开发中需权衡方案选择：

CSS3 动画：若目标环境支持现代浏览器，优先使用 CSS3 的 animation 或 transition 属性。它们具备 GPU 加速能力，性能更优且代码更简洁。
JavaScript 动画：适用于需要复杂逻辑控制（如多属性联动的物理模拟）或必须兼容低版本老旧浏览器的场景。

以上就是 JavaScript 动画核心原理与 Tween 缓动算法的详细解读，更多关于前端交互优化的资料请关注本站其它相关文章！