requestAnimationFrame实现数字平滑过渡的核心是逐帧插值计算当前值，而非一次性赋值；它比setTimeout更精准节电、与屏幕刷新同步，需记录起始值、目标值、开始时间与总时长，用progress驱动插值更新DOM。
网页端用 requestAnimationFrame 实现数字平滑过渡，核心是把“从 A 到 B”的变化拆成多帧匀速（或缓动）更新，而不是一次性赋值。它比 setTimeout 更精准、更节电，且与屏幕刷新率同步。
1. 基础思路：用 rAF 替代定时器做逐帧插值
关键不是“每隔多少毫秒执行一次”，而是“每一帧都算一次当前应显示的值”，直到到达目标。需要记录起始值、目标值、开始时间、总持续时间。
- 调用
requestAnimationFrame启动动画循环 - 在回调中计算已过去的时间占比（t / duration），再用插值公式求当前值：
current = start + (end - start) * progress - 更新 DOM（比如
element.textContent = Math.round(current)） - 若未完成，继续调用
requestAnimationFrame；否则结束
2. 简单可复用的数字过渡函数
下面是一个轻量封装，支持整数/小数、指定时长和缓动（默认线性）：
function animateNumber(element, start, end, duration = 300, easing = t => t) {
const startTime = performance.now();
<p>function step(timestamp) {
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1);
const eased = easing(progress);
const current = start + (end - start) * eased;</p><pre class="brush:php;toolbar:false;">element.textContent = current.toFixed(0); // 整数显示，如需小数可改
if (progress <p>}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p>requestAnimationFrame(step);
}</p><p>// 使用示例
const numEl = document.getElementById('counter');
animateNumber(numEl, 0, 1287, 800, t => t <em> t </em> (3 - 2 * t)); // 缓入缓出
</p>
3. 注意事项和常见优化点
实际使用中容易忽略这些细节：
-
避免重复触发：如果用户频繁点击触发同一元素动画，应先取消上一次的 rAF（保存上一个
id，调用cancelAnimationFrame(id)） -
格式化显示：直接显示小数可能不友好，可用
Math.round()、toLocaleString()或千分位处理（如123456 → "123,456"） - 响应式暂停：页面切到后台时，rAF 会自动暂停；切回后继续，无需手动处理，这是它的天然优势
-
精度控制：对金钱类小数，建议保留固定位数（如
.toFixed(2)），并注意浮点误差，必要时用整数运算再除以 100
4. 扩展：支持多个数字同时动画 & 中断重置
如果页面有多个计数器，可统一管理动画队列；若新动画开始时旧的还没结束，可立即跳到当前值再开始新过渡，体验更连贯：
setInterval
