处理小数数值时计数动画卡顿问题求助

我之前也碰到过一模一样的问题，原函数的设计逻辑更适配整数数值的动画场景，一旦处理小数，几个核心环节就会触发卡顿：

• 原函数靠duration / range计算每步的时间间隔，但如果range是极小的小数（比如从0.1到0.5，range仅为0.4），这个计算结果会变得异常大，再加上Math.max(stepTime, minTimer)的限制，会导致动画的步进间隔过长，看起来像卡顿跳变。
• 依赖固定间隔定时器（比如setInterval）本身就容易受浏览器主线程阻塞影响，不如用浏览器原生的动画API更可靠。

下面是适配小数场景的优化版本，流畅度拉满：

function animateValue(id, start, end, duration, decimalPlaces = 2) {
  const obj = document.getElementById(id);
  const startTime = performance.now(); // 比Date.getTime()精度更高的时间戳

  function update(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1); // 确保进度不超过100%

    // 用线性插值计算当前值，保留计算精度
    const value = start + (end - start) * progress;
    // 控制显示的小数位数，避免过长小数串导致的视觉闪烁
    obj.textContent = value.toFixed(decimalPlaces);

    if (progress < 1) {
      requestAnimationFrame(update); // 与浏览器刷新频率同步，实现流畅动画
    }
  }

  requestAnimationFrame(update);
}

关键改动说明： #

• 替换为requestAnimationFrame：这是浏览器专为动画优化的API，会和页面刷新节奏同步，彻底避免定时器的延迟卡顿问题。
• 基于时间进度计算数值：不再依赖数值范围拆分步骤，而是根据已流逝时间占总时长的比例计算当前值，不管是整数还是小数，都能平滑过渡。
• 可配置的小数位数：通过decimalPlaces参数控制显示的小数位数，既避免页面出现过长小数，又保留了计算时的精度。
• 使用performance.now()：提供更高精度的时间戳，让动画的时间计算更准确。

调用示例（从0.2动画到3.8，时长2秒，保留2位小数）：

animateValue('target-element', 0.2, 3.8, 2000, 2);

如果需要非线性动画效果（比如缓入缓出），还可以给进度加个缓动函数：

// 加入缓入缓出效果
const progress = Math.min(elapsed / duration, 1);
const easedProgress = progress < 0.5 
  ? 2 * progress * progress 
  : 1 - Math.pow(-2 * progress + 2, 2) / 2;
const value = start + (end - start) * easedProgress;

内容的提问来源于stack exchange，提问作者Schotsl