API
パラメータ |
説明する |
タイプ |
デフォルト |
通過しなければなりません |
から |
値アニメーション開始値 |
番号 |
0 |
間違い |
に |
数値目標値 |
番号 |
1000 |
間違い |
間隔 |
アニメーション期間の数値 (ミリ秒単位) |
番号 |
3000 |
間違い |
自動再生 |
アニメーションを自動的に開始するかどうか |
ブール値 |
真実 |
間違い |
精度 |
精度、小数点以下何桁か |
番号 |
0 |
間違い |
接頭辞 |
接頭語 |
弦 |
」 |
間違い |
サフィックス |
サフィックス |
弦 |
」 |
間違い |
セパレーター |
千の区切り文字 |
弦 |
「、」 |
間違い |
10進数 |
小数文字 |
弦 |
「。」 |
間違い |
値スタイル |
数値テキストのスタイル |
CSSプロパティ |
{} |
間違い |
遷移 |
アニメーショントランジションエフェクト |
トランジションファンク |
TransitionFunc['easeInOutCubic'] |
間違い |
メソッド
イベント名 |
説明する |
パラメータ |
遊ぶ |
アニメーションを再生する |
() => 無効 |
イベント
イベント名 |
説明する |
パラメータ |
始めました |
アニメーションの再生が始まります |
() => 無効 |
終了した |
アニメーションが終了しました |
() => 無効 |
数値アニメーション コンポーネント NumberAnimation.vue を作成する
<script setup lang="ts">
import {
ref, computed, watchEffect, onMounted, watch } from 'vue'
import type {
CSSProperties } from 'vue'
import {
useTransition, TransitionPresets } from '@vueuse/core'
enum TransitionFunc {
linear = 'linear',
easeOutSine = 'easeOutSine',
easeInOutSine = 'easeInOutSine',
easeInQuad = 'easeInQuad',
easeOutQuad = 'easeOutQuad',
easeInOutQuad = 'easeInOutQuad',
easeInCubic = 'easeInCubic',
easeOutCubic = 'easeOutCubic',
easeInOutCubic = 'easeInOutCubic',
easeInQuart = 'easeInQuart',
easeOutQuart = 'easeOutQuart',
easeInOutQuart = 'easeInOutQuart',
easeInQuint = 'easeInQuint',
easeOutQuint = 'easeOutQuint',
easeInOutQuint = 'easeInOutQuint',
easeInExpo = 'easeInExpo',
easeOutExpo = 'easeOutExpo',
easeInOutExpo = 'easeInOutExpo',
easeInCirc = 'easeInCirc',
easeOutCirc = 'easeOutCirc',
easeInOutCirc = 'easeInOutCirc',
easeInBack = 'easeInBack',
easeOutBack = 'easeOutBack',
easeInOutBack = 'easeInOutBack'
}
interface Props {
from?: number
to?: number
duration?: number
autoplay?: boolean
precision?: number
prefix?: string
suffix?: string
separator?: string
decimal?: string
valueStyle?: CSSProperties
transition?: TransitionFunc
}
const props = withDefaults(defineProps<Props>(), {
from: 0,
to: 1000,
duration: 3000,
autoplay: true,
precision: 0,
prefix: '',
suffix: '',
separator: ',',
decimal: '.',
valueStyle: () => ({
}),
transition: TransitionFunc['easeInOutCubic']
})
const source = ref(props.from)
watchEffect(() => {
source.value = props.from
})
watch(
[() => props.from, () => props.to],
() => {
if (props.autoplay) {
play()
}
}
)
onMounted(() => {
props.autoplay && play()
})
const outputValue = useTransition(source, {
duration: props.duration,
transition: TransitionPresets[props.transition],
onFinished: () => emits('finished'),
onStarted: () => emits('started')
})
function play () {
source.value = props.to
}
const showValue = computed(() => formatNumber(outputValue.value))
function isNumber (val: any) {
return Object.prototype.toString.call(val) === '[object Number]'
}
const emits = defineEmits(['started', 'finished'])
function formatNumber (num: number | string) {
const {
precision, decimal, separator, suffix, prefix } = props
if (num === 0) {
return num.toFixed(precision)
}
if (!num) {
return ''
}
num = Number(num).toFixed(precision)
num += ''
const x = num.split('.')
let x1 = x[0]
const x2 = x.length > 1 ? decimal + x[1] : ''
const rgx = /(\d+)(\d{3})/
if (separator && !isNumber(separator)) {
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + separator + '$2')
}
}
return prefix + x1 + x2 + suffix
}
defineExpose({
play
})
</script>
<template>
<span :style="valueStyle">
{
{
showValue }}
</span>
</template>
ご利用ページ内でご紹介
<script setup lang="ts">
import NumberAnimation from 'NumberAnimation.vue'
import {
ref } from 'vue'
function onStarted () {
console.log('started')
}
function onFinished () {
console.log('finished')
}
const animationRef = ref()
function onClick () {
animationRef.value.play()
}
</script>
<template>
<div>
<h1>NumberAnimation 数值动画</h1>
<h2 class="mt30 mb10">基本使用</h2>
<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>
<h2 class="mt30 mb10">精度</h2>
<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>
<h2 class="mt30 mb10">自定义前缀 & 后缀</h2>
<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>
<h2 class="mt30 mb10">自定义样式</h2>
<Row>
<Col :span="12">
<Statistic title="一个小目标">
<NumberAnimation :value-style="{fontSize: '30px', fontWeight: 600, color: '#d4380d'}" :from="0" :to="100000000"/>
</Statistic>
</Col>
</Row>
<h2 class="mt30 mb10">自定义播放和动画时间</h2>
<Row>
<Col :span="12">
<Statistic title="一个小目标">
<NumberAnimation
ref="animationRef"
:from="0"
:to="100000000"
:duration="5000"
:precision="2"
:autoplay="false"
@started="onStarted"
@finished="onFinished" />
</Statistic>
<Button @click="onClick">播放</Button>
</Col>
</Row>
</div>
</template>