Tantalum UI

CountUp 数字动画

注：

  • 本组件没有指定样式，默认情况下可对文字样式进行自定义。
import {
  TaCountUp,
  TaCell,
  TaGroup,
  TaButton,
  showToast,
  CountUpOnAnimated,
  CountUpOnCancel,
  CountUpRef
} from '@/index'
import { useCallback, useRef, useState } from 'react'

const initialNumber = 1000
const number = 5000

export default function ExpCountUp() {
  const countUpRef = useRef<CountUpRef>(null)
  const [number2, setNumber2] = useState(1000)
  const [isCancel, setIsCancel] = useState(false)

  const onAnimated: CountUpOnAnimated = e => {
    console.log('animated', e)
    showToast('动画结束')
  }

  const onAnimated2: CountUpOnAnimated = e => {
    console.log('animated', e)
  }

  const onCancel: CountUpOnCancel = e => {
    console.log('cancel', e)
  }

  const cancel = useCallback(() => {
    if (!isCancel) {
      countUpRef.current?.cancel()
      showToast('已取消')
    } else {
      setNumber2(number2 > 500 ? 0 : 1000)
    }

    setIsCancel(!isCancel)
  }, [isCancel, number2])

  return (
    <>
      <TaGroup title="基础用法">
        <TaCell label="默认">
          <TaCountUp number={1000} />
        </TaCell>
        <TaCell label="千分位 thousands">
          <TaCountUp initialNumber={initialNumber} number={number} thousands />
        </TaCell>
        <TaCell label="小数位 decimalDigits=2">
          <TaCountUp
            initialNumber={initialNumber}
            number={number}
            decimalDigits="2"
          />
        </TaCell>
      </TaGroup>
      <TaGroup title="速度">
        <TaCell label="speed=slow">
          <TaCountUp
            initialNumber={initialNumber}
            number={number}
            decimalDigits="2"
            speed="slow"
          />
        </TaCell>
        <TaCell label="speed=normal">
          <TaCountUp
            initialNumber={initialNumber}
            number={number}
            decimalDigits="2"
            speed="normal"
          />
        </TaCell>
        <TaCell label="speed=fast">
          <TaCountUp
            initialNumber={initialNumber}
            number={number}
            decimalDigits="2"
            speed="fast"
          />
        </TaCell>
        <TaCell label="speed=10000（固定10秒动画）">
          <TaCountUp
            initialNumber={initialNumber}
            number={number}
            decimalDigits="2"
            speed={10000}
          />
        </TaCell>
      </TaGroup>
      <TaGroup title="事件监听">
        <TaCell label="animated">
          <TaCountUp number="500" onAnimated={onAnimated} />
        </TaCell>
        <TaCell label="cancel" className="exp-countUp-box">
          <div className="exp-countUp-r">
            <TaCountUp
              ref={countUpRef}
              initialNumber="0"
              number={number2}
              thousands
              onAnimated={onAnimated2}
              onCancel={onCancel}
            />
          </div>
          <TaButton onClick={cancel} size="small">
            {isCancel ? '开始' : '取消'}
          </TaButton>
        </TaCell>
      </TaGroup>
    </>
  )
}

Import 

import { TaCountUp } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

import type {
  CountUpSpeed,
  CountUpOnCancel,
  CountUpOnAnimated,
  CountUpRef
} from 'tantalum-ui-mobile-react'

Props

属性类型默认值必填说明
numbernumber0否目标值，变化到该数值
initialNumbernumber0否初始值，首次动画会基于 number 和该值的差值来做变化
speedCountUpSpeed'normal'否可选 'normal', 'fast', 'slow'，或者固定数字的时间
thousandsbooleanfalse否是否以千分号的形式显示，如：'1,234.56'
decimalDigitsnumber0否保留 decimalDigits 小数位数

CountUpSpeed 

type CountUpSpeed = 'normal' | 'fast' | 'slow' | number

Events

事件描述回调函数参数TypeScript 函数
onAnimated动画结束后触发，主动取消也会触发payload: { number: number } number 为当前数值CountUpOnAnimated
onCancel取消成功时触发payload: { number: number } number 为当前数值CountUpOnCancel

Methods

方法名说明参数
cancel主动取消动画变化取消成功（动画没结束前取消）会触发 cancel event