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

杨利霞

vue3 | 数据可视化实现数字滚动特效
# x! I2 r# G1 a
前言
6 U8 q7 P8 @4 K- o) @vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
3 W" Y$ a9 L) XTypeError: Cannot read properties of undefined (reading '_c')
3 p+ l4 J$ @1 n6 S的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
4 S- ^  C* \! A- I" @$ P

6 Q, @: u7 V, C思路
. H- p1 ]( \4 C* R5 l0 `. w6 R& ?使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

文件目录
, X' a7 x4 T2 ^6 L) T

使用示例
<CountTo
:start="0" // 从数字多少开始
( F$ y0 s+ j6 v! ^1 M4 P :end="endCount" // 到数字多少结束
  O+ b% V5 n( H/ [( \; i :autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
6 S; V  k0 N0 g; d! h  w />
5 j" K( u1 k' P' ]" e1
2
0 r+ g# r0 o4 k0 [3
4
, r% B! y: v+ c' l3 w& t* n5
6
7
8
- y3 u5 A" `; H* c" N& \入口文件index.js

const UILib = {
% o' I% s. M8 l; Z8 }: h9 p  install(Vue) {
" t# u* r: q; C! A    Vue.component('CountTo', CountTo)
- X" v, U7 K7 t, F& ^  }
}
! o# P! x0 d( e. r/ V  i
) M* h( ?) S" T$ U8 k9 ]export default UILib
% ^5 t' a  U7 V6 s+ r* \  u% {
) K& M, T/ f+ L# E& l3 z1
5 l5 k; J5 r  s4 Q3 \2
2 M" ^* u" h$ |" _& v3
+ ^/ y. ?9 c7 Q4
- h% z8 F  Y( F; R4 [5
  W2 U, Z5 l! ?6
7
9 J' n  [. Y* z% a9 U8
% d* G4 h8 R- r  Q4 `0 C9
main.js使用
/ n! t: s, u4 w3 e+ `! h! timport CountTo from './components/count-to/index';
app.use(CountTo)
: E( x' {: j" V# h1
2
requestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
' ?1 k- B% b3 H. q% q( J如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
$ S7 L. Y  j/ {, k9 a% }0 I; L3 C导出两个方法 requestAnimationFrame, cancelAnimationFrame
3 V4 E& k9 y# \" g4 O# R各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
0 Q" p( b" m+ L' N' F增加各个浏览器前缀：  
let prefix;
3 s4 ^& N/ w7 |6 V6 p$ ylet requestAnimationFrame;
8 C! H8 f- e! T& p7 ?( nlet cancelAnimationFrame;
  n$ U1 ]' ^. @1 [  G6 c// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
8 u7 q3 r% J* W- N& X4 T    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
. I- L2 D) p1 X# ]+ g5 s4 ]        prefix = prefixes
3 t' `+ C5 V. n* m3 s: R        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
+ L% `8 \; n- M    }
  e! m6 Z+ r+ N1 I
  //不支持使用setTimeout方式替换：模拟60帧的效果
( f6 s9 w0 U6 _0 m/ i( h, w( d" W3 D  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
: R+ U% `% I1 H5 r8 c" u& {    if (!requestAnimationFrame || !cancelAnimationFrame) {
! b+ f9 A7 X# l7 D: `6 s1 e        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
" f- e7 I0 w1 u( g            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
; v* F8 h$ h# Y' f0 o; ~            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
. _# \5 [- G, ~+ O: L            lastTime = currTime + timeToCall
" \, J5 |3 l# ?! @9 x. n% f            return id
        }

        cancelAnimationFrame = function (id) {
0 i6 ]4 _- h1 b5 a            window.clearTimeout(id)
" }5 t! C4 c1 Q        }
) }& G1 y* s6 i! f    }
& N# y4 v" J$ c$ |0 I/ f, D
1
2
3
4
5
6
7
8
8 \9 B, Y+ b/ @; c) H: x/ ^' W: t9
10
/ x2 c" w( W0 ]0 \( z11
12
13
& f" m1 O9 ^! H7 X  S4 t: V$ ^14
15
% @4 S4 ^' V: [9 C; |* Y16
. s1 n1 c* ~; B17
) s# F' m5 O4 Z6 g% J18
19
: ]5 S6 j. o" {  n' Y' H  Z5 W20
21
22
. Y# f! k6 Y8 p3 R23
, h* M& m" E0 |* }% f& n" r; a  i24
- D$ [# S" {3 f8 ~25
26
27
28
29
  A, f5 }, ]5 j1 ~2 O6 K30
31
32
8 |6 Q6 Z- @4 {. K5 P- C, x, m6 X完整代码：
9 E. ]" f+ p3 @( _9 `* k; p2 prequestAnimationFrame.js

let lastTime = 0
2 I- ^8 k8 I2 V4 h; l+ q5 Wconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

let requestAnimationFrame
* r  ]: o% a( ilet cancelAnimationFrame

// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
8 \/ C1 K+ {7 Z$ ~7 }" |2 Oif (isServer) {
    requestAnimationFrame = function () {
        return
6 k, n1 A5 G! S+ i    }
( @1 N8 V1 c( y    cancelAnimationFrame = function () {
% F6 x/ g% E+ \2 m3 W  C1 L        return
    }
# Z$ X( ^0 {6 f( S( o} else {
    requestAnimationFrame = window.requestAnimationFrame
5 H, n% G7 Z/ n- d6 o. A    cancelAnimationFrame = window.cancelAnimationFrame
# k( t7 k# [9 v- P5 R    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
, v  B1 K, C% }) U5 }- W( t        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
6 Z. J. C: L. P0 }( J4 W- ?4 M        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
8 {* X% L9 j& @$ C    }
* x; J- x: u. n6 [
  w, u2 l1 o( W# g: P    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
, M7 I- q# p# _( i# P$ T, E& H        requestAnimationFrame = function (callback) {
& [. M1 c/ N. ?$ Y5 d, I- z            const currTime = new Date().getTime()
: i! R& L+ H) p, P4 c+ n            // 为了使setTimteout的尽可能的接近每秒60帧的效果
- O" k6 w- r; S  W( W/ e! H            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
0 l' k# ?# N; |! \' _$ D7 r                callback(currTime + timeToCall)
            }, timeToCall)
2 Y3 o  H3 p9 X9 _9 g            lastTime = currTime + timeToCall
            return id
        }
: D4 s, [: S" a, r. z! ?( O
. _' E# q8 ^9 D' A% g& h        cancelAnimationFrame = function (id) {
! z) v4 |/ k% X+ e9 U9 u: ~            window.clearTimeout(id)
# V  H+ C8 `1 t        }
    }
}
2 F. h# S. [! x: ^9 \6 Z
export { requestAnimationFrame, cancelAnimationFrame }
  h0 a( n3 q! k4 w: o: T# p5 Z

1
2
3
; d. o  P& F* J9 E3 V( R# b4
  a. f; }$ [5 y6 A2 Z% I5
6
7
# t# \; I& j' E" `8
  c' z  \8 l, `! M9
10
11
" r- E. N% O5 |12
$ B* i# U) T7 {: ], e5 f2 R8 E5 r13
14
15
16
$ ?6 i( t: s+ {& j17
! y3 B! T8 A' k  ?18
! O" q4 a9 A& z6 Q0 Y7 i! j; E3 ]19
20
21
22
9 ]0 c, O* J# |- O6 w" s23
5 U: m) F$ F, \, f; ^24
/ X- m2 y/ M0 [- @25
26
7 b/ q1 j& _7 M+ O" B27
28
29
9 d1 U0 v4 J% I: ^30
31
32
33
+ E' N2 S( v. _( |34
) q7 Q2 o' Y4 B; F0 c35
" T3 _9 o4 I5 p. }3 W: Y2 L- \3 |36
37
; Z; u, y* n' r% O) T9 x38
- l% L5 S) E! S& u5 M39
40
41
8 ~. h' s& X& ~$ E/ \+ H8 Y42
* J0 |/ _) q/ U2 j; C2 ~* r43
+ y9 Q7 b- a9 w5 p7 }' @44
, q; n- i4 s. m- d' Q2 V! b45
46
% M3 L( ?( w' g: j* Q  V% L47
48
CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
6 R' A$ d. F, c" f+ K, o+ r, u. W
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
4 Z, @4 g: ~! H5 v需要接受的参数：

( U( q9 p( j+ B5 M5 rconst props = defineProps({
) B9 q/ _# P7 w2 Z# ]$ T  start: {
    type: Number,
    required: false,
; z6 o/ e+ N) T4 {+ g0 W( k( X    default: 0
5 U# O; ?: d. P8 ^+ J  },
: K) b3 L5 y' S/ p2 R3 r  end: {
. _' r1 V0 c( f# T" H    type: Number,
    required: false,
) t" J3 x1 n  C& ]    default: 0
  },
  duration: {
- U" _# [' P. t/ M0 ~( _    type: Number,
    required: false,
    default: 5000
  },
% n' {' w+ `6 g! }  autoPlay: {
1 C1 E' m3 c# V* L% o5 \    type: Boolean,
    required: false,
; V) A- K4 n% ~. q9 w/ ?    default: true
, Q9 }; g. s; v" {! I! c2 {! b$ Z  },
# \! Q3 ?$ B: i5 V* w" b  decimals: {
    type: Number,
    required: false,
( e8 E& A. M. M    default: 0,
2 W6 {# w9 P% `0 a6 D+ h3 G7 u, O0 K    validator (value) {
( `# g- j- z! G$ y8 k      return value >= 0
    }
  },
  decimal: {
    type: String,
! P4 o, Z( X# T# E8 V8 W    required: false,
$ c1 K7 j7 n; P6 D  k: m& p    default: '.'
8 F$ Q/ B6 G& Q8 F$ u  },
! K- X" q  H( i6 `- E/ d  separator: {
. M* G/ m  `" X/ h2 g" U    type: String,
    required: false,
9 l* P# O) D8 y, Z7 D8 i% N) `) e& m    default: ','
2 @& ?( G2 I3 @4 Q  },
1 J; p' s; {( r4 i  w! R+ _2 k7 i  prefix: {
/ l3 k1 m& H9 O    type: String,
# ?: a7 u* c1 c) M% h% a    required: false,
7 p# V& M5 W5 K- h    default: ''
  },
# c2 n) i! e8 E! e: M# D  suffix: {
    type: String,
    required: false,
$ V* w. h/ J3 v2 C6 }/ F    default: ''
3 ^5 `" s+ e' p! L" v  },
5 E2 H4 V2 Q" j1 N, ?& [& N; g  useEasing: {
    type: Boolean,
    required: false,
' L& V; X" e# Z/ n9 _0 O    default: true
  },
  easingFn: {
    type: Function,
1 T# c% y8 U0 K5 ?$ b3 x, L    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
4 T4 B3 \9 `5 I$ M5 h  h  `# p: m  }
})

: m, i6 g0 ^" n- @$ `: R# ]) M
3 N0 Q$ I3 K! \) U. B' o( e1
) Q8 a! q- e) A1 F: r2
3
4
5
+ q4 j& i) m! l" g4 U+ U$ o6
7 Z* k; q; J5 j# Q7
8
9
10
' Q% t1 T1 l# m  R11
" W$ \. N5 q, [/ x$ \  _# \% D; |$ s6 O12
13
1 `! j6 L2 D* {; a' F+ u% |/ _14
! s2 |, Y* y8 x15
% r1 v$ E$ u# i/ _8 F16
17
18
19
' I) f/ t% }  D( v! ^1 G7 J0 z1 a20
* Z; C) ~- S/ g21
22
5 s$ j" R1 T: Y- _1 B4 R5 Z, ]4 k23
24
25
% m9 F% A! c1 w* o  h) P& U. p26
9 c, a% G+ \+ r% w' @27
0 E" s, K+ o! v# m5 V1 {28
29
30
31
% s6 E8 O/ J1 h7 z6 [5 W32
33
34
35
36
  O5 u# S9 ?) q% t( K# f! |37
2 o1 `( B7 G0 C& D1 r$ j  a; Z38
39
40
41
$ n# h& }6 M: z1 j7 {" K4 [, `42
" y" x  a2 q* E  w% X6 i$ T3 {43
9 O4 ~* Y3 G  D# Q# Q5 `4 z0 B1 d44
4 C5 E2 a9 I$ \45
46
# q8 n( h( \  G47
0 W/ ]1 a- W. L% @" h' k( a48
49
" n* ]7 d" W6 t$ d0 W, v50
51
. F9 W& W! _/ P5 q! @52
53
54
% ]$ j, Q; m9 R' s8 ]' G- V' a55
6 f8 X8 i8 P/ Y7 I' {$ r+ z  T3 o56
57
58
) `' O, D, ^6 l* b2 L( Z' X# E59
60
  e: P5 i$ q" ~' s61
2 O& Q% e& w6 l5 g( r& o- A62
! b4 Q. M4 J/ i3 f7 D启动数字动效
' I/ y8 Q( L3 j/ q
const startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
. p4 t4 T$ k. R, B  H  state.paused = false
5 P. ~/ Q( x4 V; d# c  state.rAF = requestAnimationFrame(count)
}
/ p; p% R) G7 A! |1
2
3
8 N  e$ d& Q/ {% I& i4
, m" k& ]4 ^2 L6 A2 u5
6
7
/ n# J1 F8 V% e" X- O( V核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
' K' n/ |1 a8 Z, K  state.timestamp = timestamp
  const progress = timestamp - state.startTime
- n% @  G* M4 w7 O, t4 M5 w7 ?  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
0 T4 S8 ^( X9 _! w% G. T( ~  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
7 ]# x$ E3 a& A! ]9 Q2 _    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
& R9 P. m1 Y; S; P6 y, |( P8 \: p    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
; T' d: n1 m" i# ^1 Z  }
5 s; o& U1 t3 q" X, D6 Q8 X5 U  if (stopCount.value) {
# q6 |9 D( ^6 A% f    state.printVal = state.printVal < props.end ? props.end : state.printVal
5 r# P& ?* I' [8 @# W" L  } else {
" n# H# l3 H0 z0 {    state.printVal = state.printVal > props.end ? props.end : state.printVal
1 c" c9 t' p: n  }

  state.displayValue = formatNumber(state.printVal)
) I5 a, s5 o5 [0 \0 Y  if (progress < state.localDuration) {
7 {( P% C5 R% j5 @    state.rAF = requestAnimationFrame(count)
  } else {
' N# q1 @$ ^% B  S4 G0 F3 T    emits('callback')
  }
}
% p9 M" H0 ]+ ]7 n
* j* q: A( \4 S# t( P+ ?# ?4 Y4 v
// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
7 G! B/ U* \9 [& a( f  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
# |! m0 M( U  }& ~8 t$ c  const rgx = /(\d+)(\d{3})/
0 t9 c$ `9 ?, S3 O  if (props.separator && !isNumber(props.separator)) {
* J# ~3 C4 o$ {$ G( V* O5 D    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
& Z, f, A5 m% |    }
  }
) K5 W9 }: K5 \+ `  return props.prefix + x1 + x2 + props.suffix
' x) d, K# m7 Y8 R}

! S  |) |4 _) l3 R7 K1 |1
2
; M; @. m1 W1 T7 G3
2 ^7 Y  @! {, J! M- c9 E4
5
  O8 f/ p& `/ d2 H5 K3 o6
' \1 p, @0 V4 t8 L7
8
9
4 F/ O/ K2 F' M8 V10
11
' S$ F4 K0 p$ \5 f8 @4 c12
; E% U: L0 J: i+ M+ b/ F13
14
15
16
17
% _4 T9 U  s$ N. R' h0 A18
19
20
3 O1 i1 b' |% j# i- Q21
7 Y+ Z6 l4 ~1 M; N+ e# u3 y22
23
/ W5 `( ^8 I, `, D  W; @24
25
26
27
/ Z6 t. ^( p/ s$ @) Z. U/ d28
, A1 J4 l! Z$ ~29
30
8 a5 B; T9 L* k: C31
6 z3 ~* ]& M9 q" q8 S0 K+ `$ T5 P32
33
5 Q; Z1 S* F& z34
35
/ v- |/ Y5 A, l) n- T* K36
37
38
39
' |* q$ u; \& m& \40
41
42
) Z9 B; i- Q- I( e8 [: W  x! S43
44
5 u/ b8 `$ r! O1 I( f7 N6 j0 M6 l45
) G0 A  ^8 T* X1 X$ `2 f46
47
- P$ `! R; x7 |2 Z( g1 ?$ _8 {. i48
, }8 d6 c% H) G- [! U取消动效
  w, x  F4 h$ L3 ~
// 组件销毁时取消动画
9 o& T! x+ J. y$ g0 B# E- wonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
1
7 A; K1 X/ q4 a& [! z4 c; \4 R3 ?2
, X! d- s4 S- m- Z; n( Z3
4
- P4 P5 K. B! C$ E3 d! t# e# \完整代码
5 C; a$ h8 |/ K  y! g
" F! Y) x/ W( V: e2 `! V3 C<template>
; ^: R' k/ k/ w5 T( l# K. m& [; F  {{ state.displayValue }}
  X+ [- w; }4 `! L% O6 J& w</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
" e' C8 ^+ y; ~import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
+ I$ |1 T3 p6 y+ p// 定义父组件传递的参数
const props = defineProps({
  start: {
- Y& E7 v* Z( `& ]8 t    type: Number,
    required: false,
    default: 0
  },
  end: {
0 _6 d1 m5 x9 e) l    type: Number,
    required: false,
% P2 \6 C! t! O7 [    default: 0
  },
2 _* f8 n% I' [5 o7 o  duration: {
$ n0 t' O4 [  l  X, C# @    type: Number,
* }6 E0 I$ c2 Y- v9 b$ Z9 r    required: false,
/ J: a0 v$ e, p: y( Y. y9 W    default: 5000
: j2 u7 @# Y- |7 P/ Z  },
. a' L/ m8 x/ W  ~& G  V  ?8 D* d  autoPlay: {
    type: Boolean,
- `+ ~0 l6 ]' \' k. F" o    required: false,
    default: true
, ]# g' n- v% ^  },
7 Q: x% P0 @) o* ]/ `3 A( k  decimals: {
    type: Number,
- {$ p1 C1 \* E: S    required: false,
    default: 0,
) K, \8 R6 ^- l* H% g: ~    validator (value) {
      return value >= 0
    }
  },
  decimal: {
* s$ m# C7 e, m8 G0 k1 \3 |    type: String,
    required: false,
$ V( @6 h6 e. @" L    default: '.'
  },
% n8 e, E0 S+ ~9 F/ {! v0 ^' O  separator: {
    type: String,
    required: false,
2 r4 X7 j4 K1 W$ R3 @/ G4 j    default: ','
- d) r4 C2 ^% M4 e, n  },
  prefix: {
    type: String,
    required: false,
    default: ''
  },
1 Z9 r1 [9 x" p, `# c  suffix: {
- ]* ?5 }* ~7 B& D    type: String,
    required: false,
* x/ `$ t9 W) _    default: ''
; w4 q; }. q  [2 O( J) y  },
  useEasing: {
# I8 E- m3 p% ?1 U7 q    type: Boolean,
    required: false,
2 r6 g  n% T6 G    default: true
5 j* K# h6 @$ L  },
  easingFn: {
    type: Function,
9 v) a! H& q5 f! X; _    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+ Q" L/ \* C7 d, Q6 }! @* Z, b# t    }
  }
3 Q* I5 m* c7 Y7 M, `7 c})
) M5 E2 W! ~9 G8 F5 J# Y; J
" `7 z, N1 y& y, ~const isNumber = (val) => {
3 i/ O# K% X. _( x* r7 i0 s1 O  O  return !isNaN(parseFloat(val))
}
6 G2 v/ c' y# O4 v4 b6 m
4 U0 F8 L  E+ L1 Z$ u// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
( \. p$ l* F4 i4 ]+ U0 Y  const x = val.split('.')
, z; v& w* B( K  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
) ^  ]  w8 k$ {+ o1 M8 n  const rgx = /(\d+)(\d{3})/
* h7 o/ }. e1 a6 O  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
& G% t* `  H% f4 V3 f( |  }
: B, Q; W, t' a  return props.prefix + x1 + x2 + props.suffix
}
. Y6 [2 V  l7 y
// 相当于vue2中的data中所定义的变量部分
& \* z# @! |" V, xconst state = reactive({
6 b" U3 u, Z; w% Z1 c& B2 X' @  localStart: props.start,
$ }: l( ^# Z- S4 c& s  displayValue: formatNumber(props.start),
  printVal: null,
  paused: false,
0 V8 d2 _0 k0 {8 Y2 ^; C) \  localDuration: props.duration,
  startTime: null,
4 d6 Z  l* i( g7 ]' i+ Q  M  timestamp: null,
  remaining: null,
  rAF: null
! K; p3 u; y5 r+ s/ ~})

  ~; z& _- ^6 ?" f# G7 r& d, ~// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
3 i! e( n. r9 z  return props.start > props.end
' f& Z" H% c5 z: c( b})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
, c- j  g5 u# y8 q' C7 [' I3 Hconst emits = defineEmits(['onMountedcallback', 'callback'])
  c9 p0 c5 D" m7 w( k
const startCount = () => {
- \6 c. V& D8 D3 d: h5 e  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
5 @& A+ i- p6 ]' ^% ~  state.paused = false
  state.rAF = requestAnimationFrame(count)
}

8 k( d$ A+ N: @6 Y8 O7 }watch(() => props.start, () => {
  if (props.autoPlay) {
    startCount()
$ j+ `/ d3 M4 E$ P9 z, ?. _7 ^( c  }
})
) y9 o& Z3 j  v' {# h
# e$ g, Y( f' {* x  k0 Qwatch(() => props.end, () => {
  if (props.autoPlay) {
: R, ^# S- ?5 }+ J( ?    startCount()
7 C. n$ y* f: U" r) u% L  }
; V' Z3 P* z3 o+ ^, }})
// dom挂在完成后执行一些操作
onMounted(() => {
& F6 ~; R6 @1 l0 ]: B$ S& @/ O  if (props.autoPlay) {
  g* [3 E" N* s7 A" |- ^! Y8 W. K    startCount()
  }
  emits('onMountedcallback')
})
// 暂停计数
const pause = () => {
: [' v5 o. N$ [1 H7 |& k! h  cancelAnimationFrame(state.rAF)
}
; M( v* @' D, \// 恢复计数
; d5 o- F5 Z; [; }9 t  }const resume = () => {
  state.startTime = null
$ S4 N0 U+ ~. p# h2 k- E; w% D  state.localDuration = +state.remaining
  state.localStart = +state.printVal
: [7 ]9 ]8 \/ p6 S& P$ h; G0 f" n  requestAnimationFrame(count)
# D  g: {* L- D9 T$ R; \}

& i% V( q$ a4 \/ {* m( q* Wconst pauseResume = () => {
0 i# r, k) S2 N" R% |: Q  if (state.paused) {
/ V1 ?* Y; F: k* h+ n: Q& x, f* r    resume()
% Z; [+ `2 Y8 [. u% |    state.paused = false
% b' l/ |( x  v9 Z5 w6 E0 U  } else {
% s  U# d/ k" t- W    pause()
' z+ X: _  @$ {# ~4 z0 w1 o    state.paused = true
  }
, z# `& H" V* `}
0 A1 d" g5 t' `% |6 A) T
$ q, p0 r) ^( Q" \const reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
3 B5 ~, i: F$ Q8 g  state.displayValue = formatNumber(props.start)
3 N7 G) g+ u' z# H! M8 Q" A% f}
& g. `8 u; m2 A( ^5 Y) A( B
" I/ q) o# J. M% F$ _( Iconst count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
: W2 a4 F8 m" u4 U8 B1 b  state.timestamp = timestamp
  const progress = timestamp - state.startTime
6 D6 ^7 h# t; h6 R; u/ s9 O  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
* F2 [# w. ]% |8 F      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
( K) L! `4 S9 T6 g    }
! N/ X4 S' S* E5 f4 O% Z* S  } else {
    if (stopCount.value) {
2 X: f* u6 Q4 ]0 r+ t  I; m      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
4 V* h! t$ l" C% q! O    } else {
" D; ^8 f6 M% N6 g% ]6 e0 Y      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
  T3 V* T# L$ M: @, I3 s* i/ b    }
6 s- }% q! X* A+ {/ h' Y  }
  if (stopCount.value) {
& t( D0 a5 X& n1 B  c$ `+ u    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
# B7 E' K. d& N, F( c1 Z8 `  _  }

  state.displayValue = formatNumber(state.printVal)
: _" J& A5 m# ~4 B* ^9 Z  if (progress < state.localDuration) {
% M" o4 e  s0 h1 Q- I: Q* r    state.rAF = requestAnimationFrame(count)
  } else {
+ e; Z& \5 `+ c5 l; K    emits('callback')
+ D( y( F4 y  F5 N: q  }
}
// 组件销毁时取消动画
onUnmounted(() => {
; T1 {# |6 t# T/ k! m  cancelAnimationFrame(state.rAF)
* W" g( {" t; g0 H3 A! v" A1 }})
</script>
) C1 a" J8 {, I9 j6 {
' \4 ?/ s  {" {, n( ?- C0 z1 X1
2
. U3 t) o) }. ^5 J! f3
" N# }7 L2 s2 S/ F- h3 H/ U6 f0 r4
5
" [. `% s+ K$ V6
5 G' x1 D* @0 x- o1 o7
8
5 P9 g& W% [8 U8 K6 N9
8 a! o( I9 ^. p/ M10
11
12
13
, U% `+ ^# r2 p7 s$ \2 _7 K14
15
16
; f4 A" }7 }: m3 P( F6 R: F8 J17
: N/ A  q2 X$ Y, H% x18
' z& R& o5 d9 {9 e: y1 [& Y1 p# W19
  V  G1 f3 K" {1 L8 W8 p# z20
$ H( m4 I7 H7 c; C- P4 X21
22
. f" B1 I! M! f$ L* u23
1 I7 W2 Q; Q% e4 ]24
1 d6 g% h: T! h* y* y25
26
27
28
29
' F1 n' ]! b% S30
31
32
33
9 k. E, Q5 h! e+ {& p# |! i* J34
" _" Z+ u. |( b/ M: `# z8 g1 S) q, i5 ?35
' }' M) A- H# U5 `/ j2 ~; @* V8 `36
% N0 ^6 d- D( o. B: o6 h$ F37
  w7 q$ N  j9 c8 h8 l! N38
8 N) w* m$ b2 Y& i* l2 P! V9 ]5 |39
  E" C$ {% ~4 `2 n! q5 ^" B0 m- d( @40
41
* `6 a% s, n; x42
# \( O1 ^4 B5 g7 ]6 X4 m43
1 t0 y2 J- D. t! B! [9 j: ?; J44
45
: U2 s5 e9 J3 s! {# ~8 x& M0 ~) u46
47
48
49
8 |( {* I+ ~/ a/ {4 {" h5 c' {50
- N) g0 t/ `6 ~3 c# p: o51
52
. e  |. C6 U: A53
54
55
56
57
0 @% M/ Z. Z/ e% q; t: d3 Y0 t58
59
60
61
- H' W, K- o+ l  {62
4 A# g4 c- }9 ]! A) _" T# g63
( I9 C6 |( f/ t: B- ]% B64
% e3 B2 {7 b$ l7 H. l65
7 p. U6 L$ q$ D2 T4 g66
67
68
( m( E6 X; h& l69
70
8 |& ?3 R6 t+ _! r* x+ M% F9 b8 y71
+ |2 u- N5 H3 H( n# S' h" h7 v+ m72
73
( b# A& k% J( D3 m# M74
75
76
77
! D+ p- j+ u3 F- E78
79
1 X) _( p8 F& s$ G% a80
81
82
83
84
85
86
: {% e) O& Z  u  f: p, L  ?87
88
7 _2 I' Z, t$ o; V! r! q& n1 J# d89
90
7 O! P$ M3 ~" U. h91
$ |1 s3 g/ Z( O- z92
+ f) M& C3 S& V  U+ m" @93
94
95
96
( k$ c/ O, F4 Q( P. ~97
98
99
100
% @4 |/ r' {: o101
102
103
104
105
106
107
108
* N3 _+ c; M$ s( ]. W: \109
) j8 A& q0 ^# B110
+ O, o8 A* v& d9 R: ^9 P- Q111
' O+ p+ D- l, a4 R8 V3 T4 d3 a112
- {/ [1 [# I# |6 A: u113
' b" E4 `1 k& U3 W$ T0 ~1 _6 _! N% J* s114
3 D( X' T# S0 B8 C% u# u: a115
116
117
118
1 P# d# T' M( _0 h( f, o4 S119
120
121
5 ?$ k2 M; v/ q0 F, S122
4 i8 S9 x0 d( t123
124
/ W( V$ T- q8 K( m! W) a" ]125
. T# z/ c5 D8 Y$ j, Y& o126
( }5 S' c6 O$ @" [  z: q" G127
128
+ ^& T  u6 h' G2 O" ]; m129
130
3 c5 Z' _( S$ F; z131
132
133
1 i1 e/ ]8 S7 Q4 m- ^134
' n& Q' K- s- g. i% R) |135
# [# J- S9 L  o: h136
. S! ?8 q* [( I, o5 K137
138
/ ~3 R) z3 b- y. T139
- L# O/ }9 `; K/ O. M0 V5 y140
& @# a8 i/ D$ ?5 ]( u: [141
! Q; ?8 r; Y' L6 @5 G+ o4 ?142
143
144
145
. V! J+ h; \9 Q1 {146
9 ~5 {7 V/ y) b  y! [5 c. O9 G147
148
* ~! A2 a( ]9 @" ^/ P; ]6 m1 V149
150
151
5 P5 G4 k1 n$ `: l9 |0 A5 e. j152
3 u; r9 B$ z! l( Z. w& Q" g153
154
155
156
157
158
159
160
161
162
163
0 q. M3 v) L1 S5 N164
165
' r7 W8 c# Q% R- h7 F) l! P1 I' x166
0 o" o% r. Z: T+ U* K167
168
169
170
171
172
9 J* ^1 m  y8 l173
6 v/ ]0 }* {7 u2 {$ D& ?0 g/ L% D174
3 s$ }2 |8 a7 g8 n5 b175
176
0 O4 W0 G6 h+ O: w; Z. Z: C177
178
& v: J6 I; F. Z4 S' o179
: m3 W0 i4 f. v+ M. m180
+ ?$ ^. {. |* z4 H( Z; `181
$ i9 |7 D, O' ?- p182
. {3 e9 {  t: y, d5 X183
- q+ E4 X" K$ }7 `! I184
1 q3 s$ C9 i3 K7 v8 M185
186
( i% f+ ]; K0 b! b' N; p187
188
" Y6 s/ Y7 n$ m: H! a189
+ X) s8 B, b9 t0 e/ I/ B. ~5 F) J190
191
192
193
194
6 o, t/ H* i' z1 L3 ]* T0 ~195
196
197
198
' G6 y% C$ _/ w199
7 g+ y: P6 R, X* l9 G1 z7 d200
2 M& \) k+ Q( K' k( s9 V9 q# K201
202
总结
) q( H2 K- V3 }4 O+ |3 f8 j" I自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
! i( F% V- E  I
demo演示
后续的线上demo演示会放在
demo演示
完整代码会放在
" Y9 L6 |2 J6 l8 }% ^9 s2 }个人主页

% l3 I; l- o8 f  k9 Q4 e) Q* |希望对vue开发者有所帮助~

个人简介：承吾
' \* ~1 G3 M- k/ _/ ^工作年限：5年前端
地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
. b. U2 ^2 b, a2 p( x
# |- g8 t6 A8 \/ D. E
5 _+ J8 ^4 A8 a! a4 A) Y) k

————————————————
* q$ l5 D1 ~4 B% {  z& R- N; W版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
8 Y+ Z0 C2 O! ?3 _$ [1 x% y9 t原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
" n) n9 S2 R; N: @
& m% Z- J7 R: J8 s6 ?$ t* o: M