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

杨利霞

vue3 | 数据可视化实现数字滚动特效
5 K( H4 s3 x4 j; O- D5 L
前言
# [8 s& B, m6 k' c& V1 e0 ]vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
2 }! ?! X& a; BTypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
+ ^' g  H! v7 A+ A3 P* q, d
* T. u' |7 z. H! K5 r2 s' B
思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
$ x8 `- n6 v2 n, K9 ^# o
- b$ l0 W: }! ?) M7 a文件目录
) |8 A! J% S- B

' h- Y' e% C+ j) W/ s% y! ?使用示例
) I) H' P$ ]' H2 {. V<CountTo
:start="0" // 从数字多少开始
) P/ }* g; A1 C$ h% U1 _, m2 N :end="endCount" // 到数字多少结束
& m! I! m4 Z, m2 n0 o! n8 v :autoPlay="true" // 自动播放
1 F9 p( U! T7 S :duration="3000" // 过渡时间
9 @8 n, Y( Q+ x* O5 P# B2 H) L prefix="￥"   // 前缀符号
2 r8 u) E  M( b5 g: ~ suffix="rmb" // 后缀符号
- p  P" q4 C8 K' _ />
1
2
: f# J. B% r6 D3
4
5 r0 _0 r7 A: `8 p8 ^4 g2 h5
6
$ o7 w5 x  z9 Q9 J9 h+ Y* W7
. Y* j5 P5 ]3 T) a5 [3 y8
入口文件index.js
$ m7 X+ q- W  E4 w% U# @
, \6 J7 J- a: C& `5 Dconst UILib = {
  install(Vue) {
; V; i& ~+ `2 o: Q8 U/ w    Vue.component('CountTo', CountTo)
  }
" V9 D- W: T2 m}

export default UILib

9 y  s8 s. q- K) ^/ Y1
: i4 r: o9 [3 A- s& F2
3
4
5
6
7
8
- l- i% H/ T# u5 @9
4 Y& S# R) }$ Q7 l( I: mmain.js使用
import CountTo from './components/count-to/index';
6 L# H) l# n$ S. _/ x, @app.use(CountTo)
+ _7 S' E$ G" V( H  y& P1
1 r! G+ J8 G# M2
$ V0 M2 H0 ~( d& c0 ?! a( l0 LrequestAnimationFrame.js思路
: I8 g6 j* ?! G& c先判断是不是浏览器还是其他环境
3 [) s6 n' t' w* T3 C$ U$ V  ~# c5 ]如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
  z- d: j% f6 B7 h6 f$ `导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
; t* e. P3 c! `. t( u增加各个浏览器前缀：  
let prefix;
: \) {5 D% n2 n) f4 b/ ?let requestAnimationFrame;
: E" k$ U6 m) B* k5 `4 r3 b$ ylet cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
: m  Y! d# b/ D, P" x        prefix = prefixes
! L0 u9 i& F" D2 i8 w! Q( N        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
+ G0 x1 O; G. a( S3 a* T* Y    }

5 {, s, @7 M% j5 n4 U  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
1 u) x5 V7 O! g" |2 K    if (!requestAnimationFrame || !cancelAnimationFrame) {
% x' d0 g0 X4 h' A$ D        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
: |. b  y1 b7 l5 t; |            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
2 U) z& v' q% P9 ~" U, ~            }, timeToCall)
2 u3 X* b& ?- X2 a/ A/ C& G            lastTime = currTime + timeToCall
            return id
7 F% [: R! q8 ^3 j        }

% u, p1 Z) g7 o$ X8 N7 P2 w        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
    }

1
; C/ ~, C* T" p, w! G2
3
4
' Q+ N" ]7 _( e7 \5
3 l$ ~; d; e2 a( c! l6
: [" N4 |& y% Q" D6 U7
2 h0 W) D% }" H# n8
$ |% |$ h- F' u. O2 f' |9
' `( T* |, X) W1 y& f0 s10
11
12
13
5 v1 P& r" m  [14
8 c+ ^( D" \) q  c4 X15
16
3 b. u( {% d0 s9 }* ?! g17
; e: e6 @: l4 G' i0 ]+ D+ H18
( A% H% M3 G  O% e! ?# J19
1 ?- O: N) t6 S2 ~; h20
1 o4 c1 T+ @& `4 O' L8 `4 v21
22
23
0 N6 y( D+ L& o24
25
26
! u1 a* ^% V% l* f27
4 e1 M' W! \, I, S) S% s28
29
( q1 Q, r# f8 f' L6 X( L- c( J30
$ L6 g+ m+ c" j* G% }5 `7 R: ~* U31
9 G% p) i$ @% i: D# E. e32
完整代码：
$ n7 S7 A3 _8 ErequestAnimationFrame.js

let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

/ K. P' a3 w# f7 }, _let requestAnimationFrame
5 W( [: u/ b0 T$ T8 Dlet cancelAnimationFrame

// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
( R+ Z$ E9 V/ I, t6 Xif (isServer) {
    requestAnimationFrame = function () {
) A5 |& w" v+ A2 Y$ C        return
    }
    cancelAnimationFrame = function () {
( x0 W( o# K: b8 q. s        return
# {/ G' s- C& E2 d2 t    }
) L8 [" ]' C0 N} else {
    requestAnimationFrame = window.requestAnimationFrame
5 l7 w, j) L) h; R# _3 B) z    cancelAnimationFrame = window.cancelAnimationFrame
, }& I) B" X  R1 q    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
# k. @4 A) ?; G    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
2 ?/ b3 j7 [: K" S; T        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
* ?" p" ~/ f7 [1 O- }    }
" z9 w* T' d* v  a! `# z) u
    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
- i/ J. r7 e7 P; [* R        requestAnimationFrame = function (callback) {
* F  A8 F2 X( b2 Q            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
% N* b# ^0 g( E9 x) [# R7 _            const id = window.setTimeout(() => {
$ k2 s4 x# v0 E$ m5 }% z                callback(currTime + timeToCall)
            }, timeToCall)
. r9 M6 Z' Z) @  \            lastTime = currTime + timeToCall
            return id
1 j- e/ l- @1 T& f4 y        }

        cancelAnimationFrame = function (id) {
: L1 B4 M  r4 Q7 M) y            window.clearTimeout(id)
8 {6 ]& _" X* @! E        }
7 s8 A/ v  B5 U" f" ~6 Y* r' N    }
}

export { requestAnimationFrame, cancelAnimationFrame }
. H& X# b- v  \
! b1 Q  ~+ \9 i; Z
" f1 F) ?; j5 _1 W1
2
3
1 \3 k8 g" y6 }- ^4 i( P5 I* b* B4
' M$ ?1 s6 e4 n5
( L. i2 `6 A! X1 ^4 j. J6
7
8
9
10
11
12
- N% P: `, B( p6 f4 T13
14
+ y% j) }7 G5 c/ a8 I15
+ x; [$ k" n  y5 G16
17
18
7 t$ L! N/ V* Z/ }8 G+ p19
20
21
3 y8 s2 T5 S9 z1 U% n% }) L+ v22
9 N: t7 I  c# l$ h; d2 r) q* \9 U23
24
25
' c$ x4 T% g0 A  R; H- r26
27
) P: r- j6 c4 j% [28
29
9 \8 V* m8 F* _$ W; [' }1 W4 L3 S; t30
/ q2 }$ W$ d2 a, i# P' q4 G% o31
32
4 m$ @3 |; T& n0 \. H8 J' H; k33
: }; L! \8 ^, }$ g34
35
, v: w% D$ i' d# I" Q# Y36
4 m' V1 j+ t! t  _+ d7 _  D37
, n( p, i1 g% }' d) Z# o8 r, x3 w38
$ B+ {. ]! E( u1 _  r% ~39
/ {( j8 ^2 X- P5 t, O* q40
& c0 {9 ^$ [" F41
42
43
/ j5 l) C2 C+ X7 J44
45
3 \  v0 j) L, [7 p4 t6 |" M46
6 b! d" {9 Q" f47
48
CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
+ G1 A" d' Y2 k- t7 B2 w9 |需要接受的参数：
( o7 ?- @5 p6 R5 ~
, S' c$ O1 J* S6 n  e" cconst props = defineProps({
  start: {
    type: Number,
  U/ T9 p: k8 s7 }% ^4 n9 _8 ~) K    required: false,
    default: 0
  },
! O1 m6 V  b4 Q; h' o5 ~  end: {
    type: Number,
    required: false,
+ @6 h+ R5 z# U: a6 s, W, Y    default: 0
  },
3 ~5 x- ~* `1 T6 J2 }  duration: {
    type: Number,
  t2 e4 E$ W; L0 }1 D+ g! W1 B    required: false,
    default: 5000
  s  E; L" B! E3 H# x  },
4 I  |* p$ @2 q3 H. @% W  u4 W  autoPlay: {
, y; [( D) L5 E% C' C, c& ?    type: Boolean,
    required: false,
    default: true
# u9 s3 E% Y8 {  A  },
9 F! ~% ]; o5 N* q: b1 ]+ s: o9 _/ \  decimals: {
3 T% o, C) J# @* }* S9 n  z. ]    type: Number,
    required: false,
    default: 0,
7 y" r3 Y( R3 j6 S    validator (value) {
3 c+ O- l& r0 p! L      return value >= 0
    }
2 h4 U+ `1 m5 x0 b, N' R  },
  decimal: {
/ O% `* U( J( ^' ]3 _, {- y    type: String,
    required: false,
( r! [  S4 Q+ D% X    default: '.'
; @  s0 ]- ?( ~: L  y$ R  },
% M/ ]5 t5 w. C9 N, L& y  separator: {
  r; g% I0 O  ]8 b8 x1 x" I    type: String,
    required: false,
$ w# }, q3 o7 O# `6 l, m    default: ','
  },
  prefix: {
    type: String,
    required: false,
    default: ''
+ v3 t% i9 b$ P5 C9 S( F! Z  },
8 u$ I; o' H, g( r. k8 I  suffix: {
' S+ N6 d* V# E: G" I: {    type: String,
3 K! s9 k6 V3 X; A/ H2 d. e. i2 f    required: false,
$ O- E, z( ~' O& A) [5 M    default: ''
  },
6 ]1 {' h) Y+ }5 Y/ v  useEasing: {
    type: Boolean,
1 |7 R) j& D$ |9 N: c: F; G    required: false,
    default: true
  },
$ E$ q2 F8 S% ^- V. V! {3 J  easingFn: {
% Z0 s; n. X6 m    type: Function,
8 }4 `4 I$ @1 h5 v& F: H% g5 F    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
+ @8 W/ ~0 t$ Q3 q& X7 f  }
})
$ e2 ?) r+ X3 i! r) e; b' n
$ x- V' r0 W  n
) y+ M% S1 p% W7 _6 W* B+ a( G1
( Y. E' ?+ m: z3 c! \; x# y2
  }* S  b4 `) V. L: l% G3 i3
+ u! Q' e3 E8 x4
5
& X( z0 f2 z- `6
, O; R: s9 S% p7
9 b4 J1 \, h4 |( b) u& y: d8
9
10
11
# L) }7 E& [/ ?9 q1 b12
13
  Q$ \, r! ^3 i5 [6 c14
15
16
17
, d) I  T4 s) S1 w18
  W+ q6 x! [) i+ ]/ f( y* n, T; I, h19
20
( b6 e( W( z" _21
, u% z! h5 F9 c0 y22
23
4 G1 D( T! J& D7 {24
3 N6 z% {, g5 o' P: M25
26
( r8 p2 D( Y) V  F  H27
2 n, [9 T$ J3 C$ W5 {8 D28
2 y4 c1 {, {$ F  [- b29
30
31
1 a* A9 t6 S/ {" P32
$ Y, ?8 h  O6 C- A& u- ]& m# t33
. n- o$ E5 B( N% u% q7 G# {34
35
36
37
1 s* [( q  s) t/ ]6 y/ I+ e38
39
# A9 \8 ^- X( l5 h5 J. q40
41
9 U! \& q$ m; g, y42
, o8 L' ]. l! T0 f  h) j43
44
$ S. ~+ L. S% j45
3 y  m' Q- k# q+ r( Z- h" `; j46
47
48
' E4 Z4 N: ?6 P$ r1 C49
& F3 e: y/ D/ S/ M' A% p- U6 u50
5 U& ~+ a0 l2 J3 l/ {3 Z  `51
52
; M$ T# V, w& w' ]& l' c" l3 _; S53
54
55
7 u+ v; U, v2 C" U3 g, D56
- o2 k5 a6 b' N8 k8 r, h6 k57
58
59
60
& B+ a8 e/ |7 S& v+ b) y; z61
62
启动数字动效
5 \8 Y) w* J+ [8 H2 g2 _* I
; x" Q/ F/ m) p3 B+ hconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
3 T* h$ A( V4 l# m# G  state.rAF = requestAnimationFrame(count)
3 k" L& f  f$ Y5 A& s4 Z8 P6 v}
2 x1 N) L2 S* z! g6 D1
/ `; d- a* [5 t5 U7 W; l, m( j& O" k( K2
3
7 x# i" `; V$ F& E4
) h  ]) A3 k  G" u8 q. p& @4 i9 C5
" C, ~" M9 ?& m; `% Y* I6
7
7 Z+ _4 f( y# L6 W) H' ~核心函数，对数字进行转动
5 N0 Y- w- h. L! {1 E
5 z$ N5 J  g" U$ |4 Y  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
" m4 A6 M. @& x" Z( ?  const progress = timestamp - state.startTime
$ ?) Q. u' o; o+ w  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
+ g: i% H0 F0 z6 n    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
+ @- i0 x% F+ `    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
% _0 I  z+ a9 _. C3 @! M    }
  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
0 z4 d# X7 j: g( x    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
, l; o6 w, n9 `& x    }
9 ?: M2 }5 i; w. i. r  }
1 A9 d, i, F6 X8 w2 W( m  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
8 `% z: {6 ]7 h9 ^) y7 q% r  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
/ U9 S) x+ Y: C& n$ ?8 Q  }

' D" f0 e, x/ W# c6 O% b, C) Y  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
) H1 o) s# H! I# o( I    state.rAF = requestAnimationFrame(count)
4 ~0 q# N0 ^) i$ k- ]  } else {
    emits('callback')
# J+ v+ [6 U! A  @+ f/ w- [4 T  }
}
* F: Q, n6 q6 Q- x2 H

// 格式化数据，返回想要展示的数据格式
2 B" ^; G' |; f/ Tconst formatNumber = (val) => {
; U' @' a, W& g* V  val = val.toFixed(props.default)
7 d5 l( `2 ^! t+ c1 F( R( V  val += ''
  const x = val.split('.')
1 T" B* @) g4 }( R  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
' `" z% ~- G1 D! O" m: I+ a- W  const rgx = /(\d+)(\d{3})/
  a* M1 q% N3 W2 G1 Y2 j, \- Q  if (props.separator && !isNumber(props.separator)) {
% V. \/ s2 q$ r" U+ s5 s6 a    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
6 O% I! ]: z: x! V7 O( z8 i9 h; l3 l# k    }
+ S7 e8 h1 L' ]. K, i  }
  return props.prefix + x1 + x2 + props.suffix
# ]9 |0 ]) W( l}
: N3 m1 K9 W5 Q1 o  Z+ {
+ ?) Y) m/ B: P8 u1
& f, g2 p( n% ?+ K5 I! B$ E2
3
4
' F, ~, G7 @7 J1 @3 @% t5
" U' V: F. k4 d7 f: A3 L" c6
6 S, i7 r) B( ]& V, U7
8
3 h. E' Y2 g7 Z9 \6 Q3 \/ [- P" R9
10
2 Q/ \( S% R- v1 b* t- }, j11
12
/ _# U) U* Q5 J: X# ~' s13
5 E' ^% x2 _$ @- r" B) [14
15
16
2 N+ _! n+ T9 W8 o9 A17
18
19
20
21
22
, X- g# G7 u' H; E4 Q  F23
24
25
26
+ T* v+ ]) H7 o- M/ {! t1 G: {27
28
. v6 h) m" L' O& R: d8 J0 j29
30
31
. W1 B1 S5 Q" j7 A" K1 i& t8 @32
33
34
35
7 i* t; u0 M8 }1 H3 w36
37
! y; [1 J0 M8 q: b38
39
" S4 }8 H8 d' D+ f# |) i40
41
42
43
44
45
46
$ ]) a) p0 T. F- m/ E/ m# i; G47
48
1 }' G4 P; {  T1 T- B6 J3 R取消动效
7 Q9 U6 K* P- G  v. W, k" F$ o
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
1
2
3
4
$ K% \! P7 G, j完整代码
/ H& v% f- V' s. P
* k( ]3 }* G; R* {, i* K) ]<template>
* L0 a9 S) @; |9 p  {{ state.displayValue }}
% I0 x$ V+ C  z</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
  e: M, P, L: j7 I) himport { watch, computed } from 'vue';
9 B! \+ _0 i9 R& ~import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
7 T: V$ A  a- m9 b* r2 s! @const props = defineProps({
  start: {
/ w$ d5 B- f% K8 N2 @- K    type: Number,
    required: false,
* ?: i* Y7 M  l2 n! N0 Q    default: 0
; s( T  X) G, V0 X% M% }4 H  },
  end: {
    type: Number,
: Q: v! l6 h% |/ G( b, v  i    required: false,
    default: 0
  },
- g4 s/ s, F# s6 C  duration: {
    type: Number,
, B: x* e) ]* l9 w    required: false,
    default: 5000
1 \4 r. N( P* l  },
  autoPlay: {
5 q" q( v" A, p: o    type: Boolean,
0 \) ]3 n( T. M    required: false,
    default: true
  },
5 P$ ~) C. b" m6 |: u6 W2 v  decimals: {
& `8 u5 b4 i, U$ V4 ~/ C  e* w    type: Number,
3 K- G: m1 ]6 @& K, U    required: false,
    default: 0,
    validator (value) {
      return value >= 0
/ ]- U! t8 Q' c4 F. |    }
1 B. u0 z- e4 M9 S  W$ P  },
  decimal: {
' v; _0 s4 T9 m7 ]- y    type: String,
/ F! ^1 o" y5 m2 x1 U5 b6 A  Z6 l    required: false,
    default: '.'
  },
  separator: {
    type: String,
" R6 @3 Z! e$ l! {4 H    required: false,
    default: ','
  },
  prefix: {
    type: String,
    required: false,
7 W6 ^& [9 _1 }8 D% [4 Y1 I3 G    default: ''
  },
  suffix: {
- L& t( q$ }* T2 Y  h5 X0 f    type: String,
    required: false,
, \! \  Q  ~$ ~" {* J( I    default: ''
5 k' b+ T! E4 K' Q! J  },
# ]3 k0 E& i- d# n3 H( b0 [  useEasing: {
    type: Boolean,
    required: false,
5 M) t$ V8 M# f2 i    default: true
% }# b7 N4 }. x4 A  },
  easingFn: {
    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
$ Q# ]  {. h: n( G4 e    }
  }
})
) ?1 b( [. t; b) I. x0 v( i
6 H3 H. @5 r+ h2 |4 f) c) R7 Nconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
}
2 R0 G  T  {) P  p
, V" J" C  F( ~3 |. o) _8 R& G' U// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
# s% a5 t2 N" B! p1 Q, s1 q( s+ j  val += ''
) c" h; w1 H8 f! w" k, U  const x = val.split('.')
  let x1 = x[0]
, A0 C7 J4 [3 `# o% z' [; o  const x2 = x.length > 1 ? props.decimal + x[1] : ''
2 Y) j0 {& p* e4 S  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
$ O7 P! ^! z: m: S/ r/ [- _# j+ G      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
; v& x. F. x3 \  return props.prefix + x1 + x2 + props.suffix
}
6 @9 F) p6 }, x4 P7 i& c- @) L
// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  @( ^4 Y1 [( H9 r: s3 f+ ~7 }  localStart: props.start,
, g; z' o9 d. S5 a  displayValue: formatNumber(props.start),
  printVal: null,
  paused: false,
1 F0 {1 X" }' K1 J  B$ g/ n  localDuration: props.duration,
  startTime: null,
! J! t* t' T8 M3 y. L+ K0 k2 L  timestamp: null,
  remaining: null,
8 z* B3 F7 N' T! c2 I" G  rAF: null
* F) v4 h9 I" a# s8 M% o})
/ H( V3 `$ F+ L! @7 A
- s% K( x6 ~6 D# }: m: {; M// 定义一个计算属性，当开始数字大于结束数字时返回true
8 b3 B3 x  T- J8 ^1 ^& `const stopCount = computed(() => {
3 ~- B4 z5 Z/ q+ J: G  return props.start > props.end
  f) B3 m4 C( Q2 u})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])
* D+ i  Y* w. D" G# O6 ]8 P
8 F2 s. m2 W) b- q1 [const startCount = () => {
$ ]9 x8 f- j$ o2 F3 [  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
}

5 W) q8 {/ c+ W9 x! ^& m$ j$ M  ~watch(() => props.start, () => {
  if (props.autoPlay) {
9 Y7 }) i0 W: S0 N/ r" S    startCount()
: O2 @8 |- b" r3 }2 _( d  }
3 N5 |' ^+ c8 z& Z) v8 O6 A5 n. s})
' U9 _# X4 v9 [4 E
8 y. I3 S7 X" ?. E* Fwatch(() => props.end, () => {
: \" C2 R- [& X+ M. B" s$ n  if (props.autoPlay) {
    startCount()
  }
})
// dom挂在完成后执行一些操作
onMounted(() => {
/ m! O' @  F; g, y/ ^2 N) h! z  if (props.autoPlay) {
# O+ R. X5 |4 s) b2 t    startCount()
- y0 S$ c; r* Q. ]8 N  }
) ]- Z# P3 R4 Q2 S0 h7 ~( k2 \  emits('onMountedcallback')
$ n- K+ l# \9 M0 ~. U, I: E})
// 暂停计数
0 u* Q+ u0 |6 u$ q" iconst pause = () => {
+ Q2 g  Z" ^- ]( _" e  cancelAnimationFrame(state.rAF)
% j( P6 y: n* |) d}
// 恢复计数
' E1 v' `- |4 zconst resume = () => {
6 R: i% G+ G4 @  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
) }- Q4 |: y9 j$ q  requestAnimationFrame(count)
& S! J; a$ x8 y7 B: j/ V/ K}
& [/ {3 W7 L" A+ }" K/ M9 o1 M0 T
# r# j6 o8 w$ Nconst pauseResume = () => {
  if (state.paused) {
0 a( K% s& w8 U9 c! H    resume()
    state.paused = false
, X$ T$ E/ [6 R  } else {
4 L  n, e' p# k    pause()
1 ^% ?! l( }+ x  A    state.paused = true
  }
}

2 ?; `/ V) j3 t& qconst reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
}

const count = (timestamp) => {
; i# m2 o+ a# k% |8 n  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
- B+ @. G% U' U4 v8 r! e& ~  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
; h" Z4 b/ _. `! Z    if (stopCount.value) {
: v: l( h& I! }3 U9 L8 B$ J      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
7 b* v, R; w* u. T# O    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
1 f0 X5 v0 E8 o) B: ]) C  }
8 K# L' f  U1 u. B" k; e9 T1 y9 G  if (stopCount.value) {
  K3 S* x$ Y0 S: t- ?/ E1 S    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
* K+ t/ }/ u. E! N    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
9 m7 q) k2 R8 j" ~! C+ s
; L3 O, h- b" @0 L6 _, x+ p  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
: ]5 F3 f9 U* D$ B  } else {
    emits('callback')
- S0 c; {- T- o8 j; {+ A! _+ H  }
. {5 y; G1 F1 R* I: ]" Z7 |}
+ R7 b9 M( e8 Z. C2 @// 组件销毁时取消动画
onUnmounted(() => {
% I4 K( V+ {0 }0 I4 A1 H  cancelAnimationFrame(state.rAF)
})
</script>
, P5 |* u# `; w4 o: k% _+ I$ ~
1
2
3 o) E* w- `+ f! d. t' z" V: g3
4
5
6
7
. ?- k2 ?+ r" C" n; j5 ?, e8
5 M( m; [. ]+ h2 B  w% T3 |9
8 ^* t$ Z  g# D( Q10
# L$ f, x4 x6 v5 V7 Q* ?11
12
13
14
15
16
17
9 f  C8 S$ y8 k0 }0 A/ n18
8 c+ D" }1 ~) x# Q19
20
21
4 A+ [$ [- I5 z& X9 L( h5 U22
23
/ O7 ^+ a- Q) U' V" j+ `24
3 x  \. ^$ r3 M+ h, b25
26
27
28
: S% {0 |7 _% h29
30
31
2 G6 U$ F+ w0 m3 T$ T' \/ F32
& p' I7 r" `8 V1 F, a33
8 k$ L- B, L6 k$ `6 G0 i- p; w2 E34
35
- e; D4 T: R1 @  k% i36
9 [, f/ U" Y; v37
38
39
40
41
" g- g2 z- c8 w& _$ }) T4 s4 ~+ l8 P42
43
44
45
4 {1 p2 |) L. |8 S1 x8 Q46
47
+ W3 v. B2 U6 z6 F/ j48
9 S: }& @& Y8 m* q# u" t; B. P2 E49
" ~- I4 G" @  M50
1 u: e/ d' M9 _: x0 R: \) Z6 q51
52
( }: B4 {: X9 O. W6 O! f% b53
0 S. L4 J* i9 Y3 e1 ?' O8 ^, }54
" f" z( U" ^5 ]; {3 s+ c( E55
56
& A0 }! ]* o& B3 d; L57
$ C4 h# T* r: U) p7 p58
- I; s9 `9 l" y! `/ R59
60
61
62
/ G& X8 u: W4 ?3 x63
; A  ^! {- q; H+ d4 K64
65
66
5 K8 J  A7 [8 T+ e9 d67
' K8 w7 B8 x2 [' X$ Y68
! @9 @; y" W- T* K% ?69
/ J; a* x2 o; v, r6 b) Z70
71
. s5 @' b. d. K$ V. {72
: z, O  j3 t9 [. W73
4 R$ y# [$ v5 q, h5 c- `74
75
) C; R- T1 W, n76
8 N1 q# M; \' k6 Y8 G) b77
/ f3 M" E* T- ~. t78
) s/ L3 v7 C4 s7 y# o$ U& b79
. Q1 W2 d' ^& y, P+ `) W80
81
82
: b" n9 s8 i/ [+ o. w2 w# C83
84
9 {1 B, U# K# v0 y6 S# ^85
4 P$ l. M& M' R9 J$ v2 [0 N  C9 b86
87
88
89
90
& T6 H8 Z5 B  Y' S+ X% f, }91
. s' L0 |+ O( @- G0 a92
93
94
  G' n$ Q9 h9 u9 {9 V0 ]- n9 b' U: H95
6 {: ^9 Q0 L7 Q2 e3 M  I2 x96
97
8 h2 Q, ~& V: r5 S98
* b+ z( j) K  E7 t% `99
+ B. i3 e$ a' E3 o# i3 B( {2 }3 w  F100
9 o- V$ H3 M0 z  U( X: D, }$ o101
/ X8 k9 {/ ~( ]5 i102
! U% \& X: Z! v9 y103
0 @( @& C# v5 ?6 Q104
8 c9 ^9 l* }) E5 Y105
" r, {1 z1 M4 q; P6 c) h5 ^- m106
107
108
. }+ y. u$ V. v. x4 d3 _109
- L! V2 c3 v9 C: C- Y7 O110
111
112
6 g2 M) u  y0 t113
114
+ Y  c+ q9 w) P- e& _9 h115
116
7 q8 N  B, N& F# w+ m& O117
118
119
120
/ |* _2 v1 H( f' ?! M121
/ ]1 I2 I! ?: ~3 D& E122
123
124
125
126
127
128
7 L( k' c8 S: N# [! O129
130
) o) U% z2 e* Z- ^: j131
132
133
134
135
136
' w* [- Y: [6 k; [( x137
138
139
140
141
- ]& M1 L' @/ @+ t2 g142
143
4 ~3 }* {' H$ @144
0 o4 S3 C' S4 @4 D145
146
0 G$ m& d  f% j4 C5 r3 g147
  y0 c! m! E( t148
$ B( ~( ~" t; Q$ i149
150
$ P* ~/ @: h" S151
152
. L% R- n' f* _  I& w  L7 P+ H153
154
155
$ J' M/ f. V" T& C156
; s! q- L6 M; P) l" I% {5 H  L157
' \' h0 P$ f( `& y* f- B! Q. S. x158
159
160
& }9 E" Z# m) V8 y161
6 r& R8 b+ n, V% F6 T0 b162
' ?& s& i" j8 m! ]" k: V163
164
165
% ~* J6 r. \& A- L  Z) F166
6 F" p* F$ U. L6 P" m% f& d167
8 y' I" r' y9 X" v" Z168
169
170
, i& o, W" Q8 |" e5 e' G171
* \/ ]0 ?) ]  K0 J172
173
9 T6 [) w4 o* ?" ]5 K7 D& G, d+ o% u174
& n6 a1 U# E# _* O4 t* W5 y175
176
177
178
179
+ D7 ?# `9 O* R( g. R1 L180
8 h2 _* h5 b2 G8 v181
7 ~$ j& B$ y% B! m6 y! ~182
6 F- z% w8 U+ S* u183
5 [" @5 f) F( ^184
185
186
187
* ~( E( ~, f8 Z( c, ?, e188
- R. S! F1 Z9 j" S7 e189
190
- U: c% g: F+ j191
: @, G1 M, w8 p1 H- j. v192
193
194
195
, n" a3 x) V9 [/ T  m' N196
+ f, I7 N$ g" L1 W( [197
  T% N) d2 ]; W# \7 `% n198
199
200
201
202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
" j  z( e6 ~! l  C! F
8 F7 x- k8 ]# N8 Idemo演示
: o7 y1 S' K& g* P后续的线上demo演示会放在
demo演示
完整代码会放在
个人主页

; q; ^- l$ u7 _) O希望对vue开发者有所帮助~

! m0 X: H6 ]1 b( l个人简介：承吾
  J% E" E0 f7 N3 p工作年限：5年前端
地区：上海
7 H! z4 @& Z! d  B个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
) X  [8 |; A4 E% b' h  S: g+ g4 T4 B1 q

1 ?* f, V: ?) F8 S1 p1 i
2 I, C% z4 L5 V9 n. t
3 P' e) x) j# h/ H$ I' J5 o5 X% N————————————————
4 z0 E, g2 v  s) P. Q9 J版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847

6 @* Q/ w& O8 Q7 g3 l, a