用requestanimationframe实现平滑数字增长动画需基于时间插值：传入起始值、目标值、持续时间，以performance.now()计时，每帧按进度线性计算当前值并取整，动画结束强制设为目标值，避免浮点误差。
用 requestAnimationFrame 实现平滑数字增长动画
直接用 setTimeout 或 setInterval 逐帧加一，容易卡顿、不精准，尤其在页面失焦或后台运行时会跳变。真正可控的数字增长必须靠 requestAnimationFrame 驱动，它和屏幕刷新率同步，且会在页面不可见时自动暂停。
核心思路是：把目标值拆成「当前值 → 目标值」的线性插值过程，每帧按时间比例更新显示值，而不是简单累加整数。
- 起始值、目标值、持续时间（毫秒）三个参数缺一不可
- 务必使用
performance.now()记录起始时间，比Date.now()更精确 - 动画结束时要手动设为最终值，避免因浮点误差导致显示差 0.001
function animateNumber(el, from, to, duration = 1000) {
const start = performance.now();
const ease = t => t; // 线性缓动，可替换为其他函数
function step(now) {
const elapsed = now - start;
const progress = Math.min(elapsed / duration, 1);
const value = Math.floor(from + (to - from) * ease(progress));
el.textContent = value;
if (progress <h3>多个数字同时动，别让每个都自己调 <code>requestAnimationFrame</code>
</h3><p>如果页面有 5 个计数器，各自调自己的 <code>requestAnimationFrame</code>，会触发 5 次重排，性能浪费明显。应该统一调度：收集所有待动画元素，单次 <code>requestAnimationFrame</code> 中批量更新。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/894" title="万知"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d43c511e8878.png" alt="万知" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/894" title="万知" class="overflowclass">万知</a>
<p class="overflowclass">万知是一款由零一万物推出的一站式 AI 文档阅读、写作和 PPT 创作工作台。</p>
</div>
<a rel="nofollow" href="/ai/894" title="万知" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 用数组存 { el, from, to, start, duration } 对象，避免闭包堆积
- 每次帧回调遍历数组，只更新未完成的项，完成后从数组中
splice掉 - 注意 DOM 写入尽量集中，比如先算好所有值，再统一赋
textContent
数字带千分位或单位？格式化必须在动画循环外做
el.textContent = value.toLocaleString() + '万' 这类操作放在每帧里执行，会频繁触发格式化和字符串拼接，拖慢帧率。尤其 toLocaleString() 在低端设备上开销不小。
- 动画过程中只更新纯数字（整数或保留 1 位小数），格式化留到最后一帧
- 如果必须实时显示逗号，改用轻量函数，例如：
value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') - 单位（如 “万元”、“人次”）建议用独立
<span></span>包裹，动画只操作数字容器
首次加载就触发动画？小心 DOM 未就绪或数据异步延迟
常见错误是脚本写在 里，直接调用 animateNumber(document.getElementById('num'), 0, 12345)，但此时 #num 根本不存在，报错 Cannot set property 'textContent' of null。
- 确保 DOM 就绪：用
document.addEventListener('DOMContentLoaded', ...)或把 script 放在前 - 若数字来自 API，不要在
fetch().then()里直接调用动画函数，先判断元素是否存在，再启动 - 服务端渲染（SSR）场景下，需检查是否已存在初始值，避免从 0 开始闪动
最易被忽略的是缓动函数选型——线性（t => t）看着“匀速”，但人眼感知是先快后慢更自然；而 t => t * t（二次方）开头太慢，容易误判为卡住。真要用缓动，优先试 t => t * (2 - t)（ease-in-out 的简化版），再微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
