用requestAnimationFrame实现数字滚动动画需将变化拆分为多帧平滑过渡，通过缓动公式控制进度，精确处理起始值、目标值、精度及方向，并妥善管理动画启停与清理。
网页端用 requestAnimationFrame 实现数字滚动动画，核心是**把数字变化拆分成多帧平滑过渡**，而不是一次性赋值。它比 setTimeout 或 setInterval 更精准、更省资源，尤其适合和页面渲染节奏同步。
明确目标值与当前值
动画前先确定起始数字（当前显示值）和目标数字（要滚动到的值）。两者可能都是整数，也可能是带小数的数值（比如统计类数据）。注意处理负数和小数位数，避免因四舍五入导致最终值偏差。
- 用
Math.floor或toFixed(n)控制显示精度，但计算过程建议保留原始浮点数，仅在渲染时格式化 - 如果目标值小于当前值，动画应向下滚动，方向由差值正负决定
- 可加一个最小变化阈值（如
0.01），避免无限逼近导致循环不止
用 requestAnimationFrame 逐帧更新
每次回调中按比例推进当前值，接近目标值。推荐使用「缓动公式」（如线性、easeOutCubic）让滚动有加速/减速感，比匀速更自然。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 记录开始时间（
performance.now()），结合持续时间（如 800ms）算出当前进度t ∈ [0, 1] - 用缓动函数处理
t，例如easeOutCubic = t => 1 - Math.pow(1 - t, 3) - 当前值 = 起始值 + (目标值 − 起始值) × 缓动后 t
- 更新 DOM 元素文本内容（建议用
textContent而非innerHTML，更安全高效）
控制启动与终止逻辑
避免重复调用或未清理的动画帧堆积。每次启动新动画前，应取消上一次的 requestAnimationFrame 请求。
- 用一个变量（如
animId）保存当前帧 ID，调用前先执行cancelAnimationFrame(animId) - 当当前值与目标值足够接近（如
Math.abs(current - target) ），直接设为 target 并停止递归 - 可在动画结束时触发回调（如
onComplete），方便链式操作
简单可复用的封装示例
下面是一个轻量函数，支持整数/小数、指定时长和缓动类型：
function animateNumber(el, from, to, duration = 800, easing = t => t) {
const start = performance.now();
let animId;
<p>function step(now) {
const elapsed = now - start;
const progress = Math.min(elapsed / duration, 1);
const eased = easing(progress);
const current = from + (to - from) * eased;</p><pre class="brush:php;toolbar:false;">el.textContent = Math.round(current * 100) / 100; // 保留两位小数
if (progress < 1) {
animId = requestAnimationFrame(step);
}}
cancelAnimationFrame(animId); animId = requestAnimationFrame(step); }
// 使用：animateNumber(document.getElementById('count'), 0, 1234.56, 1000, t => 1 - Math.pow(1 - t, 3));
