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

杨利霞

vue3 | 数据可视化实现数字滚动特效
" K2 b5 p  |3 M
前言
9 E) k2 i' g7 X& y( M& H( }vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
5 T" U( z; C2 j4 }' q7 C, e的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


思路
7 o8 \8 F7 R, G4 L4 w% [5 A使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
( q4 z$ u, c0 f0 D& H& ]4 }+ u0 i
文件目录


使用示例
% s7 d! E* J( J<CountTo
:start="0" // 从数字多少开始
9 l. @. l4 `# m: H; W- |7 p5 Z :end="endCount" // 到数字多少结束
1 a* T' x, ^% G/ v :autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
  k1 ?9 l: e0 g0 D8 m- y suffix="rmb" // 后缀符号
/>
1
2
: w  l; m) a( D' [/ A4 }3 d) ~0 J3
+ r' M# C1 V6 V8 E( \$ N4 g4
5
  z5 e: m8 e* o( ?5 Y6
. ~- M+ j" g& S. k5 ~0 X5 l7
# X/ @" @5 _' p/ Q8
/ F% e1 U0 B+ V" \! o入口文件index.js

const UILib = {
  install(Vue) {
    Vue.component('CountTo', CountTo)
  }
! k) i$ \2 c1 [) K7 [6 z5 z' a}
5 X# N; [; _: ^$ p, ~+ ?; O
export default UILib
7 l9 Y1 ]7 f, f* R* P( P2 V
- V0 S: A! q. n- L- k1
2
3
% U, P: i1 n# L) `) o7 M9 {$ w" J; y4
5 e0 q; s4 B* }5
1 M# L8 M  u2 `) k! x( Y" W6
7
8
5 G; p7 V6 N4 j& P9 V% w9
main.js使用
import CountTo from './components/count-to/index';
: h+ G, m$ b* G' S& d0 C( @app.use(CountTo)
1
: p8 I" F5 v$ h. J: k2
5 {- K% y) {4 z1 `! ]6 N* |requestAnimationFrame.js思路
/ P/ N; K3 S3 ^+ H: H! a先判断是不是浏览器还是其他环境
; E5 B: H, \2 p: Y如果是浏览器判断浏览器内核类型
& `5 r5 V/ c5 K& a* a2 h  y如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
! N1 }. b8 D( ?0 n判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
4 l- F7 m) {( h" @$ `* h! nlet prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
, d3 |9 L6 \' C: T! G// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
* W' Z, ]$ @; Z) N1 l% c        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
7 k: h$ `8 F; l! u5 x        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
' c: D2 d8 H6 }" V  F    }
* n# e1 J3 W& b  p: Q0 Q
  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
3 t1 x2 ]/ E* Y7 ~) y, F: x- E    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
1 s+ s" D3 [% l7 X            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
- g3 b% T' O" f- ^            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
! W# |$ }$ Q) h9 L) W) d            }, timeToCall)
            lastTime = currTime + timeToCall
) G7 [& M3 G3 H7 J8 Z3 O8 E2 |            return id
, V  s  e4 [( d# k! W3 e" ]        }
! a. A  n: H& D# ]2 A2 m
7 S6 W% L9 J4 F' R! F: ^: f        cancelAnimationFrame = function (id) {
: h0 j2 L1 a- R, _& n            window.clearTimeout(id)
        }
1 D6 m& t: ]- y. \    }
7 z: j4 t, [* j! i: G
- o6 x& @6 \9 X4 }1
2
3
4
5
$ n/ ~; {, K/ f6
# [4 f( L; [$ t& h  R' c: M7 m7
8
9
10
11
12
13
14
0 g: b3 O& T0 |+ \15
16
17
18
4 x; |  E! w" T- V7 B+ J+ \( N19
3 C/ k  K, m1 y# a: u; g20
/ t8 c" M+ ~, h4 |6 g21
22
" R) Y2 N2 Z! p5 U8 l; z6 g+ f# s23
3 r% f" M, l' T# d' W24
25
26
27
9 ~# W" s/ z0 l( r+ X28
4 H. S( {' L. r4 x8 e0 o: p: Q29
30
% b; P/ D8 j" k7 |1 \$ D31
: N1 c' }. A% e, U32
完整代码：
  c+ S6 c& ^& ?requestAnimationFrame.js
4 _1 S5 r. F* ]
+ |/ y3 H. C  e$ U1 V4 Vlet lastTime = 0
1 }4 H: G, a$ l9 \& y. _const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

let requestAnimationFrame
5 q( R. G* v! s2 P1 elet cancelAnimationFrame
% W# s; f  V4 C0 e% Q! g3 |
# h/ Z- B7 z# a/ x6 M// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
6 \; i7 S6 r! a( O5 n8 _    requestAnimationFrame = function () {
        return
    }
    cancelAnimationFrame = function () {
        return
' J8 y/ J( K9 h: a2 p, ~    }
, P, E6 d7 x$ ?; f. A, d( c} else {
    requestAnimationFrame = window.requestAnimationFrame
! ?: l- V5 d8 V+ C) {, w1 X' K2 ~. r    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
3 n1 f# |' ]3 J" |$ \# o# u    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
9 {5 }3 j9 {# q" A* x        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
+ K9 b; K8 G3 c3 ]& ~/ e  c        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
9 Q+ N4 M! D5 M- ~        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
. ?5 ]# e' o. \            // 为了使setTimteout的尽可能的接近每秒60帧的效果
$ O# c: m6 D$ J8 Y; |5 a9 F! L            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
, ^% V' Q" J1 f# y8 u                callback(currTime + timeToCall)
            }, timeToCall)
* S# I( t- u  }* B9 h            lastTime = currTime + timeToCall
            return id
: ?! C  q8 {' |! a0 d! f        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
+ v" i- S! L; H- ?" {        }
  |8 X) k3 y; ~. m% R! y    }
8 d2 M+ ?0 f# ], |}

: A" H! u5 Z3 @+ H; @' q: `export { requestAnimationFrame, cancelAnimationFrame }
+ _6 {  x! E) d/ f) t
8 i1 }  J% O8 Z# f
1
2
3
4
5
6
5 `! y% c" Y1 C: l: [7
8
; T) H6 s* ^+ c$ q% Y' G4 w9
10
11
/ p2 G8 e. C* i' n2 p12
13
& f- y  ^) D+ A: H( B8 p: V3 v14
15
16
$ S- X5 B3 y$ ~7 [  P17
18
19
20
: W' r8 T2 r, c  I4 P7 ]9 d/ p21
22
+ {0 t3 G* @" w4 w- t23
& q' F* o; L2 L. L0 M! A. k24
# L2 O7 |4 x( N5 |# o1 k; ]: ^% F25
5 a) Y: k4 @" p& s. G: X26
27
1 b5 R7 }0 n6 u; e  a$ t28
29
30
: q  u6 l, C2 n: d9 o31
1 j$ n6 S; y7 \4 m% v2 w. [3 e32
0 k$ r) y$ u, {' _33
, y6 d! X; J5 l( M4 H! c34
35
36
37
38
3 h7 A! Y9 ]1 h. P0 X3 k8 B& @39
) i0 J, i4 R) v. f: F+ a40
41
5 C* O+ W0 _7 ]* }42
8 {! s7 T" @1 b* i9 D: E) ?; K43
3 r  \, ~8 x; ]/ t$ }% D44
45
46
47
$ A: J4 j+ v1 }& h  Z48
CountTo.vue组件思路
: K6 k% h# i8 V2 B6 H2 o7 g8 N% V首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
, {* e1 u7 X- n& j0 P9 p
& W! L1 U, j5 `, b  F" r) b引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
  W9 t/ t$ n3 |1
需要接受的参数：

4 s! I% Q5 Y) sconst props = defineProps({
  M$ ?" O- L  O' c) z8 j  start: {
    type: Number,
  S+ I7 X, U6 y# W' ^1 j. Y3 g  d    required: false,
, Q; [( Z+ g5 N5 w    default: 0
" q/ V& {2 F4 N# u/ h; G0 {  },
  end: {
. e$ d. Y+ M1 z: U% a( V" r+ p    type: Number,
    required: false,
1 i/ B8 |6 V, L/ a% P. Z' u+ _, `+ t    default: 0
. f0 k1 U, Y$ u! x5 y  },
  duration: {
    type: Number,
, Q# ?; q; w/ T4 a    required: false,
2 z8 a  \9 f! g# r    default: 5000
- t" u7 R* W: g) A7 M  },
  autoPlay: {
: h5 q" F4 L7 C7 ?( i* }% M    type: Boolean,
! }8 u5 M. Y( V4 N& G6 w    required: false,
6 c1 f7 R" A9 F0 q) d    default: true
) G; m" N5 R: I2 d8 m: {& g& z  },
' r* d# T. C; U5 X) x; ?  decimals: {
( W# u  _6 k$ A/ Z    type: Number,
+ x' ]# J/ {' M# p' B    required: false,
% H# b5 a, o# i6 |* I    default: 0,
    validator (value) {
      return value >= 0
. Y( O2 t% M, e1 H    }
  },
  q: b7 q( Y* W& l& A: [) k- m  decimal: {
8 C  A2 v9 C: H$ C# ~' E    type: String,
3 ]% o% G: d$ t9 S$ I9 a: J1 q. t% P    required: false,
( Y- S# k+ D, w    default: '.'
& {9 x# t  d9 }% O4 W5 v0 d  },
* X7 r( D+ L- V  separator: {
    type: String,
    required: false,
7 M/ Z1 M/ D6 `; u8 u    default: ','
! A, o9 ]- {2 N6 n/ W: p4 E  },
  prefix: {
1 B+ _7 s* h* M8 {+ q$ U6 A6 z    type: String,
    required: false,
& H* z, @2 R% O0 W, c    default: ''
  },
4 s: f0 C: R1 Y9 \  w$ q  suffix: {
( h* v# i! p6 L0 X1 s! W" ?0 i    type: String,
5 P! y/ J6 y. K8 C3 D) @    required: false,
    default: ''
  },
* l0 @1 c$ V. f1 r* R8 g7 |* k" K  useEasing: {
    type: Boolean,
    required: false,
( X& t. X9 a0 Y  Z    default: true
  },
. \% K) K" p; W! p* L' e( V  easingFn: {
6 G+ W( Q% S5 b' S* |7 ?# P! f2 l    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
9 G0 f1 N% c7 m' w+ A1 Q})
0 b( y& _. {% R; w
& d6 z/ y& q5 {
1
6 G6 H7 _3 T( N6 t+ E2
3
4
5
+ b2 z2 M2 k& R7 F6 O5 {6
, k& X/ I3 r2 {  u7 M7
$ E& `! d& h# k1 C2 a- R8
9
. H5 J7 P$ _, g8 Y4 p1 \! g: C/ ]10
11
12
% q7 U* p, E! J; Y0 N9 j3 J13
8 X# W2 Q8 h+ Q( |14
/ N) ~4 o7 P) C' ]15
16
: N) m0 k+ a# Y- R' d2 N17
. o% s8 Q* t; H. B2 |3 a18
19
: @: B* q  C+ Q% A. D20
21
22
0 {! W  M0 O; l" _23
" T! v8 j$ r9 {3 p( n24
25
26
27
" |. L4 n0 y7 {% c3 a& c  [2 i6 z28
29
, a/ p! n& h0 d& S, o0 N" N/ E30
31
32
% t* R# m1 i" V# _* `; n% M33
0 {6 y) u4 R- P34
& C# l( [4 T$ B, \8 ]. w35
% f8 r1 O, h: Z9 t) c36
/ S: D# p- I& _! H37
38
39
40
41
42
43
44
2 \1 P' F! {5 A  w7 `" Y7 g45
7 X2 y2 f+ w  {; i- j46
5 Z! A1 _. k8 V47
48
& R- R% a+ D  \; J! \, a- A; k. A49
50
0 ]" C3 Q. T% d7 Z0 m- _; v51
52
53
2 g/ q' R' X! Z- ?# G+ [0 T54
55
56
57
) s: K. R: M8 v1 n3 \58
7 f0 o8 ^4 N0 b2 v& v* Z59
60
1 {3 g5 H) d  F" |. k% O61
62
" y8 U7 m) b/ X; j/ _1 x2 k0 m' S启动数字动效
& F* C6 B1 x+ @( Q* H& q) h
const startCount = () => {
  state.localStart = props.start
7 B; |* q. Q. P2 S. }' n7 ^7 G  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
* G3 e# X0 G4 ^; e$ e1 A  state.rAF = requestAnimationFrame(count)
; r+ H3 v  \; q9 I4 l0 p  p+ c}
1
- Y% u: v- l) I( @) m- m, m2
! o1 B( o1 G9 z% y; \3
  p3 m' q! l3 U5 G4
" y1 _$ z$ y9 X! E( @& e! z! F5
6
7
! n6 X, F" y! a1 m, s/ M核心函数，对数字进行转动
3 n. ~% R2 v. Y7 ~! d. ^8 G) C1 }
  if (!state.startTime) state.startTime = timestamp
/ [, c: n2 l6 C2 D% o# Q  state.timestamp = timestamp
' i- B" \5 D+ h% A2 n3 b: w  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
& Y8 H# ^" `$ a# C* Q    if (stopCount.value) {
" X5 k! z5 h6 Y" y      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
8 w. [- B* P" {4 e, p& n) f    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
4 C& g8 N; o; Q0 Y  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
# a3 |- _' |3 [8 k  S    } else {
. P' `9 g' J$ L! S8 c      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
' e; m) z4 u) q$ N9 ]* [" o    }
& |1 w6 b8 V/ g, x+ y! I  }
; z- m3 Y% Z  P2 I  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
9 j  ]4 o4 R: A+ n- Q- t7 k* }3 k. c7 q  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

  state.displayValue = formatNumber(state.printVal)
" t1 z3 ?, N9 R2 s6 L( g  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
* R: k) i8 y; P0 g  [' A. m    emits('callback')
0 F2 s. g1 A$ D+ L7 \  }
}

$ [; N" |$ f, E! i+ w
9 s# q" Q+ z* D9 n# n// 格式化数据，返回想要展示的数据格式
' F/ u4 a  U& g8 H# M6 `, sconst formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
# \" n( C/ ?& I0 |  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
  return props.prefix + x1 + x2 + props.suffix
}

1
* q* W, M7 K% P" N9 G8 k* L; y2
& P+ I. Z" y- W& s3 G3
4
; F; P) p# h' r- n5
6
7
8
9
10
* _: {3 B# h: N$ b# c6 d% [11
; E" [, ~+ E; B12
1 Z4 r1 W/ o+ _9 ?. z3 O' T13
8 n  T0 s! O9 ?4 S' w14
  P2 d# y2 G5 O% V! {" c15
) m# s! y) _; c, o; S' e3 _16
17
& y" K  h2 v0 X6 L18
: w6 z' n5 r8 S+ C2 y, }8 z) s19
1 R+ i$ h% O+ b& i* `3 C( L- n20
21
22
! u/ M/ G( S, g* R. e5 l+ h* e23
1 E8 ^. b9 l, c) F" k8 ?1 p24
25
$ s9 c, F8 R7 [6 q7 H" ?5 a6 ~26
- B$ z6 b9 N, D; C/ V27
9 s5 K% N( {. I, N, w28
' ~: m& [; o' L, c  b3 ?- U29
30
31
32
$ n' n; e* k3 P. [7 |% k: u33
34
! \) D- e& b# }, j35
36
/ Q4 S9 F% Z- h* t: x% U37
38
39
) X) Z0 @- @5 T1 K8 i+ U1 J40
41
! ?% o2 Y0 x/ R1 g42
43
44
: Q) m9 t% t5 b6 n45
- H3 M) m; ?8 V% q# q) u46
9 w# i: G, J, s: P( L4 J47
48
取消动效

// 组件销毁时取消动画
onUnmounted(() => {
3 q) I% z' Y" u0 q5 g/ b4 w( C) r  cancelAnimationFrame(state.rAF)
})
. B  [+ H0 U" O  H. l, _1
. J; E/ H5 m- b" R8 W3 E. x: d2
2 G( ?1 M) s# [! A! G$ H3
! ?' z! z3 @" o. A) K3 P7 \4
完整代码
. |7 j8 Z7 b* G) x- M
* Z% K" H7 v2 e  f2 [<template>
  {{ state.displayValue }}
</template>
2 k+ e# u" B' M; i
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
6 w& F7 x, s1 J+ yimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
% Z, n5 G; `; a  ]) dimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
8 R4 I% L" S$ j- H2 Q. }% Z: ~2 t// 定义父组件传递的参数
const props = defineProps({
' {- X* |+ w) ?, i  start: {
  b: y; ]8 }7 Q7 z% {    type: Number,
    required: false,
- G. [9 C; u5 `5 t: N7 C0 H    default: 0
  },
  end: {
5 X9 F+ g  {0 Z3 r    type: Number,
- b' x$ r3 c/ \    required: false,
- [5 A! w! b6 a8 I$ O( m) u    default: 0
8 Q* _7 a' ], g) V9 d  },
+ O' H6 K. S$ x5 w1 v" `5 V/ z  duration: {
" x, P4 o. @5 i. P4 S    type: Number,
    required: false,
4 O0 {& ^1 K9 O# p* N& ^    default: 5000
  },
$ q+ t5 E/ C4 F! D! ~  autoPlay: {
    type: Boolean,
3 [1 M0 W% P2 g7 A    required: false,
9 e$ K" k% E" f8 m* Z: B    default: true
5 Z# X" r4 U- ^/ a" T  },
; [" E9 A3 }" X  decimals: {
    type: Number,
3 M  R3 S5 Q( h) ~    required: false,
    default: 0,
) v$ i  A( }+ t    validator (value) {
) f5 \8 z2 T$ ^7 N/ O# u      return value >= 0
    }
$ m7 t( \! d- Z( C  },
  decimal: {
    type: String,
+ \0 s3 J# O6 J6 z" a' C# K3 T1 b    required: false,
    default: '.'
  },
- F& e0 [3 t- s( u  separator: {
& M" R1 `5 P: ^+ }4 M2 R8 [    type: String,
5 J8 y6 e: p( h; Q    required: false,
    default: ','
  },
  prefix: {
    type: String,
( W. e8 r3 ?: d& M- S    required: false,
# F8 Q- E7 D: s7 u4 T    default: ''
4 T+ l7 l4 V+ q+ z6 x  },
* Y3 u2 l% H1 X1 D  R- g8 I  suffix: {
    type: String,
  z4 ^! u' m9 K7 G8 L1 g# Z    required: false,
- {. `4 e& C* v+ M- w4 G    default: ''
# T3 l7 p. q6 X$ |% D! `  },
5 C5 ?& |0 X; Z- C3 y' T  useEasing: {
% J% c3 o$ o9 N. V3 K4 N$ B7 c8 ~    type: Boolean,
    required: false,
    default: true
) R+ U; P; M$ {$ w  },
( V/ {+ l( g5 n  O4 m- r  easingFn: {
. z  K# Z9 a# M3 q8 `$ S    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
( `$ s+ g* d* N$ E! M})

const isNumber = (val) => {
! e/ C4 I+ Y7 g) s: _5 X) i9 j* Y4 M  return !isNaN(parseFloat(val))
}

// 格式化数据，返回想要展示的数据格式
- D' g6 [9 s  c# Lconst formatNumber = (val) => {
  val = val.toFixed(props.default)
- h  n; q  f5 ?7 L3 S  val += ''
  const x = val.split('.')
0 i: p2 R# j0 J  let x1 = x[0]
! `" O; P) w" P; _0 L, b  const x2 = x.length > 1 ? props.decimal + x[1] : ''
. x$ ~  P  b- B4 o$ H6 {  const rgx = /(\d+)(\d{3})/
7 m  d$ U/ Z' S- Z" {2 }9 l  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
& R6 D4 i. k; Z: i) O+ S$ |) |  M; Z      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
) z: i! J7 ~* f+ ~  }
2 M: }* [0 A, g  return props.prefix + x1 + x2 + props.suffix
+ f5 Y0 q; O) j}

// 相当于vue2中的data中所定义的变量部分
const state = reactive({
. I9 v* U6 K% ?" Q. }2 b  localStart: props.start,
  displayValue: formatNumber(props.start),
; K% p* f7 S; Z8 f0 V7 u3 ]; [  printVal: null,
; S; ]& ?4 J7 r# f- w3 J  paused: false,
$ N+ N; [$ n  w9 P  |9 O0 z  localDuration: props.duration,
8 r& G; G7 r+ G& X  startTime: null,
  timestamp: null,
  remaining: null,
7 W' r) H( M$ P/ ?' l; {  r  rAF: null
})
& F' X) g: h5 ^+ H% L( z: i/ d2 |
// 定义一个计算属性，当开始数字大于结束数字时返回true
/ @9 g3 d5 @1 \/ `/ Dconst stopCount = computed(() => {
1 y$ }( v& E8 Y) h  }  d  return props.start > props.end
})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
0 p+ W! k6 w0 b* y" g; y- ^const emits = defineEmits(['onMountedcallback', 'callback'])
& f1 J0 D) S6 H! E
) V" q( P: {, ~2 n0 o! L" i( lconst startCount = () => {
7 k9 ]8 U" h( e7 @( w' Y  state.localStart = props.start
  state.startTime = null
/ ^( ?8 i7 j4 Z4 H5 m2 H  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
3 I; e2 ~) p; i5 W! M) T. O0 `}

watch(() => props.start, () => {
, g: b2 Q. M" P9 n  if (props.autoPlay) {
1 P5 K' O& v( d3 V    startCount()
  }
1 o2 a! M4 ]( V  [})
+ {" r5 h4 x) C! s8 u7 o
watch(() => props.end, () => {
  if (props.autoPlay) {
5 D% R$ A  c" e% h, F    startCount()
  }
})
// dom挂在完成后执行一些操作
; O" @4 w6 @7 T. konMounted(() => {
; ?2 v* }( }6 `$ y+ K6 s4 w7 f- d  if (props.autoPlay) {
    startCount()
6 c$ K* A% q6 y* V  }
0 \& X! H+ n! d; U8 Z  emits('onMountedcallback')
})
// 暂停计数
+ U' E" ^2 L) E; K2 gconst pause = () => {
" q1 h+ F5 n  j' P/ |, z  cancelAnimationFrame(state.rAF)
: d; _  U3 `4 j) {$ I}
// 恢复计数
const resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
% V1 J* D. R7 |2 @1 A! N  state.localStart = +state.printVal
, f) Z7 [) `* S  requestAnimationFrame(count)
5 g: X" Q0 \1 m6 `$ d}

5 |  }. [9 Q) Y. H6 Rconst pauseResume = () => {
; L% |* _' M" w4 P0 N& R) S4 w  if (state.paused) {
5 K2 d* k3 K3 d! t  u    resume()
    state.paused = false
) I' P/ _, L+ c5 Z  } else {
% ^  M. p3 U- K: _+ M    pause()
    state.paused = true
& u' l8 `+ R" M! U+ g3 {, u  }
; E" M  o5 K% k}

8 c, a0 j: F+ [& Bconst reset = () => {
: O( j9 r& T$ J3 z: V0 Q  E  state.startTime = null
  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
2 f, z) Q+ f; b}

( i, K* i- s. O4 j' ]const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
6 q% G: ]& U6 B* `- d" b  state.timestamp = timestamp
& O9 R0 w. q5 h1 P  const progress = timestamp - state.startTime
, G7 M5 _! Q" p+ b$ a0 r; r  state.remaining = state.localDuration - progress
2 K1 U) V+ C9 P  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
8 @' v  c0 ^; E/ M0 m  [      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
! U  |7 T: y5 Z7 K0 b      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
8 s$ B; C1 i6 W    }
  } else {
    if (stopCount.value) {
; I" A  I2 o* D3 G  y" m0 W      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
% `* B- ~: `9 F+ A    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
; Y+ c% z# @, u8 b; N1 |& B    }
* v. e. ~; p  n7 {( B2 R  }
! n0 ^' \5 `6 F* K7 [! X  if (stopCount.value) {
# v9 @$ I5 n5 [    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

, r; `. y7 {  i, G  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
0 ~1 W/ u4 w, s+ r3 e9 v  } else {
  T. a0 E- a* Y7 ^1 j  ^    emits('callback')
  }
0 y: z) r& x, v) K( Q& R! d}
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
  M/ O2 N3 [% j$ W; m/ C( V8 R: s% r})
, R# _2 P1 p7 I0 N4 o" `</script>

1
8 L) a. ?8 _! \3 `  h' W2
3
; |; a5 [# W: ?: b3 _- j% s' z4
  v8 r  v4 }6 i5
5 ~7 Z* w6 \6 M4 |) N3 T6
7
1 q0 E6 H# _/ n' Y6 E5 ~8
9
/ R4 q' A; ~! D% q, C0 d10
) h# g1 o( g' R% k: D11
' [, H' y2 I' x- w  f12
13
14
15
$ @9 s5 k# H. c* G! t2 Q1 m16
17
3 ?# H/ j" F0 T6 Z, v3 _8 n18
19
9 ?  d( K% O2 a* J# A& y5 N) l. X5 U20
21
# r6 ?* s5 g+ I+ ~/ ~) h3 j) v7 W22
1 X$ ?+ A; C8 Y: H" M( k; K. f23
. P2 Y* B8 k9 @" f$ o1 L" O24
6 ^$ C! E. I: l% ~( H25
26
9 B4 W; T7 t5 h27
( S& Y( h% k# o! |' o28
29
30
31
32
  Y: O' A! A  J0 M1 t% E33
5 W/ d- }! E0 z9 t# Z* g& t) _34
35
. J" @+ v# C% F1 f) H3 i, O/ T( e36
# G, _8 H9 n. U" b8 O- N* O) f, ]) |37
0 t; V! a; y" D: z  s# ^6 z38
39
40
7 j! g6 D" E5 G  r( y, z4 |41
) ]  q; Q$ J5 ~6 f# H42
  B/ v  V. J' E! @* n43
6 H1 P* `% R# i0 |, j44
45
46
  _$ |' M% l1 ?47
48
49
50
51
7 n7 P5 ]) ~- `# ^! w52
1 [$ g' \9 S( G' _$ g! l  \$ ^53
54
2 E2 D  A, i  O, w* n- Z55
, U+ R" l4 C6 {* `4 |56
5 e, a" m0 f$ D" b57
58
59
# ?+ i8 J2 F! X1 v$ Q1 g/ ^60
) U  U5 C) _# O0 d% f61
62
8 @/ n  u, f1 O9 a$ }63
64
65
# |) U, O6 W: x& t: @2 ?66
67
" V8 @2 e# G9 p4 A68
69
  k# X+ a) O2 _  q& N& K2 h! D70
2 o7 f. t; [' X* g) u3 v71
# p* b: Q* @& P72
73
74
$ M* e& h' g2 x2 r9 u7 k75
- H' D% |9 Z' V+ ^+ |- @  s76
( ^: O9 ?/ h& m0 K; S77
78
# |) m2 ~% e+ ]) X7 f2 _% z79
80
2 F; V+ A4 }" Q# W81
) E8 a- P3 m" X# {82
83
84
85
% r  A* o% w2 @: M1 r7 ]4 M+ _! ^86
87
; F4 a% s0 d; l' x88
89
0 i: ]1 \& A/ [9 h) M( b( y90
: ?* U9 q+ y7 `7 T1 W2 f5 H91
92
93
3 E3 F8 n( B5 J4 [94
95
96
' \, X7 i1 [& M6 m, b. J97
1 c! J, U( T1 e- v/ a" Q* D98
99
100
101
102
7 J4 S* w) t% d) K( Y1 c) M3 L103
104
; k2 ?' y& M/ U3 W105
( U  L& _9 z8 c4 W' {2 K106
- S4 k8 w& V3 k  n- Z107
108
109
110
* ^3 a; e) y" B0 t: ?$ S111
112
* T: l2 d3 o( m9 M. p113
114
115
5 {: F2 F- S/ Z: F6 o1 x116
/ M5 S) N! e) b5 B6 z% g5 |. o117
118
1 c3 U9 i" \7 @" a: C$ L119
120
121
122
2 j4 k( h: g0 B! f6 H123
124
125
126
6 ?+ M7 ^0 W" t% z8 ^9 @- }127
  y. }* |' ?1 ?- g- }128
129
130
8 |- s  a5 s+ K" r! M131
132
133
# Q  Z0 q6 r# X. u134
135
, X! |/ r  P1 ^5 z136
) ]* z0 `7 M; t137
- v6 s. ]% J( O: L+ d- y4 a6 M138
& o  S! F9 ~4 N7 H139
4 |( i4 O) f* |6 h140
6 F# w1 \, C- t' K# Q. q# @% V2 K5 D141
142
143
144
2 a6 m/ O+ J  g9 w6 }145
146
4 X9 c, A0 v1 r$ T147
" Y# C' e6 i! D4 i148
149
150
$ a, ~) I3 R9 l+ R; i# N7 h- e151
' j  ?3 X3 f& p4 c152
153
154
$ ~) z! b" g; v5 o- d155
156
4 k6 q; _$ W$ J6 D157
( x- p2 v3 t5 k, }8 ?158
159
% f2 }5 ^3 X- F$ d5 j160
& K+ X9 U9 R6 J7 p- M& U161
) l8 J  P% j) l" Q162
9 ^+ E+ J) G  ~! n) w, W163
164
5 V" \# x" p8 Q165
+ D- q. u$ \! s166
6 e: O6 Y' O! z1 x3 w167
168
4 u) I8 v( Q( w  u- f/ S) |169
: i% E6 {2 u: n8 V  T170
" y9 q4 b5 k2 q" u2 h1 T7 F171
172
7 A; L) B. E$ \1 A8 U8 `1 H0 Z8 k% I173
1 H1 k1 y2 e1 L- W' ~  R174
175
176
  g1 d5 b$ H0 h& Z177
178
179
2 f" G$ d- o" y( q+ ]9 W180
! l, j3 w. t  F8 G) F* Y, Y: i181
182
6 [' H# `' T+ M& Q" a6 _0 i& O1 ~183
184
185
& L5 Z$ N3 W1 B0 a+ T+ e186
187
. r' H. _/ F, I188
189
190
4 X( M+ ?) _- d191
192
193
8 z) h/ d& T% v194
195
196
2 V! N, M. M* }3 e, \* @, j197
198
  _. a6 p+ V9 J# t- c! i199
4 Y5 {9 {+ x5 r6 d9 ]" H200
2 R6 ~9 p  J6 @201
8 ?" _" n0 T, U0 l* W8 F, ]" C202
0 ~3 `4 j1 _! f, p5 j  J7 m& Y总结
0 g8 f: q9 }- H  ^  g7 v0 t9 C/ F. m1 v自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
# M# ?5 g0 D) C# ~+ A5 a, g后续的线上demo演示会放在
demo演示
/ w7 r/ c5 w+ w' D完整代码会放在
个人主页
* k5 W6 F. i9 m; P& ]; o3 L9 l' h
6 X2 O/ J5 f5 b9 p  r- N希望对vue开发者有所帮助~

5 B& s7 G# D+ U# r8 l3 i个人简介：承吾
, |9 u7 _4 {+ H) v1 B& v. R工作年限：5年前端
地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
. e  ?* L. R7 ^* f1 V
1 I. r3 X% _/ V8 a
3 K+ J, H, Q# W
5 m! @/ {" ]/ q' z5 J* L: Z# Y
————————————————
  ^6 r' g8 I/ r5 g4 F版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
- R& M% E0 {! s原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847


9 L) o+ n7 a  `8 ~$ O: i