当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript动画系统：缓动函数与帧率控制

JavaScript动画系统：缓动函数与帧率控制

2026-05-27 14:10:20 0浏览收藏

缓动函数：让动画更自然

缓动函数（Easing Function）定义了动画在时间轴上的变化速率。它控制元素从起点到终点的运动节奏，比如先快后慢、先加速再减速等。没有缓动的线性动画会显得生硬，而合理的缓动能极大提升用户体验。

常见的缓动类型包括：

linear：匀速运动，每帧位移相同
ease-in：开始慢，逐渐加快
ease-out：开始快，结束前变慢
ease-in-out：中间快，两头慢

这些效果可通过数学函数实现。例如，一个简单的二次缓动函数如下：

function easeInQuad(t, b, c, d) {
return c * (t /= d) * t + b;
}

其中t是当前经过的时间，b是起始值，c是变化总量，d是总持续时间。这类函数广泛应用于自定义动画库中。

使用requestAnimationFrame进行帧率控制

相比传统定时器，requestAnimationFrame（简称rAF）是浏览器专为动画设计的API。它会在下一次重绘前调用回调函数，并自动适配屏幕刷新率（通常60Hz），从而避免过度绘制和撕裂现象。

rAF的优势包括：

浏览器在标签页不可见时会暂停调用，节省资源
系统可根据负载动态调整调用频率以保持流畅
与CSS动画和滚动事件同步，减少冲突

基本用法如下：

function animate(currentTime) {
  // 计算已过去的时间
  const elapsed = currentTime - startTime;
  // 更新元素位置
  element.style.left = easeInQuad(elapsed, 0, 100, duration) + 'px';
  // 继续下一帧
  if (elapsed     requestAnimationFrame(animate);
  }
}
const startTime = performance.now();
requestAnimationFrame(animate);