Vue3数值动画（NumberAnimation）

效果如下图在线预览APIsNumberAnimation参数说明类型默认值from数值动画起始数值number0to数值目标值number1000duration数值动画持续时间单位msnumber3000autoplay是否自动开始动画booleantrueprecision精度保留小数点后几位number0prefix前缀stringundefinedsuffix后缀stringundefinedseparator千分位分隔符string‘,’decimal小数点字符string‘.’valueStyle数值文本样式CSSProperties{}transition动画过渡效果TransitionFunc‘easeInOutCubic’TransitionFunc Type名称值TransitionFunc‘linear’ | ‘easeOutSine’ | ‘easeInOutSine’ | ‘easeInQuad’ | ‘easeOutQuad’ | ‘easeInOutQuad’ | ‘easeInCubic’ | ‘easeOutCubic’ | ‘easeInOutCubic’ | ‘easeInQuart’ | ‘easeOutQuart’ | ‘easeInOutQuart’ | ‘easeInQuint’ | ‘easeOutQuint’ | ‘easeInOutQuint’ | ‘easeInExpo’ | ‘easeOutExpo’ | ‘easeInOutExpo’ | ‘easeInCirc’ | ‘easeOutCirc’ | ‘easeInOutCirc’ | ‘easeInBack’ | ‘easeOutBack’ | ‘easeInOutBack’Methods事件名称说明参数play播放动画() voidEvents事件名称说明参数started动画开始播放() voidfinished动画播放完成() void安装依赖pnpmaddvueuse/core创建数值动画组件NumberAnimation.vue其中引入使用了以下工具函数数字格式化 formatNumberscript setup langtsimport{ref,computed,watchEffect,onMounted,watch}fromvueimporttype{CSSProperties}fromvueimport{formatNumber}fromcomponents/utilsimport{useTransition,TransitionPresets}fromvueuse/coreexporttypeTransitionFunc|linear|easeOutSine|easeInOutSine|easeInQuad|easeOutQuad|easeInOutQuad|easeInCubic|easeOutCubic|easeInOutCubic|easeInQuart|easeOutQuart|easeInOutQuart|easeInQuint|easeOutQuint|easeInOutQuint|easeInExpo|easeOutExpo|easeInOutExpo|easeInCirc|easeOutCirc|easeInOutCirc|easeInBack|easeOutBack|easeInOutBackexportinterfaceProps{from?:number// 数值动画起始数值to?:number// 数值目标值duration?:number// 数值动画持续时间单位 msautoplay?:boolean// 是否自动开始动画precision?:number// 精度保留小数点后几位prefix?:string// 前缀suffix?:string// 后缀separator?:string// 千分位分隔符decimal?:string// 小数点字符valueStyle?:CSSProperties// 数值文本样式transition?:TransitionFunc// 动画过渡效果}constpropswithDefaults(definePropsProps(),{from:0,to:1000,duration:3000,autoplay:true,precision:0,prefix:undefined,suffix:undefined,separator:,,decimal:.,valueStyle:()({}),transition:easeInOutCubic})constsourceref(props.from)constemitsdefineEmits([started,finished])watchEffect((){source.valueprops.from})watch([()props.from,()props.to],(){if(props.autoplay){play()}})onMounted((){props.autoplayplay()})constoutputValueuseTransition(source,{duration:props.duration,transition:TransitionPresets[props.transition],onFinished:()emits(finished),onStarted:()emits(started)})functionplay(){source.valueprops.to}constshowValuecomputed((){const{precision,separator,decimal,prefix,suffix}propsreturnformatNumber(outputValue.value,precision,separator,decimal,prefix,suffix)})defineExpose({play})/scripttemplatespan:stylevalueStyle{{showValue}}/span/template在要使用的页面引入script setup langtsimportNumberAnimationfromNumberAnimation.vueimport{ref}fromvueconstvalue1ref(100000000.12345)constvalue2ref(100000000)constanimationRefref()constfromref(0)consttoref(100000000)functiononPlay(){if(value1.value||value2.value){value1.value0value2.value0}else{value1.value100000000.12345value2.value100000000}}functiononClick(){animationRef.value.play()}functiononStarted(){console.log(started)}functiononFinished(){console.log(finished);[from.value,to.value][to.value,from.value]}/scripttemplatedivh1{{$route.name}}{{$route.meta.title}}/h1br/br/Button typeprimaryclickonPlayPlay/Buttonh2classmt30 mb10基本使用/h2Statistic title一个小目标NumberAnimation:tovalue1//Statistich2classmt30 mb10精度/h2RowCol:span12Statistic title一个小目标NumberAnimation:from0.0:tovalue1:precision2//Statistic/ColCol:span12Statistic title一个小目标NumberAnimation:tovalue1:precision3//Statistic/Col/Rowh2classmt30 mb10自定义前缀后缀/h2RowCol:span12Statistic title一个小目标NumberAnimation prefix$:from0:tovalue2//Statistic/ColCol:span12Statistic title一个小目标NumberAnimation:from0:tovalue2suffix元//Statistic/Col/Rowh2classmt30 mb10自定义千分位分隔符小数点字符/h2RowCol:span12Statistic title一个小目标NumberAnimation separator;decimal,:precision2:from0:tovalue2//Statistic/ColCol:span12Statistic title一个小目标NumberAnimation separator:from0:tovalue2//Statistic/Col/Rowh2classmt30 mb10自定义样式/h2Statistic title一个小目标NumberAnimation:value-style{ fontSize: 30px, fontWeight: 600, color: #ff6900 }:from0:tovalue2//Statistich2classmt30 mb10自定义播放和动画时间/h2Space verticalButton typeprimaryclickonClick播放/ButtonStatistic title一个小目标NumberAnimation refanimationRef:fromfrom:toto:duration5000:precision2:autoplayfalsestartedonStartedfinishedonFinished//Statistic/Spaceh2classmt30 mb10自定义动画过渡效果/h2Statistic title一个小目标NumberAnimation transitioneaseInCubic:from0:tovalue2//Statistic/div/template