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

杨利霞

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

前言
% \: L" u2 W  wvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
9 R8 {1 }+ j: W( QTypeError: Cannot read properties of undefined (reading '_c')
! I0 U' V5 d" p& p( [) @0 G1 |的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


; \; z2 K' j0 a& G思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

文件目录
9 z5 J, |" |1 ~, L
# f& [/ x1 }7 x* t) ^5 G9 W" e
$ e1 Z' }1 F  c$ j% @" d4 D使用示例
+ n. [; o3 O5 g9 F5 `4 X$ @8 ~<CountTo
+ n" a0 z# T) J* e7 e :start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
, l- y1 z, p2 n' {: B; u; p1 i# X :autoPlay="true" // 自动播放
& }( A7 V! p% t9 f :duration="3000" // 过渡时间
' w* C3 r- M! W- T. U prefix="￥"   // 前缀符号
% F8 Y8 @1 o/ S suffix="rmb" // 后缀符号
" |- S6 h$ E- E) Z" w />
* R0 n" L" W  u) K9 O- p1
2
( B  |. x: R; ~9 p" I/ L* \3
  c, K! Y# `* N' m4
5
6
7
8
+ e9 b) }  P1 E: J; h入口文件index.js

const UILib = {
1 g) g' k- }4 E- }  install(Vue) {
0 A# w8 k& {1 L: y    Vue.component('CountTo', CountTo)
  }
}

export default UILib
6 y& J# x! p+ u# ]$ U8 @
1
2
3
4
5
+ K5 N2 y4 Y9 E+ j5 d  e6
. T4 q& J. Y5 X& g5 k9 |7
8
9
% O: v  L6 @" q, O# L& t3 b" Ymain.js使用
6 b# }% ?$ _) M' y, e: [; l2 n5 Wimport CountTo from './components/count-to/index';
9 [  `9 v0 g" \2 a0 x# Z$ o, yapp.use(CountTo)
: _, }5 ~% V% T2 u8 [1
% ?( I8 A0 v! X7 d9 Q& G9 |2
$ ?- j7 C6 e3 t+ V6 X% @$ A2 ~- arequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
! z$ N. ~, F- w! f- Y9 c0 s9 v如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
& C4 ?5 ~- o% \2 O8 c4 {5 m- A判断是不是浏览器：let isServe = typeof window == 'undefined';
8 L. B/ P; w# E0 [6 z增加各个浏览器前缀：  
1 O0 R: [  E/ hlet prefix;
9 K' |- N6 \; X+ {$ W$ \let requestAnimationFrame;
let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
9 H% T: d# D- B+ t    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
% t: s7 G- ]& Q5 B& l4 H6 B        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
/ i  S4 ?0 w6 e9 c4 c+ w; W
  //不支持使用setTimeout方式替换：模拟60帧的效果
1 A8 l/ L% O; [. t3 \- L' A  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
7 s) t, f/ b# i! g    if (!requestAnimationFrame || !cancelAnimationFrame) {
+ q  W8 r0 t( [' m8 t7 q        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
# A1 e; B: r0 r! f            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
- e  R) a1 s$ }2 d            }, timeToCall)
. `( s: z: G# E! f! }* ?6 f) s9 @& c            lastTime = currTime + timeToCall
            return id
        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
$ z" Q- ?7 @, D        }
    }
1 c8 Y4 t2 K/ m3 l( {
" E* ]# c1 _4 y" T3 J1
+ B, H  q! x$ W* O6 d/ Y6 V' Q2
3
4
5
6
7
8
9
0 Z4 G# a% B4 l. [" j10
11
12
13
14
5 n, J- h: m4 R4 L4 r1 W5 A- r# n9 g# P' |15
$ X& S5 A3 @6 Y# F; \8 u16
17
18
6 c# o6 Y% t6 f/ V% N+ V9 t" a19
20
21
7 U- B) ]3 U$ g9 ^22
23
4 j0 f1 ?4 T$ m24
25
26
& w, @. Q& f+ L3 f! s0 Z! E27
28
1 P% ^$ ]$ A4 D/ n# u& B1 Z7 |5 I29
7 h: s5 L) a0 g4 A2 F30
31
& D9 Y# ^4 p, G- v# c32
完整代码：
7 `- L& E6 w- y; o# {# krequestAnimationFrame.js
& \: i: b* V( r2 i0 S. N, U% D
$ ^+ o0 E4 M% wlet lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
1 Y) P7 _' G  O" i9 W
" X' B" c8 X5 p& w1 ]. ?! q% Mlet requestAnimationFrame
$ E/ Q& G7 e- ~" elet cancelAnimationFrame

" e  @+ I5 x) r  Z// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
4 ]( ~& \% F  ^" n5 k& [6 K& N' Bif (isServer) {
    requestAnimationFrame = function () {
        return
1 S7 D& }( x; J    }
    cancelAnimationFrame = function () {
  S8 k5 ]) h- S  y1 X, C        return
( D; H7 u) }7 T/ i1 n/ E5 p    }
" |5 b1 Y4 v5 D" b( }6 H% u3 O1 c8 n} else {
- w* E) A) f- p, ^    requestAnimationFrame = window.requestAnimationFrame
" y+ e, {4 O0 O8 I# p    cancelAnimationFrame = window.cancelAnimationFrame
+ ~- `4 U# K& M" x5 p1 Y  _1 }/ A. @    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
0 I9 Y2 s6 v1 g2 E3 m" D7 B    }
0 Y" H  l5 q3 E" h$ J
" L4 h0 f: M# y1 O2 g; V' U    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
5 D- K4 h" t: C! C! A7 v            const id = window.setTimeout(() => {
' q3 J. k, }0 P+ t# F* c" ?  \                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
        }
, L# F/ q) j- a' n7 ?
        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
9 S/ X  `# Y( U  l. b9 S" @- v( m    }
}
1 i, ~$ ^4 K7 o* B- F% u& H6 {
export { requestAnimationFrame, cancelAnimationFrame }

5 W2 L$ E# a+ P! G- M
1
( Z" Q' l- G5 ?  v% ~4 b2
3
4
) \/ U+ @5 ]) ~4 }% ~5
6
  e- C0 e' \# ~1 E2 I7
8
9 f+ I6 ^3 f" X1 p0 d* P/ {9
  _) T$ ^! |% t- E& n10
11
12
13
14
$ @6 |6 [! P3 v+ l! j15
16
17
% D. e( x  H% Y" K5 o- x8 L18
19
2 }" v3 v2 @7 b& a4 p4 Q20
/ O" g4 Y. [7 t+ v, p! x4 z$ M0 |21
22
23
9 E' F' v: P# m2 G7 M! E24
25
26
27
28
29
30
8 B0 Z$ e& g+ a9 B/ x7 R# L! V31
% N! v  {! L" C/ |. L32
33
34
- g6 g  w  }% V2 E. N35
36
37
: c$ r6 ^& {: H& @; k1 [6 @; ]38
, ]. s0 E8 H$ F7 o1 Y& [3 [! e+ F39
8 Q$ U2 v) i4 E5 A$ w; v" w8 h40
5 z+ N8 ?2 c/ B/ o/ w6 _$ l. [41
( L7 R5 M' u# Z& J& r42
8 ^3 k8 }1 y, `6 B! f( F43
/ _+ _& ?+ M0 j1 O2 O( I2 d44
% k+ F/ L: ]$ F4 Z0 _) }45
46
47
: [" W0 i# E7 l& o% |3 t48
9 k6 H0 l6 D1 ]# x' v2 ^$ [; P+ RCountTo.vue组件思路
, J6 B( n# {- c% N2 z; x首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1 S4 B5 P$ O$ P% w( O' o# Q1
3 ~5 y+ m' A# K5 D; u. ~" o需要接受的参数：
# n* s0 ~* t. @# {7 D+ e5 L* ]
* B" O( A% r' \8 Kconst props = defineProps({
9 B$ m- O8 L7 H6 Q5 ~9 N  start: {
    type: Number,
    required: false,
/ x) }" {( E4 ?9 J    default: 0
: F/ @3 U, F! m, Z  s% @1 q1 J) @  },
  end: {
    type: Number,
+ Z+ `+ T' c7 N, `    required: false,
    default: 0
+ I, w  b0 R+ S9 r- i  },
  duration: {
    type: Number,
    required: false,
    default: 5000
  },
  autoPlay: {
    type: Boolean,
4 }  q; B6 t, f- I3 w    required: false,
    default: true
$ W  f, Y) _. |6 c1 U  },
  decimals: {
    type: Number,
8 ^/ ~1 y1 T$ B: b& e6 A% {    required: false,
    default: 0,
; g$ H6 s$ N$ \" r& O, T    validator (value) {
# F3 u1 g# ^0 _. `( k0 d      return value >= 0
    }
! e' N# }. V; G" D  },
  decimal: {
  O) F3 }  @, s, m" t2 V8 X& o    type: String,
    required: false,
    default: '.'
* t0 S6 @1 W* h  _6 ~: k9 j  },
  separator: {
    type: String,
9 _" }  F2 e8 V. Q1 N& b    required: false,
    default: ','
8 U! F7 h: N- W  }5 J: r! e( ^# h8 l  },
  prefix: {
8 M0 i  y1 t; D& J( i2 m: y* n# \4 ?/ K    type: String,
7 d' N  J( j6 U9 Q7 O) ^- O+ C/ o' [0 V    required: false,
    default: ''
8 \6 o2 l, {2 T  },
  suffix: {
* J: O1 d2 L4 B5 Z) a    type: String,
( b/ N1 E6 U+ g1 A6 v    required: false,
4 v, X' i* `. ?/ y2 m    default: ''
9 M% L# M% J) u: R  },
  useEasing: {
    type: Boolean,
8 A7 [& u8 U, J' J; U: o- O    required: false,
    default: true
/ X# k$ Y( r- q. ]  },
( S1 y. ?( [& k/ z6 Y- g  easingFn: {
8 A' j7 G) |1 W    type: Function,
- I" R' R. P& P' S4 N    default(t, b, c, d) {
9 q$ u  ?6 k& b% k" {- k      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
9 D+ [( Z( K" e) |  J3 i- K  }
! \9 j$ e1 ~1 ~: }& q* \})
0 m6 g/ \! |+ Z8 Z. [8 h& K

1
2
3
4
5
6
7
8
2 H6 k( X! V6 Y6 i9
. }; W2 ?9 y0 ^/ S( e0 M9 P10
0 @, ?- ~8 y) O6 u$ e. i+ V11
% ^/ f' @0 T* s4 M9 m3 q( t, a12
13
14
15
3 m- z: ]6 X! o, W0 D  e9 U6 o16
17
18
19
0 ^  s# E# k8 p+ `$ _20
21
22
23
24
25
3 B1 H9 o$ p; l; }1 W' }& E% a4 A26
27
* i& l8 H- @; i) p28
, y! ?" q2 M$ q5 P29
30
* X! ?- \, @# @& a5 z31
32
$ x  G- S" X1 o, ~6 N33
34
1 S9 y4 l& z# c1 @6 f# v6 x) \35
36
+ |& D( ]2 Z. C# F37
38
39
  n$ A8 X: J% {$ i/ J9 d* `$ X40
- ~. n' |3 p* w3 v41
42
43
44
- A0 m5 N" k( ]1 Z0 k/ k45
46
47
48
3 G3 b/ L( ~; P1 D' |  F49
: i# K3 l) B( w# J50
51
52
53
54
55
$ K* C1 u8 t! {56
% u* E( u/ y5 e& {. z) e57
58
59
60
; z4 k: f( a& M$ l8 D9 t5 d! X61
9 X4 M1 x& `+ V0 a62
启动数字动效

5 K) \5 M$ z, oconst startCount = () => {
% J4 U& a+ b! i9 b- A  state.localStart = props.start
0 t) l+ L' f8 o' A  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
9 \8 U  t5 P5 K" e  state.rAF = requestAnimationFrame(count)
}
9 i. u. G. A' d& y8 n( ~  f' T! r4 j1
2 Z4 z6 u9 k* C5 w; e7 ]2
3 G. i( ?* p7 w' J* J3
4
5
/ f* _! o8 u  O6
7
) h. n* K. e% z+ o1 g核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
5 E' q5 c( I' {; ^0 p  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
9 C- K+ h" D2 D4 ~# A4 q  // 是否使用速度变化曲线
  if (props.useEasing) {
" R9 A4 n, k  i. E; [2 w    if (stopCount.value) {
9 ^9 d8 x) l4 Q0 d6 ?      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)
4 @1 C$ k( v; I    }
2 K; c4 o+ f) |* p" O2 i/ E4 o4 k  } else {
. k+ I- a. G4 t8 l0 f0 G( P    if (stopCount.value) {
0 P. N) V5 Z" n5 P5 L0 K      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
1 }. T! D0 p# s1 n& R0 V8 e% }    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
( z* E+ K, m' X# Q3 m& U; a    }
  }
5 ]; l* x0 s8 q$ N& l  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
; T6 d3 M) Q7 S) O$ l' O    state.printVal = state.printVal > props.end ? props.end : state.printVal
" Y* X4 A! H1 g- Y, P  }

3 a' X4 g0 W5 A% `7 A  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
5 G6 Q- ], M( X3 U% \+ l6 I    state.rAF = requestAnimationFrame(count)
( [4 U# V! J% E; q+ Z  } else {
. t) F* T. D, }, d    emits('callback')
2 P/ p7 e) x6 G; H, G5 J  }
& g* ~. I3 E, m! n6 w0 ]$ l( _2 |; l}


// 格式化数据，返回想要展示的数据格式
# _" A, q" ^1 I6 u! U* `const formatNumber = (val) => {
  val = val.toFixed(props.default)
' A1 W" H* [8 R  val += ''
8 O  u  M1 ^. p0 E. z7 v  const x = val.split('.')
0 ]# s, q. F) P: u  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
% u4 B5 l$ h( q( y. _$ h% u$ d- ]+ c    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
8 o: \9 @& w4 B3 e1 d+ j    }
  }
  return props.prefix + x1 + x2 + props.suffix
7 ?3 y* r$ x4 Q! n}

- Q0 }+ z# b4 X: A% T6 p/ ]1
/ y! W3 i! G1 ]; v- P* `2
4 Z9 h, q4 f( r2 R2 b! V3
4
  ^- R( h& q) C9 w- P, x; \5
6
; \% ?, b' _7 C) ~8 `7
8
9
10
11
12
13
14
) `; D, t6 _/ [9 @2 ~9 @15
16
17
18
' y& y2 g0 X  _8 ?2 g" M) s- H" ?* a, }19
20
21
22
23
24
- A' k# r) Y, e5 K25
26
; l1 O1 q7 D; S0 G; K27
28
29
30
31
32
7 [0 t1 H& X2 x. A33
1 H: u$ J& H, l1 `4 J34
3 W/ h5 T' e/ d( g1 p35
36
37
" T, U5 C) S6 y38
6 h7 y& v* z$ L& c: \, \39
40
41
$ G& V3 [  F6 J2 _/ j9 w! h42
' {1 p" }5 |! l! K4 ^0 Z) M9 G) s2 z; S43
. R  e' q3 r: O4 w8 g6 @# p* D6 j# X44
# e# }$ V0 W* _- O9 Q9 v45
46
* r- ~; U; x' Q8 W47
48
" Z8 D0 H1 f! X" g! B( V* ~. J9 N) F取消动效
5 x$ p, I1 n7 s
9 D6 g* P1 Q) g9 U// 组件销毁时取消动画
; W' f0 W# v, r5 d7 g- g7 _onUnmounted(() => {
, V% B5 C. [3 t  cancelAnimationFrame(state.rAF)
})
* u8 Y+ ~9 Y: N$ t. g; F) b1
2
" \$ s( L3 K4 U6 h3
% g8 S' Y! y8 v  p+ Z& L! K4
7 `" n0 g% w$ e0 J: {! B完整代码
- G( `2 X) V% w+ e$ V0 i4 n
<template>
  {{ state.displayValue }}
</template>

6 C% U- M8 d  M4 p1 S9 L! T; ?<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
! \  [) m+ @: i+ Nimport { watch, computed } from 'vue';
& D9 x! ^6 \( ^import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
) H* u. w/ I! H// 定义父组件传递的参数
const props = defineProps({
  start: {
    type: Number,
0 d" E4 i/ S$ H( T    required: false,
9 Q3 n/ M3 Q- Q5 V/ G" W    default: 0
  s5 C( e/ J) m4 y' _# a( H/ A  },
7 F1 O. f- l* j2 j. ^  end: {
    type: Number,
5 W1 Z; X. V! M4 A8 k    required: false,
  R7 e# F  E( m1 ~    default: 0
  },
& f8 O0 m, E+ m  duration: {
    type: Number,
2 ~$ @3 `: v) }& ^( G2 `# H/ A    required: false,
    default: 5000
% x2 i& |9 @: G2 J# Q& K  },
' \; Z: E/ A; _9 z  p  autoPlay: {
3 Q3 O2 l5 C/ N+ E    type: Boolean,
5 d( k$ p; L  c, P* H  I) ^+ o    required: false,
    default: true
8 B! E6 Z2 g* w" a$ ^; r  },
" T: q* T" j3 `; c3 x( P  decimals: {
$ z( C! X: Q" f( ^) A3 \# E& P' ^    type: Number,
# p( I) G# P/ R. p, }/ J/ l" X    required: false,
    default: 0,
    validator (value) {
      return value >= 0
4 {5 y( @. s4 `8 z0 t" \, t) W8 y" h    }
/ T2 K4 C' n+ C. M" o  },
  decimal: {
! A9 a& m8 q1 ^. q4 h8 k# R    type: String,
% x# `% M' l5 r. I    required: false,
    default: '.'
, j" x! j7 L8 S0 t  },
! S: v3 s$ Z# j) m* Y  separator: {
    type: String,
# X: h9 }' |; `; J    required: false,
; M% t( F9 `' x; y* b    default: ','
5 E, j" W4 K, ~) e+ g4 y- a. B  },
2 b: \* v) A" A( Q8 h  prefix: {
1 q" y: O5 a  D# q( s: j7 k    type: String,
    required: false,
    default: ''
  },
2 j) w4 y& ]. U/ S8 f# E' y7 b1 N7 J  suffix: {
, C1 ^. l+ ~. S8 n4 f    type: String,
( E  P5 X4 e& D1 `  s    required: false,
0 ?4 l8 [7 [. ~( z    default: ''
' P4 Q" M* l' k0 b3 i* S6 G  },
5 U8 }0 p: [1 t. [  useEasing: {
    type: Boolean,
    required: false,
5 A- f- g" G/ c$ T' ~    default: true
  },
  easingFn: {
    type: Function,
" W% C' h- N, G, b) s( r    default(t, b, c, d) {
& u# A! D$ B( R0 b% ]" N      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
7 R# p8 y" g0 o" ^+ S  ?$ ?    }
  }
. `$ @2 [) P3 _! @+ |})
  |) G2 t( |& Y  G
4 @- v* q( r% d. r% @const isNumber = (val) => {
- A! X/ m, k% p6 X/ z  return !isNaN(parseFloat(val))
, ?) O* _( Q: Q4 B, Z& k1 s0 C& C}
9 H0 {+ ]4 z  X( ~' B7 T) N% I* i7 J
+ B& z- J9 l4 K$ A// 格式化数据，返回想要展示的数据格式
2 I; ?, B9 Y! [/ lconst formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
2 @$ p) c2 N. t2 R* d/ r% d; m  const x = val.split('.')
3 C: g& o* h6 j9 p" u  let x1 = x[0]
4 [& z! N5 i7 h7 [! q! B  const x2 = x.length > 1 ? props.decimal + x[1] : ''
+ w2 b0 ?! K" i, k& e7 q* y  const rgx = /(\d+)(\d{3})/
3 l% B, v+ [' N2 g/ z. D' j  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
. |) f4 L; }0 E/ x, h$ [- y* b6 x  }
" A3 V0 b6 m" j- A  return props.prefix + x1 + x2 + props.suffix
}

// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
3 b( Z9 v% Z. D* V' _( Q& _  displayValue: formatNumber(props.start),
  printVal: null,
  s7 g+ T8 M/ n; O  paused: false,
3 O  Q+ {& h- H% D0 k  localDuration: props.duration,
  startTime: null,
( `) r. `- f* Z" {  timestamp: null,
3 Z$ Z0 l& {; z  remaining: null,
  rAF: null
# p0 {, Q5 q+ k1 h5 `})
& `" `+ W+ g1 ]7 T5 E/ m
( |9 X" n% c0 I4 Y) m0 @* ~$ w// 定义一个计算属性，当开始数字大于结束数字时返回true
" e4 s& P* U' u# V4 x6 Dconst stopCount = computed(() => {
  return props.start > props.end
* ~5 y' P- l3 c9 @" r})
, m' [) r1 v; x; z: `// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
  state.localStart = props.start
6 G& R  n& G9 P8 U  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
}

/ v* ~$ l; N$ I# k8 t' e* {' ?watch(() => props.start, () => {
  if (props.autoPlay) {
0 ~9 K# w2 ?& H    startCount()
  }
' Q( p, G- ?" ~  X})
7 n  |2 f. w4 c8 z! t
watch(() => props.end, () => {
8 F* S  \) A  p) s  if (props.autoPlay) {
6 W% o; O2 t; l2 m+ D8 v    startCount()
  }
})
// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
    startCount()
7 F+ K3 ]: z7 x6 e  }
3 j/ q8 W) X! S! w- z: r6 C6 N4 z  emits('onMountedcallback')
# t  E! Z, ]: G% s  t7 l})
3 n9 ~6 H7 B* q( p( e9 p// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
, l6 S& j' C" J, L: M}
) r% @, A/ |, a& d$ J// 恢复计数
const resume = () => {
2 s+ [$ L& e4 S1 ]2 i  state.startTime = null
  state.localDuration = +state.remaining
: E' `& ?( C4 O  state.localStart = +state.printVal
  requestAnimationFrame(count)
$ {" W& q! `+ d}
/ d$ C- L! \$ `6 T& j' L# L8 T
7 z! F0 {5 B0 u5 lconst pauseResume = () => {
3 N& m: b: e! n0 }+ I: N% `7 @  if (state.paused) {
    resume()
    state.paused = false
: x0 ], w- u# c7 ^6 ^0 o: P  } else {
4 c. n3 X) C1 t6 q& J    pause()
' F+ q7 o0 R! i3 a& ^( p) P4 n6 m, |# B    state.paused = true
  }
}

const reset = () => {
  state.startTime = null
: }# e8 v# c* {" P" D1 D  cancelAnimationFrame(state.rAF)
) I* D4 r7 K" R& H. F  state.displayValue = formatNumber(props.start)
}
5 ], }5 r$ t- s6 i- f2 o' f
; G5 |1 G) E- ]9 a+ t, I2 ]+ u8 Wconst count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
: H1 {$ r6 F7 Z  // 是否使用速度变化曲线
0 R2 B/ N" @$ S7 }: R; I2 E  if (props.useEasing) {
    if (stopCount.value) {
* o3 Y& p4 S0 L1 T2 e) U* m      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)
" A$ d3 ?8 s6 m% j6 }% V, ^    }
8 a6 k7 W/ b! G5 _' y- q) G! }  } else {
    if (stopCount.value) {
, k1 ~7 E- C: j" p8 |9 ?, `      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
2 B; `6 F, g+ c6 v    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
' E& h, k. h9 @4 i    }
8 |, B% }; [: T6 V  }
  if (stopCount.value) {
, q! d4 J# s) G! |& e    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
- q& P! U. a1 d) |9 `3 k% D    state.printVal = state.printVal > props.end ? props.end : state.printVal
. `4 [2 P3 J! W5 n& F  }
3 e9 u  j) p8 p* g8 w' v' K4 ]
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
5 X7 Z  |( a3 s0 P7 `1 v- }    state.rAF = requestAnimationFrame(count)
  } else {
: Y! b7 o! [  P/ N) `" O    emits('callback')
. b; C9 p3 J4 t  }
; I+ }6 X+ h( T4 h: A3 L}
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
$ q* K0 I3 ]2 D' U7 y1 U& _% w" E})
. ^4 p  \+ d% h$ S</script>
8 u$ ?: N) Q' M$ f& d
; V6 p; k* Y: U" l# K% R3 z1
2
3
4
" S; r# D9 d/ m* c1 h' n& ^5 h, L5
6
7
8
9
10
  U3 ^* E& U- }# [; }1 C- {1 M9 c11
12
+ y5 @% i' u: P# }; s5 {3 [13
14
15
1 @9 I4 u) _% ^* n- ^16
17
* ^! F6 |  D* v- d18
19
20
3 ^* m2 Y  a" I" ~# }0 x8 i21
22
  ]; `/ z. Q. ]" U. k6 `4 o23
% Q: `8 o7 L. w; r/ F2 `1 V24
25
5 Z3 U! J$ q$ z" L. |3 s26
. `' C9 v$ V4 P  t27
" ]4 R1 T& {6 P/ t; Z* a28
29
$ n( m: h7 e+ A$ x6 W6 x. K. r30
2 G+ L3 r# R: W; r0 ]1 Z: X. p31
32
33
34
+ N/ f+ d6 I# C) ^' Q35
36
& i* ?7 r8 V7 x8 p37
38
, ?$ l' l+ |# W; e' ?5 i39
' T2 Z6 s) W& \0 Z8 m9 h% U40
4 @) N0 _. Q' n" _4 ]! T# X1 k41
42
43
44
- i" v! z* {, D# Q45
% R' S- o+ f# w  s* W! ~0 E0 ^46
47
48
49
; C' `3 Q0 x1 i0 U$ P50
2 Q, w3 q6 y2 t. H0 `" c- o51
52
53
54
7 s0 M7 t3 \  V" B5 w. j" o& ^55
# b# g; B# x: S1 h56
57
  D# t% F, v( D58
59
' x8 H. v; g* Q$ M0 K4 W60
* j- o, r1 Z5 a8 h3 [61
8 \* I: a! L( S. o( e% ^62
9 e  m; _' I, @" g1 Y" f63
! J; c% g* h1 D2 V0 ~2 l64
% D' z: e! q9 `: y9 a$ D2 Z65
7 j( t6 B7 Y5 R) X  n6 B66
67
! w$ f" W+ ]; h& Z* K( M& Z68
. |" T3 ^/ |6 d69
70
/ z, Z% U0 }0 B71
72
4 a# N! Z2 x* ~" U8 T73
74
5 ]4 }' y2 M3 R; P4 v75
6 \2 \* y: E1 S$ F/ y76
77
) t# r7 v% P% g% o  l6 h- q0 S78
79
0 n. z, I2 u9 l% d+ C80
4 _4 h4 r5 O7 i* j9 k0 ~, [81
82
$ @3 S; X* \; a! v3 E83
84
7 z; K5 Y; [5 i# B! ]85
3 n# r- |& h" h$ D86
! H% b7 Y' w8 @87
3 T* A2 `# D, n( k2 A88
89
* u4 ^5 r% V2 m& b( d" Y+ c90
0 U$ \5 v( h" l, g% l4 M91
4 E4 C) P% D; Z8 R; t7 o92
93
* o; J0 s1 [2 T94
95
6 E$ G5 H0 c; W4 V0 O96
97
98
3 }, B4 I% I6 M9 @; t/ x2 d99
7 _2 V, s) T2 w100
% v  \7 ?  w) l101
102
; V: ]6 i7 B' u9 o$ g103
104
105
106
! x: r6 z: D2 C7 p* h! P3 r107
5 n- F, K5 T% K5 F108
& d8 s4 y! P' n3 T" e109
110
4 J6 d( d5 u- q9 y0 p6 ]9 \& i111
112
113
114
115
116
117
118
119
! S' C, N  u6 l6 Y$ D120
1 E4 [& y9 E1 _/ s7 y" @- V* ~' ]121
122
/ I' y& ?- ^. a, \123
124
" f8 C  h' x  I- I; b7 A8 y125
126
127
- y/ \: R1 `. V5 k: [# ]; V( g& [4 g128
% Q4 [6 t+ K7 A& ^: C; m! a2 Q129
9 y# Y: l# w. `130
131
6 j- k# p( T+ U1 u, c- Y9 G132
133
134
% k: [  B  r8 w  i7 W135
# z+ q& r% d3 m136
7 W. k: K. Q6 d" ~" ~* |6 c# ]137
138
3 y! E. ~0 M' y2 }& p/ R139
140
141
% a+ x2 z5 w/ a+ M3 c* A142
! x0 k& q0 K( J143
144
145
; i! ]1 u* g; I* A146
; y" A* |3 c6 n" h9 ^$ n147
148
. B% Z0 N2 V! x0 s5 y149
  o$ H$ S# s! s. @1 ]6 {. w150
151
152
153
154
155
2 S0 z( j0 o' J& B) f: z6 T: T6 v156
' z4 O. R! y( j1 ?+ J* @157
158
' C+ i; P  z1 S$ i159
160
$ ]4 c! X. n+ e6 ^, ~/ p1 @161
162
: \  a: [8 d0 n' |" T8 r  |163
  z+ k1 W. C3 Q# L4 e' v164
165
% f8 i+ v. R4 i0 Q7 f; J3 s8 e. X( R166
167
168
169
170
9 }: [) \  b7 h. k; z# b7 |* K171
6 {/ t) `  Y3 E$ w" Y! w172
173
) ?# L# s: c8 A: j. L174
2 z  ?- T( u8 X" N% V175
176
5 f% B) q' Q4 J+ }# j2 e& [7 Q177
178
179
180
181
182
183
184
185
186
" T) @! ^! \% w- `% l( W. r* {187
188
4 x4 u' Z6 U2 U4 r; u) C, x189
190
191
192
6 G# ^* Q( J" K0 l. C* p9 k- D193
194
195
. X( _2 D5 Q1 Q4 B) `196
197
" [4 `* [& Z: Z' z9 b, u; D: _198
% P# q2 F) a+ D9 G0 D' l2 Z199
200
4 q' P" K  o: m; l7 ]201
202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
4 ]9 f7 h" h# `$ u3 ^
! I+ c1 Q# {6 t$ ]/ ~demo演示
后续的线上demo演示会放在
demo演示
" S  t8 a5 q7 m8 T完整代码会放在
个人主页
. {  W9 n7 u( K
; ^! j6 ~& A2 p% L# {+ [+ [& e. M( e希望对vue开发者有所帮助~

个人简介：承吾
工作年限：5年前端
0 ~+ x) l0 z# Z8 u+ D. }0 E1 r地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！

7 h/ p1 X" ?6 }7 R; P7 k8 N2 m& b
! r$ h& D, t. V; v% [2 X3 j) Q

————————————————
6 X$ D" a/ d5 ]7 ~* ^0 j- n版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
9 `' E1 Q* o7 v8 m% g" y: d原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
& d: Y5 G9 ~9 v( K  `
# X; j3 w! x# T* Y' _  f. d6 @