视觉与动效

AnimatedNumber

按数位独立过渡的动态数字，支持可选模糊、平滑宽度变化和 Intl 格式化。

数字逐位动效计数金额年月blur

快速预览

查看 AnimatedNumber 组件的基本效果

次探索

基本用法

使用 AnimatedNumber 组件的基础示例

导入组件

1import { AnimatedNumber } from "@/components/qiuye-ui/animated-number";
2import { useState } from "react";

使用组件

1const [count, setCount] = useState(99);
2
3return (
4  <div className="flex items-baseline gap-2">
5    <AnimatedNumber value={count} className="text-4xl" />
6    <span>次</span>
7    <button onClick={() => setCount(value => value + 1)}>增加</button>
8  </div>
9);

组件演示

查看组件的各种使用方式和效果

时间漫游

只更新变化的数位。试试 9 月到 10 月，或跨过新年。

年月

字形模糊启用动画时长0.28s

进位与退位

数字的实际占位随位数变化，后面的单位平滑跟随。

次

金额与小数

按数位匹配，同时处理负号、千分位和固定小数位。

连续更新

每 40ms 更新一次，连续 120 次；观察同一数字再次出现时的入场方向，以及停止后的归位。

组件继承字号和颜色；模糊仅作用于变化的字形。系统开启“减少动态效果”时会立即显示当前数值。用于滚动进度时，建议在业务层按可见精度更新。