Sliding Number · Animate UI

像里程表一样逐位滚到新值的数字。

安装

自有原语直接来自 @animate-ui/react，不依赖 Radix UI、Base UI 或 React Aria；装上包即可使用。

终端

bun add @animate-ui/react motion

用法

直接从 @animate-ui/react 的对应子路径引入，下面就是完整示例；样式由你的类名决定。

sliding-number.tsx

import { SlidingNumber } from '@animate-ui/react/primitives/texts/sliding-number';

export function Price({ value }: { value: number }) {
  return <SlidingNumber number={value} thousandSeparator="," />;
}

动效

每一位数字坐在自己的滚轮上，以 stiffness 200 / damping 20 / mass 0.4 的弹簧滚到新值。
从 9 到 0 会反向滚过 8、7 等中间数字；减少动效下直接替换数字。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 见上表。

属性	类型	默认值
number	`number`	`—`
fromNumber	`number`	`—`
onNumberChange	`(number: number) => void`	`—`
padStart	`boolean`	`false`
decimalSeparator	`string`	`'.'`
decimalPlaces	`number`	`0`
thousandSeparator	`string`	`—`
transition	`SpringOptions`	`{ stiffness: 200, damping: 20, mass: 0.4 }`
delay	`number`	`0`
initiallyStable	`boolean`	`false`
inView	`boolean`	`false`
inViewMargin	`string`	`'0px'`
inViewOnce	`boolean`	`true`
…props	`Omit<HTMLMotionProps<'span'>, 'children'>`	`—`

未列出的属性与上游 API 完全一致，可在官方文档查阅。

内容对应官方文档 2026-10-18 版本。