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

杨利霞

vue3 | 数据可视化实现数字滚动特效
. b5 J1 r0 f" m5 A
. X1 V$ F1 e6 S, J' |前言
" O; W" `. a6 I- `1 _" Xvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
0 K: i+ i, r! l( p" P的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:

+ J* J. x  w) m! w8 g) ~
5 E- h. b! ?, @" S' L- Y$ J思路
# j# A- l- N: f4 e使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

文件目录
5 r; o0 w( W1 }. t9 F) [/ o

使用示例
<CountTo
:start="0" // 从数字多少开始
$ d8 G. m1 R# O7 R :end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
9 K# i- ~+ v+ e' B) I prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
1
. R/ k1 k/ p" ?' p7 B  q2
4 N; x8 Z! V0 n2 j. [; r' @4 v3
2 k# Z  O  c+ D( e7 O& e4
/ _" B& X# i& i+ a: R1 r5
6
; T1 J' a1 n# g  J7
8
入口文件index.js

const UILib = {
' F" _- `4 j; d' s9 l  install(Vue) {
    Vue.component('CountTo', CountTo)
  }
}
1 Z. p' B+ w) K- M
$ L1 [' i0 r" o$ P  A$ Lexport default UILib
" _' R  B% E$ B+ \/ O. ?
. m- |! w' D9 J$ R  w, F; f! K1
2
+ O- d5 V/ x4 x* R7 R3
4
5
' X  z& v$ P# |9 q6
7
8
9
: h$ h7 h' v/ R9 ~main.js使用
( S& z, W; ~, D9 a( timport CountTo from './components/count-to/index';
app.use(CountTo)
1
2
& o4 E! S( q/ ?# H- O' ?requestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
; S. w6 |9 B2 c1 R8 w8 S如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
$ Y) Q" @) `+ s) G# Y! o- n% _. Y各个浏览器前缀：let prefixes =  'webkit moz ms o';
3 Z; y& f) Z& v6 ~  C5 @# {+ N5 w判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
, l; M: V# E6 e# |let prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
/ k; F+ J! M) M$ H7 ~* S1 S// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
: d9 b( {2 v, c/ z    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
  I) s: u7 N( f4 h0 j" _0 r        prefix = prefixes
/ n& o( R( N) a/ G& E8 p( D! n        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
* A' `/ h2 c9 r4 K        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
9 \: Z/ B7 o% Y4 }! m- U    }

  //不支持使用setTimeout方式替换：模拟60帧的效果
, b$ \0 g3 C4 s: z, s5 Q2 J  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
2 n, B, G' m& Q) h    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
9 b% Y+ U! i0 h2 w: j            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
) p) o4 x5 k: V& E2 m* W' Y            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
& G8 e" u2 \& F8 h8 r        }
% v4 i. H8 o1 U/ H
        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
+ @* L0 K  E' p2 W5 D+ A        }
    }

2 A8 T: l( ]. y* @1
# ]& }8 M% S/ U2
3
( R8 F7 |) E3 T/ M8 j4
- Y" [6 q7 d# F9 S5
6
7
8
9
10
" l; [& l8 N6 L11
7 F4 U# _+ `" E& r/ }12
8 r+ o4 _5 B3 D, j" z13
. V5 U0 J2 N$ b* I14
15
16
& \# f7 O( U9 G/ l; v: L9 p6 F1 ?17
18
19
% h0 n- [- k! b$ Z& J) Y20
21
- k; I9 o3 Y3 z22
- n! {: R+ y& Z. {; l% ^23
: ?) r  j; o- N# D, h24
' S9 D! m6 [9 J, c0 I4 a, l25
26
9 B7 ]4 `8 n# w0 a0 w3 S+ X+ x27
! x% A, Y3 i9 _& l/ U7 H0 ~28
' n, Z9 ?. F2 e29
0 L: y% ~& n; Z30
$ q# W$ }- G0 D) r/ g/ k31
32
, G) @" F6 x" Q完整代码：
requestAnimationFrame.js
# q$ c9 j7 p4 t, y0 Q: }
; P# p5 {5 `& d) I( mlet lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

  {! f! M3 o' B" x1 F: w( q- klet requestAnimationFrame
+ W6 ?* l! w, a& Llet cancelAnimationFrame

9 `# c' n" |; S2 q' O. G% O// 判断是否是服务器环境
7 S5 s, R8 g2 V4 S# \const isServer = typeof window === 'undefined'
, {; j% s$ P5 n$ X8 Lif (isServer) {
% r" b5 e+ g; `. L/ ?* t    requestAnimationFrame = function () {
        return
    }
    cancelAnimationFrame = function () {
        return
& {! e' z5 l/ T2 J- q0 x: H- z    }
' P3 f. E5 Q7 s! L} else {
    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
  S: K* c4 I# n* B7 o        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
5 C% U& B% _" U0 H
    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
9 v) ]: a9 e3 @, c) G( T; X    if (!requestAnimationFrame || !cancelAnimationFrame) {
5 H7 D7 m& G3 D+ h% I. I        requestAnimationFrame = function (callback) {
! t* y7 c* A) a- Z            const currTime = new Date().getTime()
1 X" A8 |: r5 c; D8 h            // 为了使setTimteout的尽可能的接近每秒60帧的效果
" x2 m9 R# h# S0 o& l            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
# }2 i: q* g6 I2 i! K3 G9 q                callback(currTime + timeToCall)
( v) h% {# P$ J0 E/ w            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
1 [+ J5 U# K7 E" ^        }

        cancelAnimationFrame = function (id) {
; r6 x8 @3 v# [            window.clearTimeout(id)
8 \# ]3 ?7 S4 o        }
% c9 w; Y. d* N' ^8 i    }
3 M+ I) j: N! J, b1 u  ]}
/ s: M& ^; s/ g) ]3 ^' r/ R
/ l; G5 s& `. X( C3 ~+ q4 [export { requestAnimationFrame, cancelAnimationFrame }
7 Q9 y0 X* j- `1 J' d6 U6 G

' }6 ~" S8 O2 u# \+ e4 h9 a0 Z1
7 }* O0 C, N  B8 G' |2
8 h9 L  Z( L2 d3
9 w" _% f1 ]9 ^8 Y/ R% Y4
5
$ p; s. b( ?* t6 ^% _6
5 ~6 Z& f2 }2 E6 p3 B+ |7
  G$ i$ E( u* R% [" B* C" N) L6 n8
9
10
4 a4 W5 P. K  x( P: ~5 a: k11
12
13
4 V$ J5 [8 S  R2 u1 {2 K14
15
16
17
18
19
20
21
9 V0 O, a+ Q1 [0 I# K! P22
23
. N7 V6 t' G& F0 V& l+ u( ^8 p24
25
, E) \& D9 {. @/ Q26
27
28
29
30
" N* P# {8 D' L5 T+ v5 [31
! U; B0 T- V) r: J# a$ W: Z32
33
34
35
36
37
38
, w6 O" f0 g5 t% z5 n39
" u7 B( t8 M# Z" t7 \40
0 e* _9 Z3 R7 T+ C8 r41
( H, u& }7 o" @42
1 j2 R$ T$ \8 C43
44
45
, M2 z" s$ U. l$ e46
( @8 p& H; {' d) V; f7 |1 r4 R  O47
48
CountTo.vue组件思路
1 ~* m3 B3 z5 j/ W& }% L首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
' L, n- v$ u% D/ o3 b' \
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
+ d, _  K9 t$ E* x1
需要接受的参数：
; x4 [$ O$ k0 o$ t  J
const props = defineProps({
  start: {
    type: Number,
* s, _3 H! m/ m& q. D. T    required: false,
/ t1 e! q8 N! h" w1 `+ t    default: 0
  },
, E+ u+ y/ N/ G# T( N* C  end: {
    type: Number,
    required: false,
$ d2 }5 i: `* O: k" B    default: 0
7 F, U5 Q4 y# w0 X  },
  duration: {
/ \- Y: I2 x7 x! ]    type: Number,
' o7 `' O; G" j! I( d    required: false,
    default: 5000
  },
% n) O5 P. |+ U% M  }) {& ]  autoPlay: {
    type: Boolean,
) v9 c. C- t7 D    required: false,
* A! s0 V& P  ?. O4 k3 u# `    default: true
2 K% g/ ^+ I3 A; c, A  },
  decimals: {
9 V! m7 `& Q& J- ~) o* M( V) Y' q2 I    type: Number,
    required: false,
    default: 0,
& M  @" p; ]2 a6 j3 Q- ^$ K    validator (value) {
      return value >= 0
9 R" w0 R' d# ^2 |0 R    }
  },
! s0 k. V: _, u- c  {  decimal: {
; U5 Z0 K2 e4 U    type: String,
5 Q" O$ [6 X" g, V' X+ n# |& @8 s    required: false,
# L% ]& E) k( V5 [    default: '.'
  },
  separator: {
1 _2 x9 x+ @. v- l    type: String,
    required: false,
    default: ','
4 Q1 Z( v$ y8 B8 w; _0 i; R  },
  {2 H: o7 u+ A* Y  prefix: {
; @" l/ {. o/ {6 `0 F  e    type: String,
    required: false,
' G% Q9 P* ?2 A5 a! d6 g    default: ''
1 ?4 C& R6 w) a" x& q# e3 m, f  },
  suffix: {
5 s+ A1 A. T- Y/ Q9 [' L$ d    type: String,
    required: false,
- ~" o& f9 Q/ I& L5 L, ~3 B$ V    default: ''
! J- e1 ^. L3 K. C4 w* S2 A  },
9 x  E' r4 d) l6 L  useEasing: {
    type: Boolean,
    required: false,
    default: true
  },
  easingFn: {
    type: Function,
" {4 ?: s6 J7 m& z" y. g6 N    default(t, b, c, d) {
  @& X4 C- B8 ~+ t/ y( i9 k      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
7 A5 t2 U3 C* U7 O  }
})


1
2
3
4
) E3 Z$ H: M( S4 b5
! ?) i5 b  ^' Q2 p; h5 S' ~6
7
$ h/ O4 n, a4 c0 d! l% E8
9
6 U9 Q0 l. V' @( K  r10
. U6 I: M7 e- U6 |( D3 [* P11
12
13
14
8 ]  ~6 J! S8 o2 n7 A15
16
17
/ C+ @: S9 t: C2 B) y& v7 s' y18
19
20
21
: v' M9 w) Q" G% e6 ]7 J5 p22
23
: @# e& h2 C7 `) {24
25
26
27
28
9 r  y* O! j: W7 b2 X- ~0 J29
" Z# b( R" |6 C9 x# c- X# `30
( O5 X! S9 p" f, ?) }31
6 Q3 U2 _7 ^* D; Y32
) S. D& G% g4 D9 ~33
: j! S9 b0 ^/ Y( }. P' m- w( Y: L9 O34
35
36
% Q( E+ k% s" A- X# x4 f  i6 b37
38
, n7 m: u) G5 c* Q39
( b) L8 k& t5 H8 ?$ J) I40
41
42
43
44
) h, H/ q: M1 N: C- K$ b1 C. U7 K% }45
46
47
* {" i4 {/ e* ]  l9 q2 j, k, J48
. W( U* v4 K" n* c. I  X49
. q; Q+ f5 y$ E50
51
52
; b- v  V  E0 t* a4 O0 G53
54
! o2 _7 H+ S& b: {+ L55
' r- I3 O# K9 s) w: c7 p56
% @( [  [9 t( ?- I. v57
1 S) Y8 ?& h0 ?+ c58
59
  x9 d0 Q1 Y% p" F4 U6 ~60
  ~" [- y6 v+ o% A& y8 b5 a7 v61
62
2 B  T. J. r: x! i9 C+ F$ L/ w启动数字动效

const startCount = () => {
  state.localStart = props.start
$ p! C- |0 P' K* t  state.startTime = null
6 x: D* p2 u  W  state.localDuration = props.duration
1 t7 z: C) N/ F! F  state.paused = false
* X. T; n; X1 [' e3 F7 a5 F% @4 ^  state.rAF = requestAnimationFrame(count)
, P  F% @7 w: Q: F% n& ~& J- J}
1
2
' C6 R1 W6 Q* c2 j8 z3
  I5 k# o! ~* b! e: J4
5
- T/ K* i9 d2 f( d) P6
$ x4 n* p' G7 [* ^  b4 G& l7
' F1 j% I1 `2 G/ ?, v$ \核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
; s- l4 d1 i2 J1 K4 o  state.timestamp = timestamp
, b: ?4 g- ~( x* d4 Z  const progress = timestamp - state.startTime
; I) m) I% [! k' M8 ^5 p* K  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
1 q; i- h) t+ \! i2 L. C  if (props.useEasing) {
' {  b' R( ?- W  z! d8 r& ]' ?    if (stopCount.value) {
1 w7 Q0 y. y# |1 x. i. P      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
1 u9 G+ Y# b" Z; ?, g+ h    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
* ]$ T1 C( ^  P" t    }
( U* @8 Z4 J* j$ J6 j  } else {
, Q5 j0 {. S- f8 W3 n& a8 p    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
/ d* X1 z6 l/ P; o/ _  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

5 H9 q( h. X& L" @6 C; _  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
9 ]0 P1 E+ c, U% t6 ?! e6 H1 f    state.rAF = requestAnimationFrame(count)
& T' Q6 @% s! U" \  n: g7 t4 v& f  } else {
. _8 l% s4 O- ]. N' n    emits('callback')
  }
}
' {0 y/ H5 @2 I+ D( O. X9 @
7 i( B$ d/ U8 I' C0 W
) v& y6 s+ m; b# j! J/ e// 格式化数据，返回想要展示的数据格式
. a9 \+ t6 T0 O8 oconst formatNumber = (val) => {
/ Q1 Q+ [" D$ o# p; Y  val = val.toFixed(props.default)
% Z) z( ^+ ]8 x' ?2 T- o  val += ''
8 a5 T" X' w5 k) j  const x = val.split('.')
  let x1 = x[0]
3 S" j, t* C4 A! b  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
$ K1 K+ u! @& Q) B  if (props.separator && !isNumber(props.separator)) {
0 c* r6 g+ i" I2 p    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
  return props.prefix + x1 + x2 + props.suffix
}

1
2
3
5 o4 N, l: b# o+ S+ k4
1 J* I  |( k. |+ x  z) k5
* G; V( ?3 }5 t/ S6
3 M5 \2 N. m& O" ^! k* x7
8
9
1 t- _- G. s7 x: i. }+ a10
& L6 ]/ w8 X. J1 }+ b+ U! W9 O11
8 H* D0 E3 j3 j7 w+ N12
9 U9 U. Z( y2 P1 P13
14
15
16
/ Y5 E/ F9 t# |, D17
18
( k1 u; n- C  A- q9 F8 p+ n19
' t# t# z- R8 V# z20
21
* a! B2 f# b3 ?22
( d+ @! l& l) J- d( \/ I8 ^23
24
: N4 k' [1 r# w5 a25
& }! m* ]/ V* I8 _: k26
8 q/ Z4 M( G# m; L* o9 l27
5 n9 g1 l6 i$ f" ?28
+ d1 V& u7 m; f8 u7 [2 a$ }29
" O8 N0 w( g! \% j4 q30
; }2 [5 k$ l# Y7 s* Y3 {% Q: e7 X2 A# k31
32
; i( A  b2 K- B- d& i" r: y1 a33
34
35
36
37
/ P2 p1 Z* ^2 c, l' L38
9 ~+ V3 u- t6 M3 W8 h; n: N39
8 B6 h; {& F! r40
41
42
43
44
9 [/ N4 J" \% i3 w# U+ f* l45
46
6 W* q; U1 S7 v47
48
4 z5 d& |9 q, n/ f2 t# _/ f: K取消动效
4 W5 c' i1 Q; Q2 U* L
// 组件销毁时取消动画
) u% T" t2 s- \onUnmounted(() => {
2 P! m8 n5 w* L$ ^4 ?- r  cancelAnimationFrame(state.rAF)
})
' J2 O( c! @+ k, A2 k7 i- G$ I1
2
9 P, |: s& ]6 Y2 p# [5 m6 t7 Q3
) |: k' ]  S- k4 Y. c' r( f4
: n  b6 v+ L5 n完整代码
# ~: }: A! a9 q5 @8 o6 |
$ ~) Q5 M1 L$ u<template>
  {{ state.displayValue }}
0 p% t  J9 i8 x7 }4 n4 S! F6 _0 Z</template>
; C7 p) |; i7 C: n; Q% v
  d8 y8 T" j, L2 t; a! V& \<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
9 O$ }8 S1 ]0 n+ P1 _$ ?% F, ?import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
( b# h7 u3 h+ ~+ d! z- ]import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
- o) i0 B7 q: y( e! {# cconst props = defineProps({
  start: {
. ^- V3 U4 l$ J" Q2 A5 o    type: Number,
5 w- |$ A. e: Q$ q) F    required: false,
7 V( G/ e: i: E2 P, x5 f    default: 0
$ _* n+ y+ A0 l7 m/ e& C  },
  end: {
4 L6 F( F  }2 s) u: N2 D    type: Number,
    required: false,
' D* [* N: U. a0 W2 K    default: 0
- W' j+ ?+ F' [. A; V, u  },
  duration: {
    type: Number,
    required: false,
3 W7 u6 L. X, h2 a6 l7 `8 e6 r" \    default: 5000
  },
( T( d4 w" ?/ H/ b7 p+ }  autoPlay: {
    type: Boolean,
- f! [2 D7 N, P- g    required: false,
    default: true
6 \/ D. Q, v5 Q4 X6 ], G. M* l  },
  decimals: {
    type: Number,
    required: false,
3 Q# y( ^+ D8 Z7 ^# D! j" b    default: 0,
    validator (value) {
: ^  }8 p) S) A$ `2 d6 g      return value >= 0
    }
3 S' l# S4 B3 N  r8 S5 X( \, F  },
  decimal: {
    type: String,
; _( w( Y2 J5 n; s    required: false,
% u5 n: K8 ~) E7 @# z; S+ a    default: '.'
  },
1 k) w8 M; c7 S/ D. C$ U' i3 j8 }  separator: {
% {, a( r" H& R. n0 ?    type: String,
' s. }) n$ w# E- e    required: false,
    default: ','
" |$ D3 s  W: [5 W) c; R  },
  prefix: {
) z2 n" ]. w* ?) I6 L$ `    type: String,
& j& e3 P# b9 I6 y. N    required: false,
* b" @5 [+ F! [9 W2 m+ {9 C) E    default: ''
, x, K' u* Q5 K8 b) R) s; E  },
0 d- X; U  T( g7 }$ G# C$ H  suffix: {
& W$ L! m8 C4 ~; |$ E  c& D' G7 ?    type: String,
3 z& M$ f$ G% b5 n    required: false,
& E3 l# E1 G# Z! p- D/ r8 c    default: ''
  },
* T  O( d. d, k: s% p' U  useEasing: {
    type: Boolean,
    required: false,
- _7 E- w) p2 M) f, K4 d( d    default: true
  },
- J& |* l/ k. M, I  easingFn: {
* m3 a9 u2 d1 z& k1 f    type: Function,
    default(t, b, c, d) {
# i! `6 @, w0 u1 H( z1 s      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
1 n7 v8 D* E7 M6 C- i. c4 i0 ^2 T    }
% L0 \7 ?; W3 V1 [  }
, B; {0 y$ T' Z3 N) w7 s})
2 K" n1 I5 f6 f- x
const isNumber = (val) => {
) M2 c# P/ w+ o) C+ Z: q( a  return !isNaN(parseFloat(val))
, a% L8 Z( _( g}
9 L; S! Y% X$ L
// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
! ^7 B7 P6 W1 u7 S6 f! S. U' ^  val = val.toFixed(props.default)
  val += ''
) O( `: }4 t- y  const x = val.split('.')
; G0 y  ~! z3 }3 ~, y1 p  let x1 = x[0]
) A: _7 Z* |+ i0 H# k- U9 l; |  const x2 = x.length > 1 ? props.decimal + x[1] : ''
% {3 ]- q2 d8 ?% q7 I! W6 q7 P! ~' p  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
# ]! F/ a$ m# ~! b    }
9 m" K6 e( f6 l6 G3 a9 O6 f  }
  return props.prefix + x1 + x2 + props.suffix
}

// 相当于vue2中的data中所定义的变量部分
9 p& O! ~, }& S) Y& Y+ P9 tconst state = reactive({
  localStart: props.start,
& [+ V+ p1 d# j, L& x6 `7 @) f  displayValue: formatNumber(props.start),
9 i) Y: ]' q; m& p+ v: z. D# s  printVal: null,
  paused: false,
* R9 q4 ~' ?+ Z* w! U: q! j/ ?0 K  localDuration: props.duration,
* X( }/ U1 E) t8 [2 s  startTime: null,
: s( q, f+ ~9 _2 C5 }3 q  timestamp: null,
, ]; J# S8 ^4 I/ T9 \$ V$ b  remaining: null,
8 g/ ?" l  \) |/ r- G, Z& Z) y  h  rAF: null
})
5 Z; I& o6 b1 k6 J' |. a3 }) U
" k1 D. g+ ^% T& N, W! m& K// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
: m5 x" Y% a5 O6 d/ l  return props.start > props.end
2 ^, U) s" ~9 ]1 Q% Y})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
, d/ A! F9 y1 xconst emits = defineEmits(['onMountedcallback', 'callback'])
) ^% v- R) f1 x. a6 h
! m$ q( Y6 b8 p( }) R3 z' Uconst startCount = () => {
  state.localStart = props.start
1 L0 g. n: o( Q' X  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
/ J) h+ F# q+ ?
3 Y5 x& Z) K  t2 _# Y/ fwatch(() => props.start, () => {
2 k, U6 O/ C- P( S9 K* C# T: `$ f  if (props.autoPlay) {
" K  V5 }2 _7 Y1 ~: X7 @    startCount()
  }
})

watch(() => props.end, () => {
: a! F, c, g; \. C8 B8 X4 f7 I  if (props.autoPlay) {
, k4 k5 X+ W& A    startCount()
  }
})
// dom挂在完成后执行一些操作
onMounted(() => {
4 k3 i: C, X8 W/ z, O  if (props.autoPlay) {
    startCount()
  }
  emits('onMountedcallback')
, t% S, O/ `7 k4 f' P& D})
- H, I( i) ~7 B// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
}
8 ]# [4 G% d! j7 t' @! l) z$ n. z// 恢复计数
3 {" @' b4 N. Z' k2 H2 Kconst resume = () => {
  state.startTime = null
! f+ ]* x3 d/ q2 P1 j' l  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
}

3 g. H& y/ t' C5 X8 X3 y) Lconst pauseResume = () => {
  d0 P* h2 W. W! t! e, ]9 H+ S  if (state.paused) {
    resume()
* j. s( L" l. g    state.paused = false
  } else {
* E# Q4 b0 ?  {! C( z# h    pause()
    state.paused = true
  }
4 `. \! D8 t8 @  h2 t; \% ?. T+ u}

9 T# r  R7 a8 X* B: W% j, _" D& jconst reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
; f* w' E$ K: h4 z- C1 x  state.displayValue = formatNumber(props.start)
}

const count = (timestamp) => {
  f# k  B. K5 L8 d7 q  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
6 F1 d- a8 z& c& |! O  const progress = timestamp - state.startTime
4 M1 T4 m/ N% w& {. c- R  state.remaining = state.localDuration - progress
% N8 }+ U' n9 b  T  u  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
& w4 Y) C6 z: D( L7 s    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
7 Q- F2 E! u* t9 n    }
1 e4 M4 y3 b4 _4 J8 X  } else {
" [% e& ]* e. E- R    if (stopCount.value) {
$ j2 J: f, g+ G/ ]      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
- N8 H1 P7 |7 g( B7 o4 H    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  N6 |" U" c5 F' ^' a4 s  }
9 T6 n" c% l8 I( u  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

7 Z# \: Y9 O( k/ Y& G+ K& F  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
1 x- U& U. Y! v; h    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
! U: ]+ X% m: ?" g( C}
5 ?( i& t6 r' f" e" p// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
8 G! V( F2 T: [! x( E})
</script>
# E2 n0 W  Z; k' A" l2 T4 k# t
# f6 f' [3 X( x# Y1
2
: F% u1 w3 O5 I& C3
4
5
: T, }# z6 B5 x; T: X6
. ]! G- E  m4 p0 [9 L+ B5 w7 M& ^. E1 ]0 y7
8
9
' b% ?  J$ k1 y9 ]7 s& ], T10
8 D6 r  M# |# M# b& {11
12
( h& [' o' h: b3 G3 o13
14
15
16
17
18
/ x5 x# G/ G. D% i19
: [9 W0 D, _3 c1 x- m) }, L20
( a( o% r; i0 Z$ V& E! @21
22
0 `4 k" K$ F5 ~23
( H. R, F. I# y24
6 w  E) Q' ^/ a* i9 [0 I: N3 i25
. G/ d- a8 }/ b1 H6 R: ^26
) I0 F8 H1 l& y27
, i4 R" j. e* R  _6 e- D$ j5 Z/ n) r28
) b6 ?8 Q% U* j2 f+ m29
30
31
32
33
34
7 D, r$ Z' S1 W35
+ J% [6 h# w! L36
3 o1 ^! z6 G: E  p% {$ h& {+ Y37
38
% W( w2 {5 C6 w8 Z39
( @( e+ x; U3 G! f40
41
42
43
. C4 s$ Q9 w  d$ c( E: X& k# j44
45
46
47
; q3 h! ], d1 x- x' {0 {0 n: {48
; D( w! n+ u4 |% P1 z; P- f; ?49
9 s8 E+ h' F; ]& l; }50
; e6 ]9 }/ X0 u7 T3 \) W5 F& c51
52
) `' @! G$ S4 [53
54
55
56
- X$ o4 k2 M. v; _8 n! ?5 R57
58
& f( K) K- Y% v" @59
60
" H1 n7 J$ }9 h* \61
62
7 p# J" M/ b. a7 r& ?63
+ V, a  r# d, Z0 p64
: N+ U, h5 r6 L% ]65
66
67
$ e% B$ V/ k% D& d2 N* a* W1 i68
! j8 R) O6 [, A, [, D69
& J5 J& b' i; E6 u! s70
71
/ `, L. t& {3 x; b# u0 J. C72
# {- R! @% j3 b& B73
74
75
76
5 J. a% x7 F3 Z  s5 Q; n3 a77
78
79
5 E( w2 q& T& M) _' o80
0 W% }- l- c* }5 d" m3 D81
82
3 g  f+ X4 F( I2 G1 c83
84
85
8 C+ U+ h1 a7 X% X86
87
88
9 i' w( K- `: v  e5 k. S1 H; d# X89
90
: k  o* C) U  k91
5 D, M. [+ I# J8 w( D92
93
94
. \* }! d2 h0 U$ F. n3 ?95
96
97
98
99
100
101
1 N4 Y" Y, B$ ~; g7 |/ n0 n' ?( M102
, w) B$ v# S- F/ P103
1 B# x$ ^" M+ ^3 D: U104
- X% i% a% M3 [9 Z' ]/ w  p105
106
107
108
) \. E% j, @0 Z+ j" K5 {/ U109
110
" j" u, R: R( f1 L111
112
113
114
/ f7 F( J: G& o$ ?115
116
117
118
119
120
121
! F. S6 i4 R* d' {* w122
9 B5 {* p$ _7 R123
$ }% ?. I$ L& X8 q( v4 D) P- x124
125
126
3 l- [% O* w! |127
. j  M: X% Y- x( x128
129
0 P# g& z& V) s% Q5 u7 y130
- ~' C' r; [7 Z" M2 K# ]0 O131
; u! {# ]3 _: n# Z3 p- p% S132
6 B7 d. W# ^) u' [133
3 k0 ]' c/ P5 r( d134
135
9 C. X9 J) j( C/ V7 E/ X136
- s+ q: m* h3 R5 M" z  J3 l) r137
138
$ L' x" o! p5 f4 p  t3 _7 A139
140
141
0 D7 b# O$ W0 A- V. L5 z0 d142
143
144
+ h' S8 s  w& B* _/ w0 |4 _- F3 U145
3 w% Z6 O3 R7 }. o% |  b6 f146
147
" ^& P3 V! j7 G: t, P148
/ U8 e& {$ Z* p& j3 d149
0 S" Y$ v- u) B8 @; }150
151
152
153
154
155
# \. T" R) v# U7 m156
% b4 Z! H/ ~/ f) k) V157
158
159
160
161
162
163
164
165
- o( Y7 D  V+ X# ^, ]166
( i" I7 G8 g/ P8 ?# Z6 f167
, F' Z" v+ V! o8 q; h168
( t! d) b. }; e) G4 M2 ^169
170
171
172
2 {' h# u* i* }! G173
174
175
6 S4 Y. s" a) m176
177
" v2 Z9 V# I* P) H! Y; p- n0 A% d178
179
8 K. I7 {% t5 e  f6 b. C180
) p. S7 a5 T0 Q# n2 C181
182
183
184
185
186
2 v1 N! k+ M6 t( F4 q" [187
7 h" m/ `1 ?) g; c188
4 x- e* ^( m+ ~- o% ?4 |, Z& D) b189
190
191
# i1 ^: W3 i8 y! h7 b9 G# i192
193
3 b, [# R3 \( M1 B$ I* k7 Q194
195
196
197
# B" e1 `. X( j7 D: ^198
199
200
201
202
) A, N" A! p4 A, o( ~% {! ]7 [( j; t2 B总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
2 A* v& N8 E5 e5 \# F& m+ b8 [
demo演示
后续的线上demo演示会放在
) M$ l/ I- q# _4 M1 Fdemo演示
8 j! ~2 @" s3 A9 M完整代码会放在
6 W8 @! _* {( q; |个人主页
$ m& ^) y  X% b4 j+ B* g+ I9 |
希望对vue开发者有所帮助~

个人简介：承吾
4 t+ B7 u* @, D) v1 T工作年限：5年前端
2 ^+ _4 f$ k/ R地区：上海
% i& D6 H* g. K6 Q$ [: g  h0 y  i个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！

3 z, c! @: V  l, j8 a
8 C+ P) O$ _1 x- V* k7 Z# X
4 k. p9 h- v) z7 Z7 v& B; O7 E
————————————————
1 a: ~  u9 S9 x* n版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
) g) C3 q# t) g% G7 c( T8 m原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847

9 p1 a/ X6 R0 n1 J; v