滚动数字:计数器与翻牌
数字从旧值滚到新值,是数字插值最直接的一个落地:被补间的「值」就是这个数本身。 难点不在动画,而在呈现:逐帧把插值结果取整、加上千分位与单位 (纯计数器);或把每一位做成一条 可上下滚动的数字带,低位转得快、高位转得慢,叠成里程表式的翻牌 (odometer)。两种都吃同一个 0→N 的补间。
纯计数器 (取整 + 千分位)
0
翻牌 odometer (每位一条滚动数字带)
补间进度随时间
原始值 0.00
值 mod 10 连续滚动。若高位照搬齿轮式的
(值 ÷ 10ⁱ) mod 10,静止时会停在两数之间 (如 86400 的千位 = 86.4,卡在 6 与 7 间)——看上去「没对齐」。
改用进位传递:每个高位 = 自己的整数位 + 从下位「溢出」上来的零头 —— 当下位偏移进入 [9, 10) 时,
那 0→1 的零头平滑爬升到本位。这样滚动处处连续 (不卡顿),静止时下位归整、进位归零,每位又恰好落在整数位。
纯计数器更简单:对插值结果 Math.round 再 toLocaleString 加千分位。
@vega/anim — 数字补间 + 两种呈现
这只是把插值的结果接到了文本与位移上;若值是颜色而非数字,插值要在线性光空间 进行 (见插值页)。落定的节奏由缓动决定——计数器常用 easeOut,数字快速冲出再缓缓定格。