@coderlzw/react-number-animation

一个用于数字动画过渡的 React 组件库，提供了两种不同的数字动画效果。

特性

• 🎯 高性能：使用 React.memo 优化渲染
• 🎨 可定制：支持自定义样式和动画参数
• 📦 轻量级：无额外依赖（除了 motion 库）
• 🎭 平滑动画：使用 easeOutExpo 缓动函数
• 🔢 数字格式化：支持千位分隔和小数点设置
• 📱 响应式：适配各种屏幕尺寸
• 🎨 主题定制：支持自定义样式覆盖

安装

npm install @coderlzw/react-number-animation
# 或
yarn add @coderlzw/react-number-animation
# 或
pnpm add @coderlzw/react-number-animation

组件

Statistic

一个带有标题、前缀和后缀的统计数字组件，支持数字格式化和平滑过渡动画。

属性

| 属性名 | 类型 | 默认值 | 描述 | |--------|------|--------|------| | value | number | - | 要显示的数字值 | | title | React.ReactNode | - | 统计数字的标题 | | prefix | React.ReactNode | - | 数字前缀 | | suffix | React.ReactNode | - | 数字后缀 | | className | string | '' | 自定义类名 | | duration | number | 2000 | 动画持续时间（毫秒） | | decimals | number | 0 | 小数位数 | | separator | string | ',' | 千位分隔符 | | decimal | string | '.' | 小数点符号 | | useGrouping | boolean | true | 是否使用千位分组 |

示例

import { Statistic } from '@coderlzw/react-number-animation';

function App() {
  return (
    <div>
      {/* 基础用法 */}
      <Statistic
        value={1234567.89}
        title="总销售额"
        prefix="$"
        suffix="元"
        decimals={2}
        duration={1500}
      />

      {/* 自定义格式化 */}
      <Statistic
        value={1234567}
        title="访问量"
        separator=" " // 使用空格作为千位分隔符
        suffix="次"
      />

      {/* 不使用分组 */}
      <Statistic
        value={123}
        useGrouping={false}
        title="ID"
      />
    </div>
  );
}

AnimatedNumber

一个纯数字动画组件，支持数字的上下滚动动画效果。

属性

| 属性名 | 类型 | 默认值 | 描述 | |--------|------|--------|------| | value | number | - | 要显示的数字值 | | className | string | '' | 自定义类名 |

示例

import { AnimatedNumber } from '@coderlzw/react-number-animation';

function App() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <AnimatedNumber
        value={value}
        className="custom-animation"
      />
      <button onClick={() => setValue(v => v + 1)}>增加</button>
      <button onClick={() => setValue(v => v - 1)}>减少</button>
    </div>
  );
}

样式

组件使用原生 CSS 进行样式设置，你可以通过自定义类名来覆盖默认样式。

Statistic 样式类

• .statistic: 统计组件容器
• .statistic-title: 标题样式
• .statistic-content: 内容容器
• .statistic-prefix: 前缀样式
• .statistic-suffix: 后缀样式
• .statistic-value: 数值样式

AnimatedNumber 样式类

• .animated-number: 动画数字容器
• .digit-container: 单个数字容器

浏览器支持

• Chrome >= 60
• Firefox >= 60
• Safari >= 12
• Edge >= 79

开发

# 克隆仓库
git clone https://github.com/coderlzw/react-number-animation.git

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

贡献

欢迎提交 Pull Request 或创建 Issue！

许可证

MIT © coderlzw