如何利用 JavaScript 实现一个简单的数字动画或过渡效果？-js教程-PHP中文网

如何利用 JavaScript 实现一个简单的数字动画或过渡效果？

紅蓮之龍

发布： 2025-10-03 18:38:03

原创

651人浏览过

使用requestAnimationFrame实现数字动画效果更流畅，通过时间差计算进度并结合缓动函数，使数字从初始值平滑增长至目标值，适用于数据看板等场景。

如何利用 javascript 实现一个简单的数字动画或过渡效果？

实现数字动画或过渡效果，常用的方式是让一个数字从起始值平滑地变化到目标值。JavaScript 可以通过定时器控制数值的逐步更新，并将结果渲染到页面上。下面介绍一种简单而实用的方法。

使用 setInterval 实现数字递增动画

核心思路是：设定一个目标值，然后在一定时间内分步更新显示的数字，使其看起来像是“动态增长”。

示例：将页面上的数字从 0 动画到 1000，耗时 2 秒。

const element = document.getElementById('number');
const target = 1000;
const duration = 2000; // 毫秒
const stepTime = 20; // 每步间隔
const totalSteps = duration / stepTime;
let currentStep = 0;
const increment = target / totalSteps;
<p>const timer = setInterval(() => {
currentStep++;
let currentValue = Math.min(Math.round(increment * currentStep), target);
element.textContent = currentValue;</p><p>if (currentValue === target) {
clearInterval(timer);
}
}, stepTime);</p>

登录后复制

使用 requestAnimationFrame 实现更流畅的动画

相比 setInterval，requestAnimationFrame 更适合动画，因为它与屏幕刷新率同步，更流畅且节省性能。

立即学习“Java免费学习笔记（深入）”；

改写上面的例子：

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

const element = document.getElementById('number');
const target = 1000;
const duration = 2000;
let start = null;
<p>function animateNumber(timestamp) {
if (!start) start = timestamp;
const progress = timestamp - start;
const percent = Math.min(progress / duration, 1);
const value = Math.round(target * percent);
element.textContent = value;</p><p>if (percent < 1) {
requestAnimationFrame(animateNumber);
}
}</p><p>requestAnimationFrame(animateNumber);</p>

登录后复制

封装成可复用函数

为了方便多次使用，可以封装成一个通用函数：

function animateNumber(element, target, duration = 2000) {
  let start = null;
  const initial = parseInt(element.textContent) || 0;
  const change = target - initial;
<p>function easeOut(t) {
return t * (2 - t); // 简单缓动函数
}</p><p>function animate(timestamp) {
if (!start) start = timestamp;
const elapsed = timestamp - start;
const progress = Math.min(elapsed / duration, 1);
const easedProgress = easeOut(progress);
const value = initial + Math.round(change * easedProgress);</p><pre class='brush:php;toolbar:false;'>element.textContent = value;

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

登录后复制

}

requestAnimationFrame(animate); }

// 使用方式 animateNumber(document.getElementById('score'), 420, 1500);

基本上就这些。利用 requestAnimationFrame 和时间差计算，就能实现自然流畅的数字动画。加入缓动函数后，视觉效果会更舒适。这种技术常用于数据看板、计分板或统计数字展示场景。

以上就是如何利用 JavaScript 实现一个简单的数字动画或过渡效果？的详细内容，更多请关注php中文网其它相关文章！