数值动画 NumberAnimation

数值播放动画

Play

基本使用

Show Code

<template>
  <Row>
    <Col :span="12">
      <Statistic title="一个小目标">
        <NumberAnimation :to="100000000.12345" />
      </Statistic>
    </Col>
    <Col :span="12">
      <Statistic title="一个小目标">
        <NumberAnimation :to="100000000.12345" separator="" />
      </Statistic>
    </Col>
  </Row>
</template>

精度

Show Code

<template>
  <Row>
    <Col :span="12">
      <Statistic title="一个小目标">
        <NumberAnimation :from="0.00" :to="100000000.12345" :precision="2" />
      </Statistic>
    </Col>
    <Col :span="12">
      <Statistic title="一个小目标">
        <NumberAnimation :to="100000000.12345" :precision="3" />
      </Statistic>
    </Col>
  </Row>
</template>

自定义前缀 & 后缀

Show Code

<template>
  <Row>
    <Col :span="12">
      <Statistic title="一个小目标">
        <NumberAnimation
          prefix="$"
          :from="0"
          :to="100000000" />
      </Statistic>
    </Col>
    <Col :span="12">
      <Statistic title="一个小目标">
        <NumberAnimation
          :from="0"
          :to="100000000"
          suffix="元" />
      </Statistic>
    </Col>
  </Row>
</template>

自定义样式

Show Code

<template>
  <Statistic title="一个小目标">
    <NumberAnimation
      :value-style="{fontSize: '30px', fontWeight: 600, color: '#d4380d'}"
      :from="0"
      :to="100000000" />
  </Statistic>
</template>

自定义播放和动画时间

播放

一个小目标

0.00

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const animationRef = ref()
const from = ref(0)
const to = ref(100000000)
function onClick () {
  animationRef.value.play()
}
function onStarted () {
  console.log('started')
}
function onFinished() {
  console.log('finished');
  [from.value, to.value] = [to.value, from.value]
}
</script>
<template>
  <Space vertical>
    <Button type="primary" @click="onClick">播放</Button>
    <Statistic title="一个小目标">
      <NumberAnimation
        ref="animationRef"
        :from="from"
        :to="to"
        :duration="5000"
        :precision="2"
        :autoplay="false"
        @started="onStarted"
        @finished="onFinished"
      />
    </Statistic>
  </Space>
</template>

APIs

NumberAnimation

参数	说明	类型	默认值
from	数值动画起始数值	number	0
to	数值目标值	number	1000
duration	数值动画持续时间，单位 ms	number	3000
autoplay	是否自动开始动画	boolean	true
precision	精度，保留小数点后几位	number	0
prefix	前缀	string	undefined
suffix	后缀	string	undefined
separator	千分位分隔符	string	','
decimal	小数点字符	string	'.'
valueStyle	数值文本样式	CSSProperties	{}
transition	动画过渡效果	TransitionFunc	TransitionFunc['easeInOutCubic']

Methods

名称	说明	类型
play	播放动画	() => void

Events

名称	说明	类型
started	动画开始播放	() => void
finished	动画播放完成	() => void