美文网首页
CountUp组件(一个动态数字变化组件)

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

作者: importUIKit | 来源:发表于2022-01-26 11:53 被阅读0次

    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 />}
                  />
                </>
              );
            }}
          />
    

    相关文章

      网友评论

          本文标题:CountUp组件(一个动态数字变化组件)

          本文链接:https://www.haomeiwen.com/subject/zejacrtx.html