vue3 | 数据可视化实现数字滚动特效

杨利霞

vue3 | 数据可视化实现数字滚动特效

前言
' q7 b1 l% g) h, t$ z* @- Cvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
8 N; m( D3 r( L( y  ?0 c: rTypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


思路
) O. R" a! r1 }7 O& |使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
$ G! o, e; Y  f2 A
) [* J  y3 u8 m; R4 o# s2 P; t文件目录
5 n$ g/ p$ t; x0 |
# m) n8 b& s$ C4 X
使用示例
" N1 U8 U, Q+ m4 A; Z* b7 R* L<CountTo
8 X- k$ Y1 f0 B* J9 y2 ]; e :start="0" // 从数字多少开始
3 E" v! |0 _! t! J* q* _; O :end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
0 I2 d" j" f) u- d  A/ } suffix="rmb" // 后缀符号
/>
1
& a* m' t4 J, r. Z' b1 n' h7 u2 K2
3
4
$ F6 f+ V* D7 p+ l6 E4 q5 y/ [5
$ [) u. J9 w1 l6
7
* G9 b9 v, ~1 u% `4 M2 |8
7 t& V. `! c% }6 W; G9 d; r7 A入口文件index.js

) j& s+ h. @" B& `( U6 Mconst UILib = {
  install(Vue) {
    Vue.component('CountTo', CountTo)
  }
}

  M/ |1 T' {) S7 x) k/ Aexport default UILib
# a- P1 U9 G  h/ i' W
8 {5 X9 e0 M9 {$ q0 e1
8 |& E( w. x1 C2
3
$ u( \2 ]* o2 e" Z& W. Q1 A' }/ @4
8 g0 n5 F* z% X) A2 R/ y5
6
  k: F5 v0 n  c; M, h( s/ }4 h0 p7
8
% n4 l( O/ l9 r$ u6 x: N5 v9
main.js使用
5 D: ^9 H$ q) ~3 L7 F) \6 b$ Q6 f% \import CountTo from './components/count-to/index';
6 @8 J7 l  O7 A5 d* @0 C! Oapp.use(CountTo)
7 }" _" D% E" n0 `+ |2 ?0 p1
. v! p6 e" ]" S2
9 g8 u! `. e) m- @requestAnimationFrame.js思路
) \4 l+ A  v2 ~$ o8 S先判断是不是浏览器还是其他环境
! h3 u& s+ k& H) a5 K  j" Y% L# N如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
' Y; `+ i- E3 m导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
  @" m& Q0 u5 O, l& {" Vlet prefix;
0 A* n* |5 `7 S  U& U/ G, Slet requestAnimationFrame;
let cancelAnimationFrame;
1 a# C. b" q; I; q* q( {  u// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
0 o1 S4 x' x* s4 Y; x7 r) u        if (requestAnimationFrame && cancelAnimationFrame) { break }
  c( j* U) j6 M3 r1 t% U  p* I        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
+ t# B% Y4 O) Z    }

8 _0 f4 H7 y7 |' d+ L! E  //不支持使用setTimeout方式替换：模拟60帧的效果
8 x1 S8 g1 X1 q. J+ y2 ?- P- R2 G  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
! W! `' o  L( X% m    if (!requestAnimationFrame || !cancelAnimationFrame) {
2 n: ~) o7 W, C9 R! n: T3 z8 l- j  D        requestAnimationFrame = function (callback) {
0 j& q% ?: T( C  i9 r            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
( k: |+ g! V2 y& c            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
- r' B$ ^( ]- [" j' G2 b9 ?                callback(currTime + timeToCall)
" e& L6 ?9 k" O# r6 y1 ]' R0 f# u2 k. y            }, timeToCall)
            lastTime = currTime + timeToCall
' H5 h* s$ u" q            return id
        }

        cancelAnimationFrame = function (id) {
! _+ V0 j7 A  {, ~4 l5 a8 Y/ `            window.clearTimeout(id)
2 v. b  E9 Z: a        }
    }
/ T8 j8 I6 w  c9 S( E5 @2 T1 p; j
, D7 q. v, X8 f1
2
3
' k6 i3 \# L1 O$ _' O: K* q) J4
" G# ]/ ^9 x( O7 V5
6
( N4 c$ q& [: b: Q  v3 F( _4 S# E7
8
: \# C, O: z4 L3 b9
10
- G0 G7 ^0 O; l; l: D2 q4 Z/ f0 {11
1 T9 e2 s5 f; O/ m7 D12
2 s4 R( g7 i" c* z" i13
2 T: X- Q9 I8 C2 _' L& M; J14
7 s1 d* f' X" f3 C# D/ u15
" O- I( u/ w$ U/ A+ g16
17
% T2 F+ t8 V9 z9 |$ a% v* ?/ R18
' I  A1 _- N; ^9 Y4 C19
20
21
( J1 _7 N9 F# m22
23
24
5 U6 P/ M% Y- g; N25
26
27
- H: X, q, I9 w28
29
30
31
32
8 I! S) X2 [# U' h6 O8 a完整代码：
requestAnimationFrame.js
! @" s1 P: m" D3 s, X: i
let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

/ {5 `3 U- l5 i: m/ p* D3 Xlet requestAnimationFrame
let cancelAnimationFrame

// 判断是否是服务器环境
" ?) c- q. w& w) \const isServer = typeof window === 'undefined'
7 N* l- o* m: X: Y9 o8 q8 h/ Jif (isServer) {
    requestAnimationFrame = function () {
        return
2 P6 `: \$ N9 P/ w    }
    cancelAnimationFrame = function () {
) e: }' G2 _; D4 p8 m7 W& D. K        return
    }
} else {
7 c' L7 l% e: @8 h/ f    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
1 j& h% ~* K' G( }7 h2 U    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
+ l6 @8 u* |4 L* \: r" `    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
0 h* @% U4 e$ ~! ?9 R    if (!requestAnimationFrame || !cancelAnimationFrame) {
( O" P1 O2 F* I% F        requestAnimationFrame = function (callback) {
2 J; n$ i7 U% R! s            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
! T4 f6 A* R* |3 ]: w$ Q; d: J            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
& @4 _( c2 t# D* d            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
, }' S4 {  @4 m7 n8 r$ n            lastTime = currTime + timeToCall
( q  \9 h+ R% E/ ?- k7 u- X            return id
        }
8 f. f# E  M7 o3 C6 J) e2 g' ], p
        cancelAnimationFrame = function (id) {
- N% V; f! h* ?            window.clearTimeout(id)
        }
) ?! ]: K+ r. X; @# a, h    }
* g% Q8 y  G7 x1 h}

6 L+ Z/ I  H8 O! w$ |9 ~export { requestAnimationFrame, cancelAnimationFrame }
. N) O6 p/ ?' m. E% G

1
2
; @% D& m( {9 f. f+ v0 E7 w3
4
9 ~1 F+ Y7 F+ ^' N4 B% }5
6
# a) X4 Y) k" u. g. \; P7
8
9
10
11
12
13
14
# G. g/ C3 y! d9 X5 m, }3 H) m) a15
- ^! F1 M. I  S  {0 n16
17
18
" J: _$ \" u& D/ Q& `) W19
1 U3 R% O1 ~% z0 F/ \( _20
% {0 G' i' S9 W0 e* ~. ^$ O21
& @3 k8 M' V! Y0 q22
23
24
0 Y; m1 ^* I* O7 @2 \6 ^25
26
27
28
29
30
31
& J' W4 \3 o6 R7 ?# r$ z32
* e4 T, B+ L4 L# a8 d) V- h, j1 m& N33
; Y6 f' u! \. S34
35
& i" r8 X1 f4 a, V36
37
38
39
5 U- o0 F) g5 [( ~40
41
42
43
44
, g8 ^0 S, L! V) R( Z45
46
47
7 H! L: c9 ~) Z6 q8 Z1 H2 K2 n3 |48
CountTo.vue组件思路
6 Y( u6 B# k0 B. `% p1 T首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

% ?2 Y* n+ X/ e2 J9 A% C引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
% _2 E' y9 }: v8 g- s# {. X需要接受的参数：
1 I8 c# K; I( }; |
; d( |" F3 W$ }$ [const props = defineProps({
* f/ d6 E6 h5 j% ~8 N  start: {
+ W0 |% F2 c8 L& Z    type: Number,
    required: false,
$ k; C. c& W( S" Y    default: 0
" r, \6 k7 T( L2 U  },
  end: {
    type: Number,
2 S% ^8 Q% z( R    required: false,
    default: 0
  },
1 y/ ^6 z; B" @0 D2 e! ^1 Z  duration: {
4 I+ R6 R% W9 k4 Q$ A8 d    type: Number,
; h6 b1 b; T2 y+ z2 {. Z3 ~& e8 A    required: false,
    default: 5000
  },
" x( D1 Q8 e3 ~  autoPlay: {
    type: Boolean,
$ o1 |/ Z# P  N% L9 B9 ?8 f; |% u    required: false,
3 ^7 J" X2 c- j    default: true
8 A5 U4 K2 W1 J; m  },
  decimals: {
    type: Number,
) |9 d/ d/ |$ I8 E    required: false,
    default: 0,
    validator (value) {
      return value >= 0
4 l& ~- W5 v8 ?( H    }
/ ^. M5 x& _! t  },
/ {& [" ]' d) ?9 Z2 N: G$ A& y  decimal: {
    type: String,
    required: false,
    default: '.'
  },
  C, O2 Y& {8 y& D$ M; d  separator: {
4 H) v  E% t( `, o    type: String,
    required: false,
    default: ','
  },
+ y( n5 @/ R8 Q/ t  prefix: {
    type: String,
    required: false,
    default: ''
  },
% b% N& Q/ {/ U! s4 C  suffix: {
+ b  `0 W& x( s7 L, o3 L7 _( w    type: String,
% O( ]7 Q4 {0 C2 T7 L    required: false,
- v' y" h  g/ e' Y) t$ s    default: ''
  },
$ Y% t0 Z* c, f2 Q5 B+ Z0 q1 f/ f  useEasing: {
# f0 T1 a) L1 P1 p+ M    type: Boolean,
: v' B" R# ]% }) p$ `    required: false,
, z" e  n7 |* b: k! g  Y7 [    default: true
  },
  easingFn: {
    type: Function,
8 q$ b7 [8 |4 {, M6 u* O+ K2 m    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
4 R8 `4 W# P/ ], t; C" l})
9 Q  i" U. _" k6 b4 n$ {

1
( Z; l/ \0 E1 n+ j# P4 x. W: P2
) i9 p' m2 _; d; V# Y7 T3
4
5
: ~9 H" p! j: Y$ Z7 C, a8 U6
7
, m0 q% l) ^2 Y9 C# v* A! ^8
9
! I2 x7 ~' k: \0 U' c7 H# X/ ]3 u8 d$ c10
11
1 h4 O; [, y/ L3 D. |% e12
13
14
5 z* J# ?: W0 F15
8 ]5 p! Z8 {5 y7 b, F16
17
7 |  {( A  E8 Q/ ~' i! M$ u' N18
19
20
! g, l* `4 s, Y& l5 V21
4 e  t5 I3 ]5 R) n22
4 W( K) f0 t/ A" W* w6 L5 a23
24
; Y! Q% }/ O2 J/ [25
* X8 e& O! m2 ?26
27
28
1 [) ~2 j4 T+ Q1 J29
( I' g  Z1 c0 Z& b30
! M0 _7 Y* Q; C31
32
7 u4 g7 A: s3 M) s  V8 G33
34
8 y# M+ u, m  V: w6 f  `6 M7 R35
36
, T; R% Y3 j3 G1 x+ I37
38
39
40
. ]5 K( d6 s- x+ a, C' r41
42
! I3 ~' A  \4 @: B- a; j$ J43
: A0 }. O4 v1 D- {$ L+ f+ z. ]44
45
46
$ G: K: y) a. ^' J6 {47
48
' l( \% ?- R! }8 W8 C0 R49
% r$ ^' y5 A* q$ n) F50
$ [' ~5 G6 z3 }- R& l6 x51
# A9 S3 q+ }6 f8 m( D1 E: I52
: p3 g, m/ @' V# g. f* B53
54
- v( Y: I' [( `% I3 R' a: h4 N55
# A1 c! F' L) ~% X7 J56
5 x$ }" Q1 B4 j* `8 z  C57
: U9 @  r% o5 h3 e58
4 ?7 H" x1 y7 l/ g- V) \59
60
61
9 o! X$ m! X, ]- m- K4 o) ]62
启动数字动效

4 Z: }' O# b6 P+ _$ Z8 dconst startCount = () => {
9 {% y8 d$ N8 X; f1 V  state.localStart = props.start
) G1 z, O6 I+ p2 R. a- V  state.startTime = null
0 W* N3 D* b# t7 I. L  state.localDuration = props.duration
" I% P: {* P+ Q  v  q  state.paused = false
, h" c& _' E, a4 x- U7 W8 r9 x  state.rAF = requestAnimationFrame(count)
}
& W( _1 K( `9 r1
% }0 K- P8 {  L2
3
4
5
1 j  M2 M- z. Y/ r1 x6
7
+ C0 a3 }) Y" ]8 U; o核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
9 l0 _6 N9 }9 a! D  state.timestamp = timestamp
7 H4 J% a5 Q5 a0 F  R- q+ G  const progress = timestamp - state.startTime
6 S$ v; W" |, U& \+ k( y( t  state.remaining = state.localDuration - progress
2 q4 a* D+ m, i3 F% Y; K7 q: x( C% t  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
' N1 L: Q& S3 \) ^1 |) ?5 [      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
6 A" f; L6 a0 E$ ?3 j/ ?( F! ?    } else {
$ x4 ~  _" v4 _      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
( x2 t( H( f; h- T; T: P  } else {
    if (stopCount.value) {
& m  c; F8 i7 s, U' ?      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
  if (stopCount.value) {
5 Q2 [! p8 Q, w5 f- a$ |    state.printVal = state.printVal < props.end ? props.end : state.printVal
% w/ c8 A1 n2 b5 }. E) S1 U. ?  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
0 j- j9 `9 ?8 g9 `. I
  state.displayValue = formatNumber(state.printVal)
3 _6 Y3 L# ]! j  if (progress < state.localDuration) {
2 P0 N/ ~2 v4 c: c8 W3 y# d    state.rAF = requestAnimationFrame(count)
  } else {
, g! m0 a1 E0 }2 q- C    emits('callback')
  }
}
. a: Q( t8 h7 ?' G" @% H& {, ^( ^

// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
3 {; q* h$ b2 d  const x = val.split('.')
; c  a/ L6 {- p  @  let x1 = x[0]
! t$ x3 _/ d" \8 v  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
7 l( W/ g& F- E, I* a  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
1 Q7 V; c3 ?! r- g& |. K! {1 H    }
% M3 [, }# M  G' l& \. o  }
/ a8 O$ L8 ^! h1 G, t2 D* D  return props.prefix + x1 + x2 + props.suffix
4 N1 i% @1 s# X5 k) B8 Z  \% L}

1
. t6 X" n1 e  D. u5 W2
" z  E5 H4 Y. H& c& X3
4
4 P4 ~6 r3 _; |  H2 q, O) {+ N, D5
6
$ D) N- ^, C) k6 p* A7
8
9
10
11
% W' t/ ^6 H9 h  f$ a6 K# [: L12
+ v- m! g2 l- U" V8 T. K13
14
15
16
17
8 r3 E- Y  M8 p: |' ~# O- s( W7 n2 y18
7 x6 l7 t. A* h. S8 H  J. C19
20
21
; W4 v; b, w, Q, E' F- a4 r22
23
24
25
26
: w5 s6 @2 x8 {# ?) z* L5 y27
28
29
30
# L: d4 D2 U$ g8 E% w+ r31
9 D9 r. x* }4 a% d" S& K32
+ j/ |( z3 J" }33
34
& m/ k  O) H! B# K0 l35
36
37
4 V; Z5 T0 I7 @$ G( n3 f9 ^! ~# r, t38
39
40
8 C! v9 `+ P/ D: Z" `7 c% Z) L: T41
42
$ j4 v  `% n' k; x2 _2 }  z$ k; b' H43
44
$ b( s, O2 l8 M8 @) i: f5 i" ~# ]! w9 R45
7 ?; e  z2 [* \6 s8 I% |. ]9 W46
47
48
# q" K7 O6 \! X  s! p+ R取消动效
" A! L/ c8 P7 A# Y( G
' s( ^, u( q/ Z# [2 H+ N. c// 组件销毁时取消动画
, n/ x" p; }- x' q1 u2 jonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
6 a- U8 r7 K# Y+ t6 d})
1
2
3
4
5 s' x+ f; l4 S完整代码
% J8 B0 x. S6 P" ]; r  e' H
* q& o5 N' g" e0 A5 y$ l$ _9 j. R) E<template>
  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1 u' V9 _$ k4 Q( [// 定义父组件传递的参数
/ n5 b( ?% z1 B3 W8 U! e( |const props = defineProps({
  start: {
! _4 Q; @  a9 K; i8 ?7 G% r5 r    type: Number,
+ \+ ?* S, F0 I- d5 e' E, H    required: false,
1 \* s, A7 r7 u7 ~5 V7 E: P    default: 0
  },
  end: {
    type: Number,
) R! J2 O% m; ?: \& \# d    required: false,
" s7 f, ?& J0 ^; s. c    default: 0
  },
2 i( k% m0 O: Q) Y" Q  duration: {
/ q$ y5 c0 c* {8 X! d    type: Number,
    required: false,
    default: 5000
  },
+ ?" ?" z' S! q9 r/ ^" G+ m  autoPlay: {
( n; t$ e  F0 l5 v/ L6 l    type: Boolean,
- t$ y. x9 j4 q' D4 d! _    required: false,
' U8 y" ^  z5 `7 G    default: true
, \' ^( }8 t7 b/ X6 D' {: |$ Z1 q  },
4 s+ y$ H9 e' V1 [# `9 t  decimals: {
    type: Number,
7 z: v& M# o" A" v# n' ]- o    required: false,
1 {# F; \: a5 I4 P" P) k" c5 X    default: 0,
3 @3 M' L# u2 w  A# w/ h% @* L* e2 p% y    validator (value) {
4 t: B  h6 C1 Q7 u      return value >= 0
# H+ m# p1 p0 d0 M& D$ {    }
, P/ u- l' p: Z% L; U  },
  decimal: {
) L: C0 X/ _  s( o: j, Q, \2 Y    type: String,
    required: false,
" n6 Z, b6 ^$ u7 W% B2 B7 j9 z3 Y    default: '.'
  },
  separator: {
    type: String,
$ h) b$ A1 G- Y# d0 c    required: false,
( X2 x' J/ H, v    default: ','
$ ]& D- n8 S8 X  @. m2 d  },
  prefix: {
* }# M* C5 l* W* B6 x) B' W% f2 \/ _    type: String,
    required: false,
9 b1 [% @3 ]1 T( |( M3 K    default: ''
  },
  suffix: {
    type: String,
6 Y9 Q2 a  W1 v; m1 q    required: false,
+ h8 l. }4 H) ^& p: k    default: ''
  },
: n. ?- S" r+ n  useEasing: {
    type: Boolean,
    required: false,
; z2 k9 ?2 A; J) Q4 @    default: true
% b+ x: H) G/ D- ?; {) S2 b1 ]  },
+ P9 f# q4 q6 f" d1 b  easingFn: {
    type: Function,
( E6 V) ^2 t/ M% S2 y1 `. J    default(t, b, c, d) {
# W3 ~  V# R6 }2 I      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
5 t! F  j7 C0 V/ q7 x    }
5 n+ ~( R3 L1 i5 |6 \& K2 j  }
})

const isNumber = (val) => {
1 y! x/ v1 [( B: S, l  return !isNaN(parseFloat(val))
}

7 |% z, X" O. P* s6 ?// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
1 w" k9 P4 |& M- {9 r" m  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
( W. z6 q+ ?, u# l8 v      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
2 a+ @4 _- k3 p! w0 n8 h6 j& S3 ~    }
3 n. l+ M9 j8 X4 U  }
5 j9 x0 @/ Z! u  return props.prefix + x1 + x2 + props.suffix
' N( N, U* t4 v6 ], P# B8 g}
4 @( a+ F& R2 M- J
// 相当于vue2中的data中所定义的变量部分
const state = reactive({
+ c9 S7 `: `2 j) N% r5 |- ~  localStart: props.start,
  displayValue: formatNumber(props.start),
  printVal: null,
  paused: false,
/ d( ?. \3 S& m% O- ^  localDuration: props.duration,
$ b) k. I* D' ?  startTime: null,
8 O, _' b" R: a+ e  timestamp: null,
+ C4 T- q! b2 W, V" W6 \. J  remaining: null,
: j" a: D% o: f8 m0 V9 j  rAF: null
})
6 G3 {6 [7 {: Z7 g6 b
( `  s4 L' R0 x. A+ d0 I// 定义一个计算属性，当开始数字大于结束数字时返回true
3 x5 Z+ T6 P# `: Rconst stopCount = computed(() => {
  return props.start > props.end
* S5 U* R& V! F, C; `})
4 V7 T/ E, d: L/ B- C+ a// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
& w  T) K( n8 v: Fconst emits = defineEmits(['onMountedcallback', 'callback'])

! B; K$ P% C# Zconst startCount = () => {
' A. z' h  s( l2 a) q4 ]  state.localStart = props.start
  state.startTime = null
# \  ]+ |1 A& s/ Z  state.localDuration = props.duration
3 j8 q2 _8 Y" S  o$ K! V8 v  state.paused = false
  state.rAF = requestAnimationFrame(count)
: W3 E# U6 E: J" |1 m}
( `: e* X8 [+ j1 |
watch(() => props.start, () => {
  if (props.autoPlay) {
! r7 G/ g9 v9 U7 e( D. \# U# c  \    startCount()
  }
  N: M3 V$ w, L! U: w})

watch(() => props.end, () => {
  if (props.autoPlay) {
    startCount()
  }
})
// dom挂在完成后执行一些操作
onMounted(() => {
& M* B: o- Q% z$ _& a, f' J) `  if (props.autoPlay) {
    startCount()
  }
% k: _; Q  _# |& m0 l( d  emits('onMountedcallback')
1 P, ~* A* ~9 \  X. P})
// 暂停计数
3 H; `% E$ b1 e! h! Xconst pause = () => {
- p. d0 k* K; E9 T2 c0 q  cancelAnimationFrame(state.rAF)
}
# v, v  G4 b; Z) f4 g$ n) [/ c// 恢复计数
const resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
) l0 Z6 W6 `& f( z# b. s* F- f$ L}
3 {" B" t( Z9 e% B' C
const pauseResume = () => {
& A$ x! ]$ [- S6 e6 G9 }3 F. @. }  if (state.paused) {
, J1 |$ d4 Z% m  F6 Q    resume()
    state.paused = false
) a$ L2 B4 f6 B2 h) w0 H  } else {
    pause()
: N( D% `7 ~1 K  j    state.paused = true
4 x- V& h& I' e; S0 ]: q  }
}
  V" u/ C; k- o) b1 |+ e6 `3 Y
const reset = () => {
/ }! a2 [# P3 R* G& x: t& f& D  state.startTime = null
  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
}
1 F2 c' Y2 Z/ w2 [/ k5 E
- a4 x9 |, c. G- p3 ^" V2 @const count = (timestamp) => {
9 k3 w9 P& F, e" |! r8 P. F  if (!state.startTime) state.startTime = timestamp
) i1 o, l% [* }  state.timestamp = timestamp
  const progress = timestamp - state.startTime
+ V; a1 b" V6 b  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
& e1 ]* `& i# n+ S5 ?( i    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
  u& }' g! c( h6 P' ?4 k3 l7 O$ P    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
/ a( t  V1 C+ G: g7 @: l  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
: ~- j8 c2 J: L) p$ }      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
; N7 W( f  ^, @2 W  }
3 N7 {3 j, h2 \0 j$ \) l  if (stopCount.value) {
0 U, K5 c3 U& ^2 j3 {    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
( v2 ?: k8 {' [    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
- f, ^; g  B. @. B, ~8 K( W    state.rAF = requestAnimationFrame(count)
  } else {
2 z0 ~1 {6 ^8 Y# c3 i5 I  v6 i3 f* q( L    emits('callback')
  }
% A$ d0 ?7 V9 g- n  F0 `0 k5 u. v}
6 L* B2 M- O2 g5 o- m// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
8 l0 \/ o3 y% V4 l% C$ i})
</script>

1
: c: R2 L- q7 P5 O, s2
1 m+ D% X! f  }" }- T3
4
5
1 d2 N! j0 U, D6 V6
7
8
9
10
11
6 V1 N, F3 o* c12
) q8 F! t3 U) [1 ]13
14
15
16
6 f% V% J; u! u! ]$ a3 D17
5 N" {0 ]* ]0 q# K9 }18
19
' P* Q+ t3 A0 I9 A' o( F20
7 n2 _5 _8 z0 S; b' [+ T6 [21
22
23
0 R& ]8 {! j, W" B24
25
26
27
9 K% D) L. n4 N9 T28
3 q. a$ @6 O3 r( n29
6 P) t9 @. g% m, W1 o/ j- V30
7 z8 K9 X6 T/ ?3 r' Q# ]" l+ T. W* p31
32
: W0 I5 d) _9 B9 r33
34
35
36
37
' [, A" C: |' @" E; c# M38
39
40
41
42
5 E& P- o4 p" e& X0 W43
, J3 @/ E& B, ?4 H# h44
45
( J$ o1 m5 L  y. e6 P46
47
48
9 ~$ x* P3 Y1 j5 f" A7 ^49
: R5 G" E8 Z, c, p4 n9 I& o; \50
7 O, n6 M( J4 R& [: {+ [; H51
0 s( r  Y4 U0 T& F52
* @% D# O9 P+ i  U5 J53
54
55
56
6 t7 O3 {1 I6 K1 F: U% z# `4 Z  N57
$ S8 C9 h$ m* Z, V( S58
59
60
- x. u0 ]  p) E# a% ?+ i. L& S4 _# k61
# I$ W# {- a/ }' }5 l, Y8 g62
, p, T/ b( i) d63
! ~- Z9 X/ o8 L+ ?64
65
66
67
68
/ f6 a+ }8 d9 M2 [3 ~4 ^3 }69
70
71
' Q) i! p5 W8 A$ F8 w% W8 @7 ~6 L72
5 q+ D, R8 h5 l' h9 H: e3 I73
2 o' ]9 V6 S; [( R. S74
75
76
77
78
9 J$ c5 ~- A7 k* }) w/ h79
4 f8 d: |9 W9 E8 e$ {* C80
81
% I$ I0 M% @* F82
  @# @: p* M) i( ]0 F) i83
( B7 `9 z, N0 t/ F6 I. D5 s84
85
) P; S9 A7 w2 T! _, _86
, i4 U, s; g$ C# b87
# n- P" R) ]& Z' F4 @) L88
) G  d5 `! ^( o! c4 t7 z89
+ G: p0 J' ]% C  [* g6 i- N90
1 D0 P' h% B& ~  ?" f91
9 t1 J4 E7 Z+ R$ o. s92
2 t$ d5 u/ o+ M93
/ [% k! i: X- E; l94
: }$ S" U# O' G1 C95
96
# d4 {" o+ L9 D0 K1 f- h97
98
99
100
* B8 F3 E6 `  Y9 }( r8 X8 S0 P101
102
, D; S( Y3 W# Y' l- k103
' I- F. W' X0 v" p) ]$ s104
4 X! H; Z9 U' o" q; `: j105
106
107
( d" c) @, h3 g* I& ]! e/ s108
% z, O" O  P; i5 {" ?: k/ I109
) r. j+ R4 \& M. f110
: F8 O% T' `- R# ~111
112
113
114
4 x. Q; s, E: ~% C8 s9 i115
116
1 s% R/ A- d1 z- I117
118
119
% K6 z" T4 R9 D120
; J- q4 y5 O, |0 A121
122
123
124
125
126
127
$ K2 R/ Y4 }+ o& ]1 e! b128
129
( G+ M# N* V0 K# r+ G3 b5 E130
/ T# L4 o( d! h# |2 `131
6 P' c8 l. p7 ?3 r% W) v132
. v0 ?2 c5 b% p$ m133
7 ^$ k) ~' }' ]( F  x* o134
, W  s* M9 |1 N, z* r) z& N  V135
136
137
138
139
140
/ _7 p: {# V+ e9 H141
142
& q" ~; ^) _- r' A$ E' {. D143
. v! ^( Z* U0 `6 ~. _. ~144
9 |6 C$ o# H$ ?$ p/ }1 ?145
" n7 i5 W: o$ t* n7 T* W146
147
148
149
- Q! Q7 [" ~: ]* Q" o8 w+ c; D+ S2 r150
9 ~9 d. u3 D7 b( S/ w5 z151
/ P8 M5 l2 k! T152
& ?# H6 E- }1 X7 ~( j$ c2 @153
154
' l- l4 E! n: m1 E$ i7 A155
% _  R8 B0 S9 a* O( D! ~# Q+ q156
. Z- @  w7 x0 d' m8 p& N0 R* i4 [! [157
7 J( {* u0 D, X" j158
159
160
161
162
+ }0 m: l$ P4 n& O163
164
165
4 A) e" ]9 P2 C+ E5 S( r166
+ P6 g: e! p1 S  E4 ]167
, b; W1 F% g8 ^5 p6 {3 B168
' p8 p0 D0 l! ?- z169
170
171
8 ~" T; P% }! ^172
$ ]. {1 ]" r- s; D% [# r/ V! H173
* C+ o1 x* t1 k1 d3 Q4 l7 t" `3 I5 J174
175
6 c$ O! F4 _% r0 r( q176
177
178
0 K1 z  A* t: e6 u! o' b% Z9 y  Q% y3 d! J179
180
$ h% P! I' L# z; a3 b181
3 p8 `, y& d! b% P$ E: c3 W182
$ H* |0 Y! }- F183
+ w" i, `. n4 r184
185
( t* L& H: s3 ]- M4 j9 s- l& N( N186
9 E& b0 S; I- L: K0 |  v187
) q4 D7 Q/ Q/ m$ M188
189
190
191
192
8 }3 f: c4 B& u4 ]- s0 a# e  x5 a193
194
195
" p, }' z% p: a7 n7 x196
0 `0 l2 A) r; s# K. x197
4 V. w! r7 I+ _! g+ d2 v198
199
  B& W* I+ Y% J7 O+ M) B$ w200
201
202
/ |; h  M) p% b, `# M3 F总结
7 M+ f6 T! T. K7 M4 U9 A" B9 z: Q自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
" T" k' s6 e3 R4 I
demo演示
. @5 m. o& P* j5 Y+ v, o后续的线上demo演示会放在
. B, @7 G' W! V. k5 I" x* g0 Udemo演示
完整代码会放在
& n0 u- l( J+ Q" k个人主页
# U& d6 {/ n# l4 ^
* T9 p: B; f% C, w( H希望对vue开发者有所帮助~

) W! m/ h  C5 z; P) z个人简介：承吾
5 x  ?- N: m: o9 N! S: l* y9 n工作年限：5年前端
地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！



' B6 \+ K0 G7 F
! O& e  U  a% n7 F5 [————————————————
, C" S" q1 A" m" ~# o! W: x版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
* @8 `- o! e. f" m: [$ K7 z- a原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847