js如何实现数字滚动效果数字动态增长动画实现-js教程-PHP中文网

js如何实现数字滚动效果数字动态增长动画实现

穿越時空

发布： 2025-06-20 20:48:02

原创

836人浏览过

数字滚动效果的核心实现方式是使用javascript，主要有三种方法：1. 使用requestanimationframe结合数学计算，性能好且控制灵活；2. 利用css transitions/animations实现简单效果；3. 使用第三方库如countup.js，方便但依赖外部资源。推荐第一种方法，通过animatenumber函数在指定时间内平滑更新数字值，结合缓动函数（如easeoutquad）提升自然度，并可通过调整动画时长、数字格式和颜色优化观感。处理精度问题可采用先放大再缩小的四舍五入方法或使用第三方库。性能优化包括减少dom操作、使用requestanimationframe、避免不必要的重绘、应用will-change属性以及必要时引入节流机制。

js如何实现数字滚动效果数字动态增长动画实现

数字滚动效果，本质上就是在一段时间内，平滑地改变数字的显示值，给人一种动态增长的动画感。实现方式有很多，但核心都是利用JavaScript来控制数字的变化。

解决方案

实现数字滚动效果，主要有几种方法，各有优劣。我个人比较喜欢用requestAnimationFrame结合简单的数学计算来实现，性能好，控制灵活。

requestAnimationFrame + 数学计算

这是我推荐的方式。requestAnimationFrame 保证动画流畅，数学计算控制数字变化。

function animateNumber(elementId, start, end, duration) {
  const element = document.getElementById(elementId);
  const startTime = performance.now();

  function updateNumber(currentTime) {
    const elapsedTime = currentTime - startTime;
    const progress = Math.min(elapsedTime / duration, 1); // 确保 progress 不超过 1
    const value = start + (end - start) * progress;

    element.textContent = Math.floor(value); // 或者 toFixed(2) 显示小数

    if (progress < 1) {
      requestAnimationFrame(updateNumber);
    }
  }

  requestAnimationFrame(updateNumber);
}

// 使用示例
animateNumber('myNumber', 0, 12345, 2000); // 2秒内从0滚动到12345

登录后复制

这种方式的优点在于：

性能好：requestAnimationFrame由浏览器优化，避免不必要的重绘。
控制灵活：可以自定义动画时长、起始值、结束值，甚至可以加入缓动函数，让数字变化更加自然。
简单易懂：代码量少，逻辑清晰，方便维护和修改。

缺点：

需要自己编写动画逻辑，稍微麻烦一点。

CSS Transitions/Animations

可以用CSS实现简单的数字滚动效果，但需要一些技巧。比如，可以利用transform: translateY()，将数字排列成一列，然后通过改变translateY的值来模拟滚动。

这种方式的优点在于：
- 简单：不需要编写JavaScript代码。
- 性能好：由浏览器优化。
缺点：
- 不够灵活：难以控制数字变化的细节，比如缓动函数。
- 实现复杂：需要排列数字，实现起来比较麻烦。
使用第三方库

有很多JavaScript库可以实现数字滚动效果，比如countUp.js。

这种方式的优点在于：
- 方便：只需要几行代码就可以实现复杂的数字滚动效果。
缺点：
- 依赖第三方库：增加项目体积，可能存在兼容性问题。
- 不够灵活：可能无法满足所有需求。

我个人更倾向于第一种方式，因为它在性能、灵活性和可维护性之间取得了很好的平衡。

如何让数字滚动效果更自然？

数字滚动效果的自然程度，很大程度上取决于缓动函数。线性变化（progress）显得比较生硬，可以考虑使用缓动函数，让数字变化更加平滑。

常见的缓动函数有：

easeInQuad：加速
easeOutQuad：减速
easeInOutQuad：先加速后减速

可以将缓动函数应用到progress上，让数字变化更加自然。

function easeOutQuad(t) {
  return t * (2 - t);
}

function animateNumber(elementId, start, end, duration) {
  // ...
  const progress = easeOutQuad(Math.min(elapsedTime / duration, 1));
  // ...
}

登录后复制

除了缓动函数，还可以考虑以下因素：

动画时长：过短或过长都会影响观感。
数字格式：添加千分位分隔符、货币符号等。
数字颜色：根据背景色调整数字颜色，确保清晰可见。

如何处理数字滚动过程中的精度问题？

在使用toFixed()显示小数时，可能会遇到精度问题。例如，1.005.toFixed(2)可能会返回1.00而不是1.01。

解决方法：

先放大再缩小：将数字乘以一个较大的倍数，四舍五入后再缩小。

function round(number, precision) {
  const factor = Math.pow(10, precision);
  return Math.round(number * factor) / factor;
}

const value = round(1.005, 2); // 1.01

登录后复制