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

杨利霞

vue3 | 数据可视化实现数字滚动特效
+ n6 b9 V+ ?% U" e
前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
9 w! y# J& N# iTypeError: Cannot read properties of undefined (reading '_c')
, x" r9 y9 t2 |的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
  H$ s! D9 D0 h5 o+ E% D6 \& u

$ N  c( G. Z& j" h1 Z" x思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
, v! l: I  X: f, K, ?
0 S& u& V& N% a, H% ?: o+ b文件目录


0 b: Y# s# s7 h' q- F* T  h( }使用示例
<CountTo
! d, e& Z) W4 E( W9 w8 ^- z" t9 [ :start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
4 `1 l: ^6 A) @* w, B" j :duration="3000" // 过渡时间
) z/ Q1 c# O* R: Z prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
0 {6 N" V* V5 p: e% t$ z' C1
2
; K$ n, O( r9 c; e! d# Z) M! F3
& y, h& I& ^  l4
5
6
7
8
入口文件index.js

$ u1 a" X  e6 L' u# ?const UILib = {
  install(Vue) {
7 [# N) x" D, g5 ^! L3 ]    Vue.component('CountTo', CountTo)
7 B* F' p$ ^; z4 I- n  }
}
6 _$ u6 _) m: R. F) d# o" V; [  }
export default UILib

7 y/ c/ z% `! y5 v2 G) ^) _! Z1
2
0 x. z1 ]7 e1 E3
4
5
3 `$ w# O+ Y; B$ Q* \6
7
% T8 {8 B: U2 a4 m2 f( c8
1 w" k/ D8 t3 ~6 b! s9
* n  u+ v- |3 L5 V9 jmain.js使用
. v( \- @4 a7 U6 ~' t" }! v4 a4 }import CountTo from './components/count-to/index';
app.use(CountTo)
5 k' O% a( I; G& S7 c, n7 m1
2
9 w  K! x* L+ Q) e8 i% X. H% t' wrequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
6 q. {, X$ z2 V# ~如果是浏览器判断浏览器内核类型
* I6 Y0 s; @# ^7 \% u* ]; @' x如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
4 ]+ W0 J5 i+ i+ N导出两个方法 requestAnimationFrame, cancelAnimationFrame
, G8 M5 r1 k" {各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
& \& u% S0 J! u. }4 P增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
9 a. b; V0 Z3 f3 u5 a// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
: g" g1 H9 |' _* e, l) T        prefix = prefixes
" W6 ?% @$ k' W  F5 o+ S2 z        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
# R2 D, V+ y' a) W- b! x4 ]        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

7 t* p* Q- H" n( z  u1 Z! q  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
! [* N; ^) \# C; Y* A! S    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
# |( I$ p7 k3 J8 K& J- s            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
1 `7 n1 b* N$ [2 I            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
3 K+ _! m) m6 P1 @. V            lastTime = currTime + timeToCall
! ]( J& G1 Y, G            return id
! u3 m2 e/ [( n" p2 h        }
4 [" j5 x! c1 j/ Q( Q
% q. _$ ^$ X9 b+ ~        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
- X' C$ Z* f6 b6 z: z2 A, T    }

1
: e* x' {9 k/ z2
3
4
$ Z& w' g. d2 ?# u* x# c5
6
2 G8 K2 t' d9 ^' w6 a7
! Y' x/ _" W, b, w6 R) G7 O: C8
9
2 F2 S% b2 s$ U, u& p. B1 r10
11
12
13
14
15
16
17
18
19
20
  E4 q' r- r4 X. j21
22
23
7 Q9 z1 y- D7 D1 M. x5 x24
25
26
% O# p: x& I( ^- x# P27
& `3 C8 K7 A- _5 G" I28
: G9 B* L$ Z8 H  r; X" b& {29
% [0 T3 p# z) t8 _( f% o4 j  K9 P30
31
3 e! }8 B; C1 u7 n4 M32
完整代码：
4 Z0 }* Q: E! frequestAnimationFrame.js

( k/ m/ A6 x5 U* R7 |5 [) R  xlet lastTime = 0
( l$ I3 c5 n! S9 J" \2 rconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
1 w. d- l: C% L/ u" u; x
9 S5 X& e% ?* a$ Blet requestAnimationFrame
let cancelAnimationFrame

// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
4 F( @/ |/ G* Q5 L+ T    requestAnimationFrame = function () {
# S" K5 [# ~; p$ a        return
: s( V0 ]7 P7 g5 x( C    }
    cancelAnimationFrame = function () {
        return
. V( X7 ]. j, J( c2 h3 f    }
/ j$ n% i9 z2 m& S3 l} else {
    requestAnimationFrame = window.requestAnimationFrame
9 |2 t0 d& B; u# G% b4 a/ j0 [& L5 c    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
2 e$ m2 V1 R; r! d+ n3 h. }        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
3 n! \( u6 w- D        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
7 z; E5 w, n- p6 }7 {
    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
- M( d0 ?" _3 p* W            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
- m. {# C5 N& J* B' Q1 Z/ [                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
# s3 Y0 V. @6 W+ u' j  e$ T0 l8 B            return id
5 |0 [! b( B) {- _        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
8 C) T' G8 I' T9 A3 \/ \- c    }
7 e6 Y) Q1 X4 o4 _* a, ]}
& d. T5 E# e9 @8 P' w; ^9 _0 v
2 D' P6 @# j2 n0 s* Uexport { requestAnimationFrame, cancelAnimationFrame }

1 Y' V" q' h3 Q, W: j  _) o8 ]
' J! o% i; B: |. I9 T6 W1
- C& k, T& X( @1 t' B& T1 |2
3
- B0 @, |8 B! d4
- {7 b. g+ e% \2 m" |5
" }! h" s, A2 G+ m# u; ]1 e) @6
7
8 k, g0 v& g& ^3 O3 {! E7 }8
9
8 e; a2 Z' m+ }3 `3 Z7 ^. j10
11
12
13
" U2 i" s- |- ?! l  l14
15
: K1 D. {* T: K16
17
% G/ g; A: v" y! c+ ^18
8 e& N2 f2 y) F4 z, ^) Y1 f, ~19
20
+ h/ L7 C, Y6 C" ]* X21
) V& a& y6 B' ?9 }22
23
7 ?" x; m- i2 f2 c24
25
26
1 @) Z* ?$ C6 r7 c' V' C2 o, }27
% ?& {  Z6 p7 K4 X  {28
3 s- w" u& q4 ^1 H29
3 r+ a4 \( W% N% p' t) i4 U0 R" Q1 A' ^/ A30
# s- u. J2 a7 X. I, T; F31
32
  g9 p+ C4 E9 Z7 w33
9 Q3 k$ F8 l8 r8 Q: z34
- p! E0 o9 E' d7 M2 u" R35
$ n0 a' a3 K& ~" e  l36
% V1 Q/ |  F- x* @; f9 Q37
, }( {# H# a( o* ]38
39
# \* d' I/ n. I, t& n" Q; Q6 [4 ?2 `40
1 ^  q  F! q7 j# k$ N4 X2 ~41
" }1 E$ X1 A  Y# u1 m$ Y) j% h0 z) p5 h42
4 t2 A6 e1 k, a, n; C5 r43
. t- F" p% x8 `* r44
45
46
47
48
CountTo.vue组件思路
, S: [7 L, I- s& G首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
" @7 b2 |0 s* Y7 f+ k$ E
: R+ E# m! B+ G( k. ~引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
, l3 b5 m4 c5 m" _5 j需要接受的参数：
/ {. |( ^7 F+ y0 x6 r4 P( v
: y- a( R' V5 p& Y. Xconst props = defineProps({
, u# r$ ]3 ~+ j0 [5 m/ A  start: {
; I4 @5 _% u% F    type: Number,
) e/ Q4 j& F: f; Q# Q; J6 L    required: false,
    default: 0
  },
  end: {
    type: Number,
; h& f5 F5 I; F$ \" S. V# m+ t0 ]    required: false,
6 ~  D# S* Z$ d3 C    default: 0
  },
  duration: {
    type: Number,
* B' L9 Y9 y2 _8 A: {6 H4 n/ u    required: false,
    default: 5000
  },
# Z! ~; e' S1 O5 G  autoPlay: {
2 M9 [& K7 g9 L7 s! ^- N1 b# k    type: Boolean,
    required: false,
    default: true
  },
. g7 t) H! y' C. V3 p( n. d( J  decimals: {
& ^0 |  Q1 Q% e    type: Number,
1 F: Y( p; E$ q  n2 D  m    required: false,
    default: 0,
* y& f4 X0 ]- o9 R' Y    validator (value) {
2 W+ j: o; F; h5 U  T3 R: M      return value >= 0
8 W( Q; S( n" c    }
  },
$ Z: V1 Q5 s) a# h; {2 A# U  decimal: {
5 i7 q/ s. y4 X) a5 K, Z% G6 K( z' H    type: String,
    required: false,
    default: '.'
+ y( c* g" P9 I" [9 k+ x& Z# [  },
% g& a0 I8 ]3 Y- v6 Z" L  separator: {
    type: String,
    required: false,
    default: ','
; d+ f, I+ w) l" b' p+ z4 K1 ?  },
7 }2 S$ p" h& M  prefix: {
    type: String,
' c% c" g: T$ V6 @' U( T6 z    required: false,
7 d$ a) ?# R9 U+ \    default: ''
# Y) M& e$ B! K8 V2 ^- q% q  },
0 }  N6 l* y6 o# g7 a9 u  suffix: {
8 N5 [1 Z8 t/ V/ l& E    type: String,
7 r% B6 r) U7 ~! h    required: false,
. N& @* _# [3 u; |/ a8 ]: s+ [    default: ''
  },
  useEasing: {
( ?, T* K. `0 A# y0 x5 A' _    type: Boolean,
    required: false,
    default: true
  },
  easingFn: {
+ X  l5 q+ A. ~: k. W$ K6 \    type: Function,
    default(t, b, c, d) {
7 \7 F4 ~! O- r3 @5 E4 k( \0 O      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
5 E$ g% }. ?0 g5 \, e: \    }
& x, k8 J  N0 h7 R+ `) k8 i  }
, x" ~4 q% K: Q" N- ^8 B})
6 v( ^- }9 f" a' L7 ?$ }5 E! D' }

1
2
3
4 G# I( M  A/ n& b- M$ L/ a4
, ?5 c, z# `6 k4 _6 H4 [5
6
7
5 [0 s$ @( b1 v& Z8
9
; z+ S$ O& G  |10
11
% g, l7 W5 Y( c$ ]6 v+ O- G, L12
5 f/ X6 m9 e; o. z! J# N13
0 A6 e& H3 Z; }* }; i14
# w# y/ B" h, w% }" Q15
16
' G* G( B/ M& M4 D6 M2 O17
18
19
20
21
- l% y* a; \9 v- Z0 u# {22
23
3 ~6 E" o+ g" X- B24
0 ]  [9 s0 w, g" Y9 m25
26
: T$ }( c/ ^, L3 X7 U27
4 S1 b6 Q' }6 U4 Y9 T  V28
29
30
31
- [, g* u. P% L. F* |32
33
% z6 r" u9 H' b2 a! ~$ B4 Y: q3 v: I34
35
36
37
( Y" |, x. x  |: M% d+ }# \8 o38
39
2 N. i4 d9 s2 e) m1 B( ]40
+ o2 m6 h2 J2 [4 v41
, [) X* w( {, A7 u- @42
& [, {3 Z# a% B; D7 A; ?43
44
& Q7 G! s( i0 @45
# x5 M/ t/ B  ~/ c  f, f9 o46
47
48
49
) ^( W: _2 C) a# O' c8 P6 F  T50
51
52
53
9 ~( s! {# H  S: ^1 k3 ~! ?54
+ a+ k5 g- I1 I0 L! h; H55
56
57
58
59
60
( y# ^) T8 o* e0 z# N* L61
/ K. s8 Q& x7 A2 M4 p' N7 _, `7 J62
启动数字动效

$ S; M! v  I  W+ O; q  mconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
  M& ?# Z( K4 e/ b  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
1
2
& R  f4 ^, {8 i4 \" R+ ~( E3
4
5
% D1 e( r+ s( ?: \$ A6
7
核心函数，对数字进行转动

; [5 A" R; Z5 S7 O, Y  if (!state.startTime) state.startTime = timestamp
4 p4 |7 U0 J8 W, S* a& D% z  state.timestamp = timestamp
) {! X; l6 K4 I: i6 \9 g& i3 S: @  const progress = timestamp - state.startTime
* t6 i; R1 r0 [! v" Q% E' o  state.remaining = state.localDuration - progress
& l4 s* s  T# b) q$ s1 D5 b! h6 Z6 c  // 是否使用速度变化曲线
  if (props.useEasing) {
. v3 S: \& r7 j; _6 \1 {9 ]    if (stopCount.value) {
3 P8 O: |0 E  w1 G      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
: X- c% ]* |4 I- O    } else {
: k, o0 B: \- o* `, W      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
    if (stopCount.value) {
. {: D$ _2 ~* K      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
! j6 ?( }- I9 o, P& i' m4 G    } else {
. O* k. r# F+ e% c% {* S/ B+ v4 }      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
* @. A' {" l. S1 o9 v3 U' m( T    }
  }
& j3 e/ b0 M4 O& D+ s/ W  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
+ P8 K6 J4 P* \, S  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
( o0 M( z! }# i3 P7 |$ L, u' D( W1 W  }
" \% K: R  I2 F
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
, h' |' Y: B' n% ~+ E. a, S/ {% P    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
6 g3 K& }) T$ x8 s. g# n; [}
" x* Q3 N$ J$ R

( E5 G8 b$ {' r7 _3 P3 O3 y! U" g$ B// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
4 j1 Z( u( N" F% r0 d) H  val = val.toFixed(props.default)
# q( N# d4 j. h& [" \& |; Z, }  val += ''
2 n. L( B6 ~5 `* ~0 R8 T) r  const x = val.split('.')
. L/ v3 l0 p6 {+ n! C9 |! u  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
7 J3 ?: K+ R9 C4 i3 D3 B  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
, _9 z  K2 M* C; E; L8 d      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
( b3 G+ B" l* m0 V& t# A$ I    }
' X) Z; w0 j# J& d  }
  return props.prefix + x1 + x2 + props.suffix
}

1
9 Q7 Z6 }( y& m$ T2
1 c, T: `5 ~- |* j3 M/ r$ M3
+ c- K  A5 G9 b/ D4
5
# Q! {% O# R  i+ \6
# F7 u8 b  s1 \: i7
8
2 [, z% h  v( s9 P7 \0 M9
* f! Y2 _) D+ j+ V; Y+ w8 ?10
11
: W9 y) H7 g9 n7 B8 o12
13
14
15
* }6 n+ {6 q& z6 ~( D! z16
. m% p: d, j9 b; {0 }, @3 Z4 z0 i17
18
$ I" J7 B$ b8 ]) R19
20
21
22
5 S5 r; ^0 s9 ~4 p0 |+ {. v- M- A23
, S' n! y+ W$ M24
25
26
27
% ^4 i4 }7 `/ M4 ]" D28
29
30
31
32
! Y1 R& ^/ C! e33
34
35
9 c% m7 K5 S7 X; _1 ]36
37
38
/ @7 p9 J/ l3 P0 ?. R  G39
$ B. m- p& W* H! b7 \8 e7 n. u40
41
42
. G. l/ j* ?8 D; Z% r6 u43
44
45
46
47
48
取消动效
% B& }3 s/ n! E, u9 {# F0 O
// 组件销毁时取消动画
" t$ Q7 R4 ?. J. H. M4 d& donUnmounted(() => {
- k0 j  F3 |  q1 e4 `# {7 e; F. S  cancelAnimationFrame(state.rAF)
9 ^' g  Q7 a& V2 ^% n. z# t})
1
2
3
4
: h7 d6 U; w% T0 j1 E$ r完整代码

" g+ F. \3 ]0 o<template>
5 J& F7 R4 q, J  {{ state.displayValue }}
$ v6 E$ R5 K' t. {2 T</template>

6 e: ]/ {1 l+ `9 T<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
/ N; V' I" a, @import { watch, computed } from 'vue';
: {3 h9 e8 ]2 F5 ?import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
const props = defineProps({
  start: {
    type: Number,
+ n7 C  {; O; P7 C% d$ Q, c    required: false,
/ p2 E& b3 j, z+ Z0 O5 g5 t$ Y/ C    default: 0
' ~+ D, i; s: x  },
  end: {
    type: Number,
    required: false,
    default: 0
# R2 z8 \6 v/ O5 m  },
* C5 v2 s) k3 H3 V8 j  duration: {
    type: Number,
$ F4 w1 ?) ]$ s- z) c    required: false,
; @$ V3 C$ G$ W/ X' n8 W    default: 5000
  },
* _5 Z5 k+ g4 g  autoPlay: {
5 u; h. V4 v" ~. I! v( z    type: Boolean,
% N3 [0 F* Q8 n0 D" F    required: false,
- P+ N; ?) a& @    default: true
* n6 a- `( \4 W  },
  decimals: {
' U( n1 W/ D( o) D    type: Number,
    required: false,
8 ]0 a) M- b( A% a; @3 N. E: V    default: 0,
6 a- c0 D0 C4 z# I" `    validator (value) {
" W8 \0 E: J( v! ]5 w3 B      return value >= 0
    }
7 m9 r+ b$ T) U# c% q, e  },
$ C5 T6 g* W# A" w  decimal: {
7 K; I) P9 u! P% [    type: String,
& Y/ i* M" G' r    required: false,
    default: '.'
, Y3 l2 T7 z+ B6 Q2 ~4 G  },
9 v7 I7 G6 [/ n& v' ]0 L  separator: {
8 W7 X# b/ @0 n; U  o3 y1 Q  y) \' }    type: String,
: f  ^" \# ~7 r) A# t    required: false,
    default: ','
3 n( v& p' P, v8 K5 R- V  },
$ z) o4 p! z% _1 p9 O# c" s/ h  prefix: {
    type: String,
0 Y- A# o) f8 s& @/ k/ S    required: false,
    default: ''
  I9 R" P2 s, u) a9 D  },
  suffix: {
5 t& d- |# k* [; F/ R6 i    type: String,
    required: false,
1 V+ O" S7 a& W5 P$ S  ~    default: ''
  },
  useEasing: {
    type: Boolean,
    required: false,
    default: true
) t) l& r- m( N" W/ W1 z& U& \  },
# M1 n8 ]- P3 b% M" Y! W  easingFn: {
    type: Function,
4 n" @* ?/ Y8 v, j: I: t' G# v7 f    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
0 Y: O$ L" |# |( A2 W    }
# e0 \0 g* T  o6 {1 Z' H6 \. z( f  }
})

' j/ H8 n3 n. _, f7 Pconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
: l" [5 ~9 M) c5 G' P  D. M. E}

7 ^- {! H- m! I" F# j* w1 x// 格式化数据，返回想要展示的数据格式
8 j* W0 W! n0 l$ g6 `! q9 cconst formatNumber = (val) => {
! ?3 j- \' G/ X; F2 [8 U  val = val.toFixed(props.default)
( k% ?# l- T+ Y) `5 `  val += ''
% l7 R! G8 d( {5 }5 j* q3 L3 N  const x = val.split('.')
$ b- p3 P" a) e! e2 m% Q! k" M  let x1 = x[0]
9 N+ Z; C! d* F  const x2 = x.length > 1 ? props.decimal + x[1] : ''
: h" o- a0 ?1 Q+ v: C2 ?- Y" G  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
- _% b. S: l1 J- L6 V' H4 T9 }    while (rgx.test(x1)) {
  U( ]7 y  F1 }% ?4 x: C      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
4 d3 R4 s9 w8 H- o' d  }
  return props.prefix + x1 + x2 + props.suffix
}

// 相当于vue2中的data中所定义的变量部分
7 j+ C* T) m! u$ p. iconst state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
  printVal: null,
4 Q& M; k& s$ {( L) r1 Y  paused: false,
( ~% b. k. }- t6 Y' N3 Y  localDuration: props.duration,
! X. J5 z) P7 ^, I0 V3 I  startTime: null,
( Z" p4 |0 T3 c' [/ P  timestamp: null,
  remaining: null,
3 L8 j3 @, {0 b+ j- H( }  rAF: null
})
- T1 a: f6 D' a; ~5 X
. u; f6 X/ g: Q: N2 I- _) Z3 Z// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
) v0 X2 V$ ?/ ~# R+ e$ ^})
. o7 b  |7 r8 Q+ ?+ K/ d$ ^// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
' g" _5 k$ [. z2 G4 n; kconst emits = defineEmits(['onMountedcallback', 'callback'])
+ c7 e: [0 s/ R' D& ?4 `& i
const startCount = () => {
; [, B" G5 z! |  state.localStart = props.start
0 G' ~, q' k4 i  state.startTime = null
  state.localDuration = props.duration
, S- k$ h  X6 {; W) K) O9 u  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
6 j7 `3 T; z9 Z0 X
watch(() => props.start, () => {
  if (props.autoPlay) {
2 O/ {, M, k% E  x' [    startCount()
% v9 J; K( m4 f1 a" ?5 ~  }
+ w& v* S, e$ T; p& H' C) J})

watch(() => props.end, () => {
, p, X  I5 C* S  if (props.autoPlay) {
    startCount()
  }
6 l2 d# ~0 u- E8 ^8 u. m/ i& D})
// dom挂在完成后执行一些操作
onMounted(() => {
( E! h  J1 j- W' h  if (props.autoPlay) {
    startCount()
  }
. Q% e$ ^5 b0 Z2 p& W  emits('onMountedcallback')
( |' U& F2 x( D3 M+ ?- {})
6 f" e3 S& U) x// 暂停计数
/ |2 x4 g" T% @+ yconst pause = () => {
3 o" M! Y) y6 ]  cancelAnimationFrame(state.rAF)
5 i( m: D% ?( A0 l6 G- \# y: Y! E}
' g' Z& C2 y- Q4 ^- @% G// 恢复计数
2 r+ `' \# J" y  Z5 G5 e# bconst resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
. Q, `1 t% V) {2 N$ _9 q$ J  requestAnimationFrame(count)
: ^' }' J  k$ `, |4 x}

const pauseResume = () => {
  if (state.paused) {
6 j" ^- z/ b! O) a: V" Q/ o' Q    resume()
    state.paused = false
7 h: B+ I& B4 t( S" _  |9 a8 o  } else {
1 r' S  K9 t1 n  N    pause()
    state.paused = true
# q' D  `9 ?$ k+ ?: S/ A+ s2 a  }
6 V/ q) n8 o) `: X* v}
6 \9 Z2 J7 c4 N0 y7 n' P3 B
const reset = () => {
3 A/ U& N5 [& ^4 ?+ H( E  state.startTime = null
# o! ^, x' [. C# D. W- [( B8 n  cancelAnimationFrame(state.rAF)
+ A$ y  |! b- F( E6 r, q0 E2 |2 O  state.displayValue = formatNumber(props.start)
  a! ?5 y/ |/ y+ g3 G6 P}
1 v7 I, O) u- M' f- D( ^
const count = (timestamp) => {
9 y2 e" P. ^) y  if (!state.startTime) state.startTime = timestamp
( _& N" v2 v, J) @; _  state.timestamp = timestamp
  const progress = timestamp - state.startTime
! ?7 W4 Z; t) }4 s; L/ l  state.remaining = state.localDuration - progress
5 G6 H: i2 `& \3 [  X  // 是否使用速度变化曲线
; m# @/ X8 R0 \  |  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
7 N- V1 h2 F1 B      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  M' R* z$ m1 P- {/ l  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
1 L* e' @+ s; \- }7 K$ e    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
2 Y( Q) D2 K) F% I8 Z  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
7 O6 ?3 s5 L6 \2 i3 g3 L  } else {
, _* Z% g2 J9 [! o. c    state.printVal = state.printVal > props.end ? props.end : state.printVal
( f) I) w  F) o4 C  }
# l% Z3 }# s6 ]
  state.displayValue = formatNumber(state.printVal)
0 U! m1 b! D& ~8 L  if (progress < state.localDuration) {
! v) W% [7 E6 H( @. ]" c    state.rAF = requestAnimationFrame(count)
  } else {
2 `2 P% V0 g! j) Z: |+ M: v2 m! Z    emits('callback')
  }
}
// 组件销毁时取消动画
5 C$ K, [" }, L( b4 D& i% ZonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
+ M* g/ e+ _6 r; W3 [</script>
8 _0 _) ]" K" ?3 ~% v9 j& S$ X
1
. t  T) ^6 L. d2
3
4
4 l2 o5 p5 H8 X' A$ o. l- c+ L5
1 Z% g, R$ o4 k- R* Q2 G) l6
4 [6 g& I$ s8 }4 \& K: P) [; Y  Q2 t7
8
9
) L- I3 H2 e0 ?, u# r, B10
- A9 M! ^' u! W6 E0 o3 G, ^2 l11
12
13
! v5 o4 w. ?! M' A  r$ O14
6 P+ i2 h5 K! W15
+ b* o$ u; H6 }0 Z" H16
+ P3 b8 I3 y# N17
18
7 v; [7 I& r, z4 ^' u9 K19
20
, E- P! _: o- ~$ r. S3 M. S21
22
. r2 V6 ~  R& |23
+ [* e2 u6 s& V# T& {$ s24
) l! R3 Y9 F5 d# I" \0 d6 b25
# O& H8 M3 i9 ?$ A8 p26
27
28
29
30
! V) _4 T' G2 V, ?: U31
32
33
34
35
( M, D9 b& m2 w2 q36
37
38
39
40
41
1 F/ K4 I& K6 F7 a0 P. F42
- w/ e# R2 X( m! T2 Y, Z7 G, B43
! U5 M- Q$ [; i* f, B8 w44
45
/ B7 N! P( y( l46
47
5 v, W& L3 C& ?# A- I* a3 Z' E48
. P2 P% \, w, H. c) r49
, r* o4 H1 @  }. ?50
51
52
53
54
  ~# E4 A7 H% o, X) u  J55
56
57
9 p* \2 v- [) q0 v58
59
60
  C+ S( B2 ~  k+ [3 l, W61
62
63
64
9 q# ]! m# a* W8 @2 E4 e2 v: f65
66
67
0 i" C" |: n* \68
5 S" d# T# b' G: [1 S69
9 k5 t8 x) E- N! {2 a70
3 V4 V% Y, P/ P; A, Y+ i71
6 u6 H$ `; }; B; L2 g) C3 `& T72
73
74
75
* I8 ?; }9 u- q" O76
( B+ Z$ b! u% B; e7 Y: p5 S77
78
79
80
81
82
* b- o, h  ?. K, b+ d# N83
84
0 c! K4 _# A7 R85
86
87
7 d  r# \# p) A/ i9 U8 N88
89
90
91
% S. y( T8 E. ^$ Q: d: A& M92
2 {! B5 O8 l+ Q2 F8 \. F93
94
0 N( F+ W9 S5 Z" j95
% Y3 l, ?5 T0 f( A! t2 M+ k( P8 l96
97
& W6 w) [" z1 W6 U( W6 C98
99
1 p7 J" d, E) q1 C100
9 s* i; Q! R; p) x  t1 i101
8 b& P2 l( `2 l* |) c102
5 c$ x4 _. r) U% C) o# t103
104
105
106
9 d0 d+ F* ?+ w- [6 O! V107
# t+ H) G+ K- `/ a0 z9 ]* E" A108
109
* o( Q, F5 Z# M( J0 O: r110
111
112
$ O, B" l: Y& T& b7 U/ `113
114
8 o. o/ K% @5 Q115
# `3 H/ q+ s# s& K4 `& f8 m: P116
9 x  k& I( ]' d0 u117
118
119
0 u+ v; c! W. `6 z) {1 m120
121
122
$ r% p* t8 m  R$ a- E! n# x123
124
125
1 p1 k4 C) D7 c" I; z: @126
! i3 \! [9 z* ?  k  x* k127
128
9 o% a" y& p5 ?+ b* u129
" b* p2 B% n/ R4 y1 n3 _' t) P130
0 K/ ?- J0 F6 B& Q131
' N3 o) j) A  u" i& }, h* O132
& e# C) i/ g0 c$ ~: E133
134
135
136
% C& T; R' h* o5 d+ f137
6 w1 Q& V# X2 m$ e5 \138
139
140
9 U9 |& C8 x% E& a5 L$ e, Y141
7 k  g( k) w3 B0 [. ^142
9 u$ }6 b- s& w  A& G- h143
144
5 Q7 U! ^) I1 h5 z145
) V, h9 B8 q- u( o4 Y3 e146
147
148
149
" v2 ]" a( D8 \% m* g+ B150
151
, Q0 D* S9 x- @, q152
  }  E$ ], L) s/ _# o8 S6 [. A153
) O% o6 A2 I2 R& g: x154
, o8 N# [! ]& t( F4 X% F0 U  K/ X155
7 h0 k! o3 R9 B0 I: e156
9 ^5 n+ L) ]  `4 G157
158
159
160
161
162
163
! N  r$ A, u. L164
  U2 c, W0 c0 t  _# _1 }  Q165
" l6 C' c" O  N7 ~166
, w2 D3 D& \$ `5 G5 d, M167
, z  M8 G/ e  U: ?; U0 z168
169
( Q# C9 I" N/ n3 t9 R9 ~" o170
/ s# ^2 E  O( w171
3 \) ]7 O7 z: w& `( H172
3 ]& L0 V8 O+ O" ~3 Y. X173
; W2 H$ I1 n, T/ P. D174
- ]/ c7 L4 e1 ?175
9 k  f4 m0 U6 J! {176
. c# y% J9 Q& }6 d) H6 b177
' Q9 `9 H& o) C, U9 I2 k, z178
$ W" j* j/ {( Q, t) U179
: M# x4 c* T  j8 x5 r. H" \3 @180
$ @3 I2 U  w- t3 C- O& [2 d' i181
182
: `- l, G# \, u; h3 ^3 i( @183
+ u  O( N& w2 Y: C2 i184
4 u' ^/ Y! ]/ I( b; `0 z185
186
187
0 J9 r8 l( h9 Y9 g, o188
189
$ S( x; }& B% s& n8 W190
191
192
; x- e: B% h1 g0 R1 s( }6 F8 f193
- z+ p. ~7 T' j7 I7 O' m194
195
/ b3 G5 r$ Q# E6 E# u196
0 F) s, `" _: C# b197
198
' B8 @; J1 `. C* T% }/ \4 H199
: y! W3 P# k/ z200
6 i, v7 H) ]% E2 |7 u& `201
202
总结
& Y+ a* g5 P% ]3 S3 [5 F3 \$ U自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
5 p$ ?- T- _. A7 ?4 J$ t4 {
demo演示
后续的线上demo演示会放在
demo演示
  Q2 E/ t$ T/ f9 |' Q0 A3 m完整代码会放在
个人主页
  d! S) g- }6 R+ M
希望对vue开发者有所帮助~
/ q% {! J; ^, I  c3 m% J
3 |% R" v' ]8 Y% ^" u  o# [个人简介：承吾
8 b: U0 i# b0 n! n+ i5 A" q工作年限：5年前端
地区：上海
" }5 K! [- D  b9 o' f个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
- {2 R) z  }/ x


# c* P& t( a( R" K3 v
————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
9 \5 t4 |  D7 s* t原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847


  c# X9 W" J/ k5 E, G; W3 g. w