Ticker 数值动画

Ticker（数值动画）是一种用于展示数值变化的视觉效果，通常用于显示动态的计数器、进度条、数据展示等场景。

代码演示

基础使用

今日下载量：

0

<template>
  <div class="row">
    <div>今日下载量：</div>
    <p-ticker :to="999" />
  </div>
</template>
<style>
.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>

缓动函数与动画时长动态调节机制

今日下载量：

000000

采用动态缓动函数和自适应动画时长机制，确保数值变化平滑自然。

• 动画时长调节规则：系统会根据数值 变化幅度 自动调整动画时长（基准时长为2秒）

  • 微幅变化（<10）：1秒（基准 × 0.5）
  • 小幅变化（10~100）：1.6秒（基准 × 0.8）
  • 中幅变化（100~1000）：2秒（基准时长）
  • 大幅变化（≥1000）：按对数比例延长，公式为 基准时长 × (1 + log10(变化量绝对值/1000))

• 缓动函数匹配策略：不同数值范围适配最优缓动曲线

  • 微幅变化（ <10 ）：二次缓动 easeOutQuad ，提供轻快响应
  • 小幅至( 10~100 )：三次缓出 easeOutCubic ，平衡流畅度与响应速度
  • 中幅变化（ 10~1000 ）：四次缓出 easeOutQuart ，平衡流畅度与响应速度
  • 大幅变化（ ≥1000 ）：指数缓出（ easeOutExpo ），确保大数值变化平稳收尾

该设计通过动态参数匹配，既保持小数值操作的即时反馈，又实现大数值跳转的优雅过渡。

<template>
  <div class="column">
    <div>今日下载量：</div>
    <p-ticker :to="9" />
    <p-ticker :to="99" />
    <p-ticker :to="999" />
    <p-ticker :to="9999" />
    <p-ticker :to="99999" />
    <p-ticker :to="999999" />
  </div>
</template>
<style>
.column {
  display: flex;
  align-items: center;
  gap: 15px;
}
</style>

自定义尺寸

今日下载量（small）：

0

今日访问量（medium）：

0

今日成交量（large）：

0

今日任务量（1.4em）：

0

本月加班量（24px）：

0

• 预设尺寸：
  • small（小号）
  • medium（中号，默认值）
  • large（大号）
• 数字值（自动转换为 px 单位）： 例如 16 会被解析为 16px
• CSS 标准字体大小值，包括下列几种情况：
  • 绝对单位：12px、1.5rem、0.8em
  • 视口单位：2vw、3vh（响应式适配）
  • 百分比：120%（基于父元素字体大小）

<template>
  <div class="demo-ticker-basic">
    <div>
      <div>今日下载量（small）：</div>
      <p-ticker :to="19998" size="small" />
    </div>
    <div>
      <div>今日访问量（medium）：</div>
      <p-ticker :to="19998" />
    </div>
    <div>
      <div>今日成交量（large）：</div>
      <p-ticker :to="19998" size="large" />
    </div>
    <div>
      <div>今日任务量（1.4em）：</div>
      <p-ticker :to="19998" size="1.4em" />
    </div>
    <div>
      <div>本月加班量（24px）：</div>
      <p-ticker :to="19998" size="24px" />
    </div>
  </div>
</template>
<style>
.demo-ticker-basic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.demo-ticker-basic > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.demo-ticker-basic > div > div {
  width: 186px;
}
</style>

自定义分隔符

今日下载量：

0

在数值动画中，数字分隔符( separator )用于格式化显示的数字，使其更易读。

• 可用分隔符选项

分隔符	示例输入	格式化结果	适用场景
, (逗号)	1234567	1,234,567	国际通用数字格式
. (点号)	1234567	1.234.567	部分欧洲国家格式
(空格)	1234567	1 234 567	ISO标准格式
无（空字符串， 默认）	1234567	1234567	不需要分隔符

<template>
  <div class="row">
    <p>今日下载量：</p>
    <p-ticker ref="tickerElementRef" :to="12546386" separator="," size="24" />
    <p-button @click="play()">播放</p-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TickerExposes } from 'peach-x/components/ticker';

const tickerElementRef = ref<TickerExposes>();
const play = () => {
  tickerElementRef.value && tickerElementRef.value.start();
};
</script>
<style>
.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>

设置精度

今日营业额：

0.00

在数值动画中，precision 参数用于控制数值显示的小数位数精度。一旦设置了精度值，动画过程中显示的数字将始终按照指定的小数位数进行格式化呈现。

<template>
  <div class="row">
    <p>今日营业额：</p>
    <p-ticker ref="tickerElementRef" :to="684518.54" separator="," :size="24" :precision="2" />
    <p-button @click="play()">播放</p-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TickerExposes } from 'peach-x/components/ticker';

const tickerElementRef = ref<TickerExposes>();
const play = () => {
  tickerElementRef.value && tickerElementRef.value.start();
};
</script>
<style>
.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>

手动控制动画

今日下载量：

0.00

<template>
  <div class="row">
    <p>今日下载量：</p>
    <p-ticker ref="tickerElementRef" :to="45641219851.99" separator="," :size="24" :precision="2" />
    <p-button @click="play()">播放</p-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TickerExposes } from 'peach-x/components/ticker';

const tickerElementRef = ref<TickerExposes>();
const play = () => {
  tickerElementRef.value && tickerElementRef.value.start();
};
</script>
<style lang="scss">
.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>

API

属性

属性名	说明	类型	默认值
from	数值动画起始值	number	0
to	数值动画的目标值（必填）	number	-
duration	动画持续时间（毫秒）	number	-
precision	数值精度（保留小数点后几位）	number	0
separator	数值分隔符（支持 , . 空格或空字符串）	, | . | ' ' | ''	''
autoplay	是否自动播放动画	boolean	true
size	尺寸	small | medium | large | string | number	medium

事件

事件名	说明	回调参数
finish	数值动画播放完成时触发	无 (undefined)

显式暴露

名称	类型	说明
ref	Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>	获取组件根元素的引用（span 标签），可用于直接操作 DOM 或绑定外部逻辑。
start	() => void	手动触发动画开始的函数（当 autoplay=false 时需主动调用）。
isAnimating	boolean	动画状态（true 表示正在播放，false 表示已结束或未开始）。