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

杨利霞

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

前言
/ F% D& x. P) Nvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
% y) Z. k* [3 L9 N1 y) Q* l* x6 s的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:

/ q1 z9 Z3 |3 J( d4 v
- W8 ^# x) n! O思路
# m4 k! n. P- R3 |$ O  I使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

# Q% F) p: Q- G8 g7 `文件目录
: z5 l2 b4 d' V2 m$ K) u( r
% T2 W6 Y$ C, O( }7 @2 h5 u
使用示例
<CountTo
; U  V; A$ a4 I" p: t1 D :start="0" // 从数字多少开始
2 D( W4 J5 x; ?4 U; C% _ :end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
: C2 i5 Y0 A. \) J$ D :duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
+ p$ u; n3 l* j4 e& ~$ q! m/ ~ />
. q; [  N- Q0 P1
: j# `3 m8 P* e5 i9 O/ I2
0 m* X' K) ^8 s+ v+ V3
0 O4 Y1 }9 ]$ o  p* }/ S1 i, \7 N0 K$ f4
& Q/ |* I/ y% X% y& U4 z9 V& _1 h5
8 u5 D7 p$ v+ v8 o  n/ ]9 G3 D6
/ B# t1 K$ n( P7
, \; Z% i) o% \' S8 s! t7 o8
: G- x7 H' K1 |: E$ n入口文件index.js
6 f$ b- M) F! Q- J$ z0 W
const UILib = {
  install(Vue) {
7 ?5 G3 _( G2 {    Vue.component('CountTo', CountTo)
  }
  a4 _6 T' s* p2 `# E( w  |}

export default UILib

; j/ ]2 |/ p! J+ w* ]1
2
3
4
5
6
7 S+ }* F# E. b  J8 i3 B: |7
8
9
% B: `; \9 @5 P* a3 ^main.js使用
* C! r" |; U. I2 `% Q8 F. E. jimport CountTo from './components/count-to/index';
app.use(CountTo)
& J1 }* a- e2 V" x5 m+ o/ W1
' [( t  c! Z! y: y" M: e: I/ J2
requestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
. \6 K( O9 u( N如果是浏览器判断浏览器内核类型
# a2 }" X# h+ k8 H+ ^! i9 |如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
8 \0 e0 Q9 [; r" r各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
/ e% A  e. |4 m: J5 T' |增加各个浏览器前缀：  
0 W2 [' L5 A, C7 F7 a1 plet prefix;
$ l! Z# }( L* z* @let requestAnimationFrame;
let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
6 S. \6 E. f( I, u: F    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
7 w8 O: f: X! Q        prefix = prefixes
: Y' }7 b- ^) u5 s% s8 {        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
! w( b. [' E7 M$ V6 c( x( O8 \        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
# R+ t3 h4 e9 }5 D6 c  f$ F
6 |% f% }6 \1 j% K; X0 U  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
+ ?+ Y( e; @; r% d9 W4 B7 ^7 s4 K2 B3 a    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
1 D7 C; W7 A- g" k+ g, y            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
  @' m. E) O9 J$ \            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
9 U2 J$ @9 m- l8 d                callback(currTime + timeToCall)
            }, timeToCall)
" W- b6 X. J  f. z            lastTime = currTime + timeToCall
$ F) p' n" C6 m% \7 j            return id
        }

( @# i! Y/ T8 u4 D% Z        cancelAnimationFrame = function (id) {
# Y" T4 z2 u4 w8 D# h            window.clearTimeout(id)
        }
' N& c# L+ X5 e3 {4 a1 V    }

: K* Z+ U2 {) g2 J" U1
2
3
  w3 L9 E$ \( C& ]6 `# ^8 N4
8 g! q- N3 @6 z5
6
7
8
: A0 I: I; ~" D9
10
11
/ Y  B( l1 f3 t/ Q; m12
" x% c1 N5 ^' `6 T( x13
6 r2 X0 |4 p3 g$ _14
15
16
17
18
19
20
, Z9 H6 _$ y/ S5 ^+ v21
# X' Z, b$ l1 Q- h) f% m22
23
9 O4 z- ]( k# k" N; g* ]1 ?+ g24
25
3 Y# ~2 U; [5 G9 Y26
2 S0 k7 w8 q' S, R27
8 a0 S! J* V: o! U28
29
" h9 y" ?9 M$ N. z8 b, I: `30
31
32
完整代码：
requestAnimationFrame.js
7 Z+ {$ @+ T# b; x' v
let lastTime = 0
* r- @0 S$ }3 Nconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
8 O' d; A# G+ N
let requestAnimationFrame
let cancelAnimationFrame
! P+ ~$ H! w6 `+ w5 Q  E* ]
2 Y; K3 ]9 B7 P; Q/ ~* l// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
        return
: A' s$ }9 n& ~  I' A) w( J    }
    cancelAnimationFrame = function () {
        return
* b" i; S8 b: x$ V- N2 i) n& k    }
& \" G/ ]2 v/ ?* w} else {
& m  k6 h: M7 I) G    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
8 }  s2 x4 V# R5 W1 w/ i' c        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
$ @! n; i& F# N% F        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
) a3 |; y8 B. G" t    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
1 ]" z6 W" [; C7 _# N, t            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
/ c$ a9 o+ i3 i8 d" P            }, timeToCall)
1 C# [2 @7 O- [' b            lastTime = currTime + timeToCall
! q' _$ }( _- p            return id
        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
2 g# n: ]  t4 w, w" R    }
% u" L' e: X4 g: Q}

/ m7 R4 o6 r+ j. T9 `* _  S" Pexport { requestAnimationFrame, cancelAnimationFrame }
3 v6 c: S/ p! i) g. W' g

; r1 ?$ [) ]( s) c! o1
# ]! ], Q9 {+ p  [9 R2
( U4 T% @4 ?3 [- y1 N1 p3
7 G, v9 r) Q0 N4
6 Y9 m2 P% p  j- B% m+ Q: {5
6
7
& ?; r% n! [9 h5 @7 `8
9
10
11
3 J; J# e* i2 K! X7 Z9 J12
9 _/ V4 c' B( s3 G; i2 o13
2 j8 c' L% R- l$ v+ V14
15
16
- }5 z. T# w3 [! i/ T17
18
' e" G2 ]8 h( F. D! ]! r6 O$ q7 q19
20
21
& D% n+ Q, J& N8 {3 t6 Q22
23
# A6 o$ z- l2 G7 N; n4 P24
8 I* U# [! y0 b4 S25
26
27
28
/ l6 w8 V  S7 _, o' l- z29
# @  ^  W, `4 l" r30
31
, D, t9 Z' q: D0 C5 h1 b  E32
. Q! u. e- S9 ]: P33
3 ]9 M' ~$ y4 f8 ]! C5 v. n5 q0 u34
1 l) _$ o0 I$ S9 l2 E/ |35
36
37
38
39
8 L+ b" r# ^6 q40
41
! \) m* B( K2 e: b) n42
43
44
45
+ H& {  P0 U2 O3 B# a, X& |& q46
47
48
CountTo.vue组件思路
; R4 H8 r' W( w首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

9 z0 n3 ]8 q- z, W- b# |, m7 p引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
9 y; Z7 O# E, @$ o; H* w" t1
9 h' R8 j# z+ H2 t需要接受的参数：

const props = defineProps({
  start: {
7 z+ R/ a/ ?- \8 K+ n4 `    type: Number,
    required: false,
6 M, S7 {/ u( H% Y& N7 L6 z    default: 0
  },
) f% ]+ B9 v( S; \1 P4 L! T  end: {
: `# S; m4 D0 ^6 p! C6 d: N    type: Number,
    required: false,
& u6 f6 H! {1 t& n' H$ Z9 O3 Y    default: 0
; a* M% m" k% W! ^$ i' E6 s: G  },
  duration: {
    type: Number,
" |* g  M6 X* ~7 r% @0 o    required: false,
    default: 5000
( A8 D1 R) U6 h: z  I0 G  },
1 Z7 @9 t! v& U; J& v# z+ b3 h  autoPlay: {
3 S! o6 B3 c! [4 L1 w! ?    type: Boolean,
" |  M/ L% C8 s! b( W$ E    required: false,
" j. s, `" t  g! z    default: true
  R8 `& G% E& z9 I1 J' _: c  },
  decimals: {
    type: Number,
    required: false,
    default: 0,
  c! ?( X, P# q/ p9 ?    validator (value) {
      return value >= 0
% L6 s2 y. v; n* n$ L    }
  },
* m0 b7 Q- P) E; v0 T$ J# B7 m  decimal: {
% {4 W0 T% ~7 @0 ?' {/ Z7 z    type: String,
    required: false,
! }( ^# y/ T9 n1 M; [    default: '.'
- T* R, i( g5 r  },
  separator: {
3 |& ?- X/ B% {5 B    type: String,
    required: false,
0 w1 `7 w* h& f# i* U+ F- U( U    default: ','
4 V, Y) R0 A; Q% h0 U+ E# T0 P$ d  },
  prefix: {
. n, V# V0 s/ d. v0 P    type: String,
- Q+ s! Y4 A* O+ h- T! {: }    required: false,
8 P5 Z9 K. {0 [1 j* F' e6 n    default: ''
  },
  suffix: {
    type: String,
9 n4 D) ~6 `  Y' T$ Q' g' Q! P    required: false,
0 e# i* Z# p9 n    default: ''
  },
  useEasing: {
    type: Boolean,
    required: false,
5 T1 a3 z( n+ R' S+ S7 L3 ~3 @! k    default: true
$ j% {; W. U9 Z. ?+ c& {4 {4 Z  },
4 q2 [# \: x, e  easingFn: {
    type: Function,
- V# C- y, S3 o. }: u( ^  L& L    default(t, b, c, d) {
1 V' X0 E" U7 }2 c& f/ F      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
$ [0 q$ _- r& E$ _7 P    }
' h! V2 V' k; R; M  }
})
3 F' x" i7 l' q, w+ A

1
2
/ O! {  g/ Z' N( R3
! P* G, }! @1 C* g' `4
6 z  A+ y6 o) J0 z/ S5
6
7
6 f3 C; X5 x; i* x3 [8
  Q: P" k6 q4 ^0 j0 o0 U9
10
8 e  t8 z9 e# \4 M11
12
# [0 C2 b+ x. q4 Z5 g) r( ^13
! ~5 z! O% M) p5 Q14
15
- k8 R8 A4 V5 H# |$ [% O  F# F16
17
  }, D# J3 j1 M( z  @' V) {. e18
) S2 R3 y  X2 z) s19
20
( q2 j  e8 X4 Z8 ?6 O+ v21
3 i3 x3 l6 E9 o* ]  x6 G4 ^22
' ?) V1 d& ?" `2 `. k7 w& _23
24
25
4 x! ^, d" D1 A8 b& m- b26
6 {& X3 j: p( ~; n/ p% J27
! A1 O, a& ^1 ]8 {' Q4 N28
! Q' d/ Y* O+ n4 V1 |29
30
31
32
33
  _8 B0 q, r$ r5 v/ k" T! {; d34
: D7 y( t# V: b3 q2 m6 y35
36
37
38
39
40
' }- F+ x# z( V3 X- b( E" A41
42
. {$ w3 H: Z- L( `/ u: u43
44
45
46
47
48
49
50
, x# \  o& f& v( D6 p; ~/ f; N  t: b51
52
$ |8 E. t2 t* Y  n9 x/ s53
2 K7 w; K# |2 U9 o7 f8 a54
55
: N- d. C  I: y3 U- s$ b56
57
7 y; ~- _* |" X2 R( O; C58
8 z' h7 N9 S9 j6 r; x/ w- c: w. u59
. |' C0 @7 |3 i* I6 {60
" e: K' v2 k5 a) H0 r7 r61
62
启动数字动效

const startCount = () => {
  state.localStart = props.start
* t# X! b0 r& S/ m# I% c8 U% P  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
1
2
3
4
) P0 u6 X8 N( f* D8 D5
, j* U  z& I( Z5 ?0 ~7 d6
7
核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
& V1 @0 E; [5 O2 ?  state.timestamp = timestamp
  const progress = timestamp - state.startTime
6 ?- i( R& Z4 v5 ], u1 ~  state.remaining = state.localDuration - progress
0 V0 Z4 p$ A1 z$ h$ }1 G3 N  // 是否使用速度变化曲线
+ B. A, W$ k( L  U4 _0 x; K; i  if (props.useEasing) {
7 {! L* C  H! @: L( r6 z( ~0 ]7 a    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
# J# P- R9 [5 v9 S$ J      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
1 O& L/ I( J% q1 S" ^' V    }
  } else {
0 ], y6 o8 |4 d: U' C    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
9 }) L! f, o2 _7 G    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
7 e4 l. u3 L- ~7 q' D7 B  }
  if (stopCount.value) {
; \" a/ R! e  D- ?6 S    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

+ Z2 s# @; c: \+ X( Q: _  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
5 w- S5 m0 g( x% Z, p6 ^2 M" u    state.rAF = requestAnimationFrame(count)
  } else {
- u  F8 h0 L, D! Z8 u8 W    emits('callback')
  }
}
6 s+ ^  i# m2 N- K) V% q

# g4 [# Y* |5 G) F( ^0 f// 格式化数据，返回想要展示的数据格式
- B! J& B6 f1 f/ Dconst formatNumber = (val) => {
  O( S4 r, z8 G  a  val = val.toFixed(props.default)
  a1 g8 Z9 n+ e2 M& g& h. x% E; _  e8 S  val += ''
0 s5 P6 W, U" ]  p# ]7 ?6 i& B' m  const x = val.split('.')
/ `  Y! a2 r- Z7 n8 c$ ?3 Y! z  let x1 = x[0]
4 {. z- V1 c7 f' C  const x2 = x.length > 1 ? props.decimal + x[1] : ''
: y+ V5 c8 a: ~3 r5 }% {  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
2 X0 `6 ]. z4 l: f    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
/ r4 P, l1 x7 F: D, r. b) [9 n    }
; A, @; S9 G( N7 h# |3 }  }
$ J2 m- C/ t7 N* U3 Q; j. i& `# |" [/ _7 X  return props.prefix + x1 + x2 + props.suffix
}
$ q, }  [0 T( S" n
1
2
3
4
4 d" M5 N0 F  b7 j: @5
: C% c- w" }4 Q6
7
8
4 Y& i8 y8 M" S/ }( d0 S9
. [0 _5 T( H. v5 e$ T+ K10
11
9 g: X7 n2 i8 }9 X0 h12
0 g) \( f( B6 P; Z' j4 Y13
) n) l3 T  Q0 O. B' {' @2 K14
15
# H: a% j, Z* t% i6 U* X" i16
17
! X, _) y2 T8 Q+ z) C5 X9 F8 P18
9 p( s+ B2 d2 A- x' h. M; V) k19
20
21
7 C/ o6 U1 T2 P% y% F) z22
23
24
! k* G6 c; r1 y0 v25
26
27
28
29
30
) f9 L; U9 v' O: R6 D. E7 S31
, C3 @5 O" z4 F. o2 M# u32
33
34
35
& B" i9 W' A& I8 ~& O5 G# k36
9 N/ P) `% @/ S5 g( B+ C; o37
0 O7 H% O6 b7 t6 j6 o38
39
40
. L+ c  C8 B$ J; Y41
42
43
0 k" o1 u5 P8 y+ {* y7 H" u44
( M3 q; t  t0 O, X4 y6 s2 [) h45
46
47
  b% ^' S7 ?  i' [- a; }; l2 `48
. c, U  k' L8 e) \3 b取消动效

// 组件销毁时取消动画
% w  D/ U8 M, _. `8 j" y* XonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
9 v3 S# o  J! {% U" }; w1
- Z5 C( G+ G; R3 i5 }0 R2
3
4
完整代码

/ `! u7 ?. R4 p$ v$ N<template>
+ g2 {8 f  N2 Z0 z* J( s  {{ state.displayValue }}
0 ~: p& Z, e( [) s. a' f/ x% e3 ~</template>
6 Z1 T: J9 u4 A# l- C5 C9 A. q
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
: e: W3 Y4 L# z// 定义父组件传递的参数
const props = defineProps({
2 k$ O4 n4 _! V0 f  start: {
5 g0 o2 {" u  @1 F: @. H+ ?    type: Number,
    required: false,
7 X4 {  @4 y/ O; y8 G9 h# X    default: 0
/ b# i9 T5 U$ Y2 T4 H5 O/ ]3 P  },
, S2 ~1 V! q" k' o5 {  end: {
    type: Number,
    required: false,
    default: 0
# y/ k9 Q0 Z' i  w% v  },
: ]5 W5 n  y/ v$ ?! J1 u! X  duration: {
) @; T! w, s: B) X2 M    type: Number,
: p7 H8 t9 [8 `8 p    required: false,
$ e6 D( Z- X8 R2 b1 x8 l6 m    default: 5000
* d7 C0 p% c8 V, T  \6 _- x6 y1 z  },
  autoPlay: {
0 q4 V; y: ~/ a    type: Boolean,
& m% r  G# n. z- ]& n: `    required: false,
    default: true
  },
  decimals: {
    type: Number,
    required: false,
    default: 0,
    validator (value) {
      return value >= 0
: [0 V; d1 m8 t* \" {1 o( q; Q6 j    }
  },
. p0 @0 X! e3 e$ I  decimal: {
' q  \9 w7 C( C3 F    type: String,
    required: false,
    default: '.'
" b$ q# u: a, i  },
  separator: {
    type: String,
    required: false,
    default: ','
; R2 a9 G, t9 H+ u5 I+ g5 l  },
. B3 O0 W' Q6 ~. i. `$ Y( i. H  prefix: {
    type: String,
    required: false,
$ M/ r, K8 [. |) F8 Z- l9 ~1 ?& X    default: ''
  },
  suffix: {
. `. D$ H" v# T  h4 w    type: String,
    required: false,
    default: ''
, P1 m) l% ~4 n7 Z  },
6 u) i! N" v9 m' T, ?  useEasing: {
    type: Boolean,
0 X  `' ]- p# A  w$ D    required: false,
" Y$ x8 U( M4 t8 j8 I; B    default: true
! z* y4 u. H( K2 Q  },
' s% L7 \+ Z8 V' J! y5 z  easingFn: {
8 g5 @. y' M  j: j, c( e    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
})
+ o( b1 ^# t; K3 V& P" g$ _8 F
const isNumber = (val) => {
1 R$ T  s, D7 y  return !isNaN(parseFloat(val))
}

7 `6 |4 B" i9 c9 |- \$ K, J; u# S// 格式化数据，返回想要展示的数据格式
# {) Y' `1 r7 @( q8 econst formatNumber = (val) => {
  val = val.toFixed(props.default)
: x- ]0 W: @* l5 F/ p. e- J  val += ''
: ]) a5 J( Q' R  {- Y  const x = val.split('.')
  A6 R+ o/ X! R8 R# E: G) ]  let x1 = x[0]
  |& S8 Q! D$ f3 i2 e  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
/ r* v: k  ]6 q& T# Z: |! [2 b  if (props.separator && !isNumber(props.separator)) {
* o* C& B! F/ M5 r    while (rgx.test(x1)) {
8 U# m. T4 v' z3 B- R9 k9 T      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
( ?7 V& D5 n- Z3 X6 q  }
  return props.prefix + x1 + x2 + props.suffix
  U8 \9 E' k1 J# @% ]}

// 相当于vue2中的data中所定义的变量部分
const state = reactive({
, c- R6 |4 x- X! u4 p* q  localStart: props.start,
  displayValue: formatNumber(props.start),
0 F4 A* d% b( i1 z1 K9 @  printVal: null,
  paused: false,
7 ]. L3 Z2 M/ J9 j( \+ q  localDuration: props.duration,
) Z+ z, `: J! d0 A6 _  startTime: null,
  timestamp: null,
0 P+ p! G4 d$ Y7 k# P/ c  {) `  remaining: null,
+ c8 H/ G0 o7 P6 {& _' F' r- O! ^  rAF: null
})

# L/ H. d2 ?1 e/ e2 |9 Z// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
})
2 r) _" M9 [3 m+ b3 y* Q// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])
, o) t9 b8 p& A! m6 }
) r2 Z1 ?/ [$ Gconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  N# h% U" o+ _1 Z3 E0 d+ w. j  state.rAF = requestAnimationFrame(count)
}

/ z. v0 q/ G! ?# ^$ g: r# Xwatch(() => props.start, () => {
$ q3 ]! n* h4 g' t* I4 w  if (props.autoPlay) {
$ z, ^( k& |- f- I    startCount()
  }
})
, ~! R9 {- D% \" u% M5 r
watch(() => props.end, () => {
  if (props.autoPlay) {
    startCount()
  }
})
, C+ M: q: R! T! w$ L$ h// dom挂在完成后执行一些操作
" L7 R! |  G  N" O  RonMounted(() => {
  if (props.autoPlay) {
    startCount()
1 q4 l; Q6 {6 M+ C  }
  R2 Z$ e9 r7 s7 m9 d  emits('onMountedcallback')
})
// 暂停计数
% y1 X$ }$ D) H: Q# pconst pause = () => {
) R7 f5 J; b6 G) O# \3 b7 t  cancelAnimationFrame(state.rAF)
}
) ]7 o5 A' s8 Q  M! u// 恢复计数
: Q6 S0 k! `* [+ V" Uconst resume = () => {
  state.startTime = null
; `& Z3 Y; u; @, M  state.localDuration = +state.remaining
  state.localStart = +state.printVal
$ \5 Q4 ^/ H' N: W( s4 @  requestAnimationFrame(count)
}
) s0 Z$ W( h: R" V8 ]5 Z9 b: i
. |) ?+ [9 _6 w0 h# O! j7 T$ ~2 Econst pauseResume = () => {
. `* o+ m% q7 ], ~4 n2 D  if (state.paused) {
    resume()
' y2 f$ @, G' y    state.paused = false
, i5 Z! L1 a$ ~  } else {
/ w& L% {" `% e) l* K* X    pause()
# |; m. d( ^/ Q( U    state.paused = true
  }
, {& V: \+ z! j* x}

const reset = () => {
1 Y/ r' l4 e2 R1 h+ ~* I  state.startTime = null
4 @$ ?8 {5 h" V0 }9 W8 R  cancelAnimationFrame(state.rAF)
1 `5 m1 f/ X* Z8 t  state.displayValue = formatNumber(props.start)
}
8 N1 i5 Q" ]7 ~5 O6 @! ]' M
) W# E2 C  {! f) bconst count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
$ L' Z% W0 d0 m) ~  // 是否使用速度变化曲线
  if (props.useEasing) {
2 A) L; S0 B; {* e% l2 ^4 m    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
2 X- \  n% L2 \8 V" [      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  q2 x# l. S$ }6 c+ o3 `0 V  } else {
    if (stopCount.value) {
  L, R1 V8 A6 J0 d      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
* V0 U' z6 S; a( t  E' R, x6 d  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
9 \' p% Y- w; ~! b& ^3 A: G  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
* B% Y$ b6 h, [4 f$ T( K: H1 Y
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
$ G7 \' D6 S4 o% V$ N    state.rAF = requestAnimationFrame(count)
  } else {
0 b$ R$ {; l  T; [    emits('callback')
  }
' v9 o% R7 Q/ ^}
: ?# i- u4 F/ e/ [// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
</script>

1
; e0 H2 ~3 {- R2
3
# ~3 @. n8 L* T* f4
5
% h0 U1 B" i+ `4 P* Z6
' z% d+ ~% ~0 }0 b( _3 d0 ^+ L7
) K5 a: x8 j1 u: n( B' P$ w0 V8
9
0 t6 c) W, |" ^, Y" @# M2 m10
* X! b5 v( g, ]9 c3 {9 w/ w11
1 m+ R2 }4 N9 k8 ~$ o; c12
13
14
/ T1 ]: S; j. f: |5 D7 P1 ]9 ^  r8 P15
16
* E; d+ q  b  \* R3 q17
18
- q0 J4 o8 I7 |! t0 C* q. q- i, F19
20
$ |/ \  w/ w/ z5 k9 }$ i21
22
23
- R7 N3 U$ Z- K$ i/ V& f24
$ G$ a& Y# }! p" z# m6 _9 ?: l25
26
! V1 C6 a. f& D/ U: J27
; L& F/ E8 u& ]28
" |& a3 {) j9 J8 Y$ ?7 |+ D/ x6 V7 T29
- ]7 P/ D$ j7 U: P! d% H9 U9 y! A30
31
32
5 f  v/ p2 Q- X9 V" b33
+ p" R8 ]- T; F. a, F34
  q2 l  w0 T+ G, e: O# f35
0 X2 f1 Q5 ]& _0 p. l- h' ~! w36
6 x: J4 y" ^. M6 ^9 f. Z, O2 E- o+ A1 ?37
" R% t* ~7 P! Y& x4 a7 z38
' G6 A$ G% g' F39
40
5 {& G: j0 P" W- V; v5 B) N6 b$ R41
, i) m& J0 a: ~8 p* N+ E. T42
. U7 \" Z4 L% w$ U) |7 P: v6 j43
( Z- U0 U# V$ a% K$ C  ?/ J+ W44
" L% w" X* j2 l. V8 P- f45
46
47
48
49
50
) G4 O+ s4 |6 h51
52
53
54
! C% J, W5 d1 Y  S55
% }  H9 S. f  u56
57
1 R1 |% M* J" H8 T6 j58
5 [8 |% r  p( X! r59
0 L& Z6 z' g; e  }60
61
62
63
3 n! X- X& m! {" h! o9 m64
( {8 g7 f: k; t2 q8 V65
2 G: O7 z* u% E7 W66
67
68
69
' x) z( }. w+ \- j70
71
! g* r. ]6 H4 X" d7 A: S72
: x& C2 P& D" |: |& e6 T73
: ~1 @) }+ h/ G74
75
: g% q" {" L5 g+ H7 m  s3 C3 U76
77
; c* ~- E5 J% ^* P% g0 p0 [& c78
79
& M- ~7 @5 v$ [* B4 a, g, D80
9 ]6 y' a' f: _& m6 b5 q9 b81
82
: [( j4 |8 F- S/ [83
6 Z) v, R6 d/ m84
85
86
1 J. t9 o+ P: L87
0 Y& j* ]1 ]) W% K3 z' K88
89
% h8 K  N6 f* k9 C! R# z, R90
. j6 n+ H( S7 V  \( e91
92
93
# q( b; r4 F- \- k1 M3 v+ D9 v5 \94
95
- w" ]1 n0 P- U- C2 c96
97
98
99
7 F) I4 e% r9 Z" g" K1 v100
101
102
103
104
2 ]9 O4 ?! ?3 C& ]2 y" y( N) l9 p105
106
107
4 @% Z* \7 `7 ~' L108
  S5 k% U  G, R: D3 i8 Q8 P5 @2 Q109
- g- G# W1 B" u5 _7 E! X7 i110
* A* C" t$ I3 t2 V111
112
113
/ F# [' I$ u& }7 a114
- Y! n( n& m9 H115
116
117
118
119
120
121
1 |5 Q( h  o3 Y! ?$ Y122
& H/ n, f& c1 _$ |& ?7 J123
124
125
126
* b: P( r% B! _; Q) E7 P8 W4 Z127
128
129
4 X$ ?" h  t8 _# f130
) Z* K1 W7 N2 k& s! Z131
132
8 H1 x. z9 N4 O% s' W133
134
135
136
; M9 _& [+ B: `# R. E2 Z  l137
$ |7 \- n: M, t- Z& P138
: s# U% ]1 q& s! ?  [139
# e2 V' w/ W+ \( A3 c) g5 E140
3 Q/ Z, Y% \' O) ^  A: U141
# S, O. w- X! j" k2 ]" ]142
143
144
# {* l/ ]* U' R- y2 e$ N145
146
147
/ j, R% R; ?- J8 h# V# R* Y( A- O- P148
# H  i* F1 N) j7 R/ D# j1 k149
* R6 Z; b9 w& Q5 G4 _150
3 h: ?7 J; C; n% D151
152
153
( v4 a/ Y/ U- E3 L154
1 f/ y. C6 [8 U$ l. Y/ Y155
156
157
158
159
& y8 V7 [0 w  Q7 `$ w160
161
: K6 N) G4 \5 q8 h; M162
163
164
165
166
167
4 s) D" H. A$ L168
& @2 N3 ]3 k' O3 K$ D2 N4 l$ s169
3 |% r5 J7 A" I! j* r8 D170
# G# M, M2 l) y. c: W171
8 x- b3 ]1 }2 c5 k- w1 u172
173
174
7 u. C3 ?4 \( a175
- h1 {5 f4 ?( g' K/ d' E176
" \/ L: [8 s+ X4 y6 b- F; ^177
178
179
0 q  Q- y4 c, h" V* V180
181
182
183
184
185
1 D7 R4 B5 w2 o2 {% M186
187
9 Z2 F+ @% U: m0 ]188
189
; x2 J7 b% r, p* b, O- e7 J190
6 B: w) E8 }. x8 U7 r191
9 {9 \! ~6 O3 B0 U1 q( ?4 R& S192
193
% c5 Q0 c# |: N* B" n  J194
195
9 W& O' `8 X$ b2 w196
* q) r4 Q8 Z4 X' Y197
198
199
/ {6 K& x% ^# C% o200
201
3 u$ V6 |3 u5 z' S# o202
总结
, W1 m% q/ q8 N: }; p" t0 {* l自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
后续的线上demo演示会放在
demo演示
7 Q& a% s/ ~% p4 E# C2 q6 \完整代码会放在
个人主页

  r, ~+ S8 d" n5 I$ z; H$ b希望对vue开发者有所帮助~

' ^7 Y( y6 h' D6 u3 M个人简介：承吾
工作年限：5年前端
地区：上海
! F3 V, D$ K, T1 z6 G个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
  G' C& }* h8 {5 R- x/ i4 J' J+ A
; K9 B: ]* Y1 M0 M2 r& C  u


————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847