数字滚动
Count-up Animation
初级通用数字滚动（Count-up Animation）是让数字从一个值连续变化到另一个值，而不是直接替换。数据看板刷新时，收入从旧值走到新值，用户能感觉到「变了、是涨是跌」；官网首次展示「已服务 10,000 家企业」时，也常让数字从 0 数上去。
你可能会说：「后台的数据卡片刷新时数字直接一换，看不出变化，能不能让它像跑表一样滚到新数字？」
读之前建议先了解
动手看看收入从旧值滚到新值
要点数字滚动是怎样起作用的？
- 1
从旧值走到新值
每一帧按「已过时间 ÷ 总时长」算出进度，再用缓动函数把进度换算成当前要显示的数字，越接近终点走得越慢，看起来像「停稳了」。数据刷新时应该从旧值走到新值：从 128,450 走到 129,020，方向一眼就能感觉到。每次刷新都从 0 数起是常见的错误，只有第一次出现、值得强调的数字才适合从 0 数。动画中途再次刷新时，要从屏幕上当前显示的值接着走，而不是跳回去。
- 2
格式和字宽不能跳
每一帧显示的数字都要按最终格式处理：千分位、货币符号、小数位数保持一致，不能中途从「128450.37」变成「¥128,450」。另一个细节是字宽：大多数字体里 1 比 8 窄，数字一滚整行文字就左右抖动。给数字加上 font-variant-numeric: tabular-nums，让每一位都一样宽。
- 3
动画期间的值是「假」的
动画进行时，屏幕上的数字是中间值。用户这时截图、复制，或者读屏软件去读，拿到的都不是真实数据。所以时长要短（一般 0.6~1.5 秒），读屏只读最终值（动画中的数字对辅助技术隐藏，另放一份最终值），开启减少动效时直接显示最终值。
容易混淆的地方
数字滚动改变的是显示的数值本身；而让数字所在的元素淡入、上移，是元素的入场动画，数值并没有变化。它也不是进度条：进度条表示任务完成了多少，数字滚动只是把一次数值变化的过程展示出来，不代表任何进行中的任务。
什么时候用
适合用
- 数据后台的指标卡片刷新时，数字从旧值滚到新值，让用户察觉到变化和方向。
- 官网首屏展示「已帮助 10,000+ 团队」这类成就数字，第一次进入视野时从 0 数上去。
- 购物车改了数量后，总价从旧金额滚到新金额，让用户注意到价格变了。
不适合用
- 表格里成百上千个数字，别每个都滚动；直接显示，最多给有变化的单元格一个短暂高亮。
- 股票、余额等用户要立刻准确读取的数字，别用慢慢爬的动画；直接显示最终值，变化用颜色标出。
- 数据每秒都在更新的实时监控，别让数字一直滚个不停；直接替换数值更清楚。
练一练选一个答案，看看解释
你的店铺后台每 30 秒刷新一次「本月收入」，想给它加数字滚动。哪种做法最合适？
让 AI 帮你做复制给 AI Agent 直接用
请给【需要强调变化的数字，如：数据后台的收入、订单数指标卡片】加上数字滚动。先阅读这些组件、数据刷新逻辑和现有的数字格式化函数。要求：首次出现时可以从 0 开始，之后每次刷新都从当前显示的值滚到新值，动画中途再刷新也从当前值接着走；时长 0.6~1.5 秒，用减速缓动；每一帧都用现有格式化函数处理千分位、货币和小数位；数字使用等宽字形避免抖动；动画中的数字对读屏隐藏，另提供最终值。开启减少动效时直接显示。沿用现有写法，不改无关代码。最后说明怎样验证：快速连续刷新时数字不会跳回旧值。