NumberTicker
number-ticker数字滚动 · 进入视口 tween 到目标值 + reduced-motion
用法
基础用法
进入视口后从 0 滚动到目标值，自动千分位。
0
tsx
<NumberTicker value={12345} className="text-4xl font-semibold" />小数位
decimalPlaces 控制小数位数，适合百分比 / 金额。
0.0
tsx
<NumberTicker value={99.9} decimalPlaces={1} className="text-4xl font-semibold" />向下计数
startValue 大于 value 时自然向下滚动，无需额外方向参数。
100
tsx
<NumberTicker startValue={100} value={0} className="text-4xl font-semibold" />起始值与时长
startValue 设定滚动起点，duration 拉长动画节奏。
1,000
tsx
<NumberTicker startValue={1000} value={8888} duration={2.4} className="text-4xl font-semibold" />何时用
需要把一个数字以动效从起点滚到目标值（KPI 大屏、统计卡进场）时用。只渲染纯数字动画，没有标签/趋势箭头/前后缀语义——要带「标题 + 单位 + 同比」用 Stat，要带 CountUp 之外的格式化与趋势用 Statistic。
导入
ts
import { NumberTicker, formatTicker } from "@hulianui/ui"Props
继承 span 的所有原生属性（children 除外）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value* | number | — | 目标值。进入视口后从 startValue 滚到此值 |
| startValue | number | 0 | 起始值。startValue > value 即自然向下滚（无需单独 direction prop） |
| decimalPlaces | number | 0 | 小数位，驱动 Intl.NumberFormat 的 min/maxFractionDigits |
| duration | number | 1.2 | 滚动时长（秒），曲线固定复用 motionEase.out（瑚琏签名） |
| delay | number | 0 | 进入视口后延迟开始（秒） |
禁忌 / 坑
- 动画由 IntersectionObserver 触发、rAF 驱动 tween。headless 截图会停在第 0 帧（只显示起始值），不是 bug——验证视觉用真机或开 reduced-motion 直出终值。参见 [[verify-sub-second-web-animation-via-headless-screenshot]]。
prefers-reduced-motion: reduce下直接显示终值不做滚动，无障碍友好。
相关
Playground
0
<NumberTicker value={1234} decimalPlaces={0} />