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 < 1) {
requestAnimationFrame(step);
}}
requestAnimationFrame(step); }
// 使用示例 const numEl = document.getElementById('counter'); animateNumber(numEl, 0, 1287, 800, t => t t (3 - 2 * t)); // 缓入缓出
3. 注意事项和常见优化点
实际使用中容易忽略这些细节：
-
避免重复触发：如果用户频繁点击触发同一元素动画，应先取消上一次的 rAF（保存上一个
id，调用cancelAnimationFrame(id)） -
格式化显示：直接显示小数可能不友好，可用
Math.round()、toLocaleString()或千分位处理（如123456 → "123,456"） - 响应式暂停：页面切到后台时，rAF 会自动暂停；切回后继续，无需手动处理，这是它的天然优势
-
精度控制：对金钱类小数，建议保留固定位数（如
.toFixed(2)），并注意浮点误差，必要时用整数运算再除以 100
4. 扩展：支持多个数字同时动画 & 中断重置
如果页面有多个计数器，可统一管理动画队列；若新动画开始时旧的还没结束，可立即跳到当前值再开始新过渡，体验更连贯：
function smartAnimate(element, from, to, duration = 300) {
let lastId = null;
const start = parseFloat(element.textContent) || from;
<p>function step(timestamp) {
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / duration, 1);
const current = start + (to - start) * progress;</p><pre class="brush:php;toolbar:false;">element.textContent = Math.round(current);
if (progress < 1) {
lastId = requestAnimationFrame(step);
}}
const startTime = performance.now(); if (lastId) cancelAnimationFrame(lastId); lastId = requestAnimationFrame(step); }
不复杂但容易忽略的是：别直接用 setInterval 模拟，也别在 rAF 回调里做重排（如反复读写 offsetTop），保持轻量才能真正“平滑”。
