CountUp组件(一个动态数字变化组件)

2022-01-26  本文已影响0人  importUIKit

count-up-es-react

yarn add count-up-es-react 
// or
npm i count-up-es-react 

该组件是一个在指定时间内,从一个数字动态变化到另一个数字,动画类型丰富,涵盖了非常多的easing动画算法,值得推荐使用,特别适合开发大屏使用。
demo图片示例:


C.gif

搭配自定义字体使用:


A.gif

*** 动图掉帧情况看着效果不好,实际动画很平滑

简单例子

import { CountUp } from 'count-up-es-react';

const MyComponent = () => (
  <div>
    <CountUp start={0} end={200} duration={3000} />
  </div>
);

自定义渲染(搭配antd组件使用)

      <CountUp
        start={0}
        end={617}
        duration={2000}
        easing={'easeOutExpo'}
        autoResetKey={[refresh]}
        render={({ value }) => {
          return (
            <>
              <Statistic
                precision={0}
                title="新能源车辆销量"
                value={value as any}
                valueStyle={{ color: 'red' }}
                suffix="辆"
                prefix={<ArrowUpOutlined />}
              />
            </>
          );
        }}
      />
上一篇下一篇

猜你喜欢

热点阅读