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

杨利霞

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

/ `! o# `* b4 p$ o- ^前言
+ I0 c' R" f' H; @8 R& b, Cvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
5 o& O$ I5 C* `7 @; a1 TTypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
5 W+ R& V2 ?2 W3 h. `. e
+ R) z# Q) \& x4 c4 P& D
. P& |. p! D! G3 N思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

" j! @# u5 e& V文件目录
9 Z, c# w7 U3 K, t' e0 W- I

使用示例
<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
. [1 Q; O+ w7 q& ]0 _: }9 g6 v' S  ^' V :autoPlay="true" // 自动播放
* X7 ]# v* P' Q) l :duration="3000" // 过渡时间
+ e) X  Y/ \5 j' R prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
. d( I, W% S+ d" f1
1 \; \" @) a) q! F# ]: L7 Y2
1 S9 ~: N3 Y  s3 g% ^3
4
) u9 Q$ U2 l1 r5 J5
7 W+ k  w% `, q7 d  `, N6
7
8
入口文件index.js

const UILib = {
& }; ?: \5 J3 b! N) [' O  install(Vue) {
) \) U* v( E2 r6 i+ ]    Vue.component('CountTo', CountTo)
  }
}

export default UILib
2 L- e/ b. i. i& ?0 N9 L
1
3 R6 z/ P7 g1 T! ^4 _2
" J# B: p4 l9 E' U! ~3
+ X/ T2 E4 }) {6 T1 H! n4 K/ Z4
5
6
7
8
) |. }' W/ W8 b+ \3 n9
( s& k) p: P; I2 |- C# M& L% Q' smain.js使用
* D5 I. i: f0 gimport CountTo from './components/count-to/index';
app.use(CountTo)
/ \( f- U  E6 p+ N1 y  }1
2
requestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
* c8 M; h2 `, A& L3 ]7 X  c" M如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
. g) x0 v% c0 t/ O导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
8 k; W: ]7 Z  N0 [' Plet prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
' P4 G# N" g1 b0 w: m! b// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
' d2 [3 }& f4 `" {* ~    for (let i = 0; i < prefixes.length; i++) {
9 r+ V! V* X9 g        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
; P8 R7 S7 E4 L- V        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
1 U0 I' g$ {! _. u    }
4 {: j/ e  j, Y) z8 {: {
  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
, @. T9 j) U4 \! I5 Y) w            const currTime = new Date().getTime()
+ Y4 g3 ~" j6 J, b3 i$ B  e            // 为了使setTimteout的尽可能的接近每秒60帧的效果
7 ?- K& J6 ^1 X' w$ g. i5 y5 u            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
' ^, O/ m" q% F9 [& T" M8 \' W& p            return id
9 h4 @8 ?) ~9 b, F; D) p        }

- g( {2 ?$ \# m        cancelAnimationFrame = function (id) {
8 ~: l9 `3 h' O. X( f5 O            window.clearTimeout(id)
        }
    }
" h" S, U5 z0 }2 V4 q0 g2 }9 N
* d+ d* Y5 ~+ T( Y" }1
( P  s9 U" g& B* c: Y2 G% O* x2
9 f* w* h1 m) q8 |8 ~6 i. A: b& W3
4
# D4 V( V7 X' v8 N( _- D5
6
7
% N: |; f2 D8 h! _# K5 _# o3 r9 A8
- _0 X$ f4 X& W" R9
/ C# c# \  C3 L+ d! [10
% ~7 ]3 Q# F: L: b' g11
* A0 n5 p( u" J1 B9 B12
13
14
15
+ a! B6 J- w4 C/ t16
17
18
19
20
4 ~* P  c* C# ]" u) c9 G21
! R( B0 T5 P6 [5 [1 a3 A22
4 q) d4 p9 D3 c; g( n! t23
24
25
26
, d; C& t( T+ M4 E, Q5 I27
28
" _0 t: u" K7 }; I! U29
30
31
32
完整代码：
requestAnimationFrame.js

" ^# d' T- l: F# H' G& n6 Y; Y$ Mlet lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

let requestAnimationFrame
. z1 z* b  ]9 s* u5 _+ flet cancelAnimationFrame

3 v3 W2 F# z/ z% ~% A// 判断是否是服务器环境
; U" @  B" l5 O$ }const isServer = typeof window === 'undefined'
if (isServer) {
3 J, P0 y& `" r( w8 u    requestAnimationFrame = function () {
  k* o& ]7 b7 D; s; N# P+ r, b        return
: J. t: r/ F# y* E5 b, O. O    }
! u  Q2 X; g3 l& K) \1 L    cancelAnimationFrame = function () {
2 f1 l1 y+ @& k, g2 K( T        return
3 d! h7 t5 z' t! i    }
} else {
    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
9 m- D1 z: [' y    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
+ {$ Z1 a& i9 n4 }- _/ m1 Y        if (requestAnimationFrame && cancelAnimationFrame) { break }
( \# m, ^0 l/ Y) j) p, M3 ]        prefix = prefixes
$ C; ]7 l, T6 j        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
* |& h/ T7 s7 D* d+ T5 E        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

; g, p0 @; {$ N& K% X6 q- z    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
8 u1 Q' [. `* N! f" x    if (!requestAnimationFrame || !cancelAnimationFrame) {
6 l3 ]& x+ G# C1 X0 h. l/ o2 P6 u        requestAnimationFrame = function (callback) {
/ K2 t) z2 p* A9 O. Z/ e4 ~& C            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
  T1 J2 W$ N4 n( z$ Y            const id = window.setTimeout(() => {
9 M, b9 T! c  l1 Q" M/ k                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
$ O6 W" |4 _4 N  O( @        }

& a4 c, s* {9 x% U, ?) Y        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
/ Z, d* D& J- b0 o# }& B# b        }
    }
}

6 C, S/ P/ C$ K* lexport { requestAnimationFrame, cancelAnimationFrame }

5 q. N; M8 E/ ^! b
2 ^3 i! ^- l4 B# ~5 P1 V1
. h' @% C' Z9 ^# N6 j$ h% p) O& ^2
. l! |8 R  i4 N3
4
5
5 Q" X5 T  o8 L8 ?6
- ^0 @- G  B" e& B2 c/ c+ y7
: |; v: l, s- i8
9
10
* E' K4 s3 t5 T11
12
5 c/ i' X4 t5 g/ h0 F. ?- C0 x13
14
15
16
! ?; O4 A" B2 Q& Q17
  e- g( i, a2 _% D% z) o7 H18
19
! s9 y4 k) F9 t' m( L4 j4 c8 C20
6 ~7 a, U; E% ~' ?21
22
) b( q5 S, \; a. G2 U  C3 L7 Y' @: S23
24
: T$ [9 y% ~8 |4 @25
: D$ H  ^. N: j8 h7 t26
, h1 Y5 T$ v0 n27
0 e: l* R8 \' k28
29
30
31
32
33
34
4 N& G$ f2 K# v35
" S6 Q0 R7 H+ A  u4 _1 g36
) ]: e2 n" W3 `$ X37
- N; r7 o# `$ ~1 M" Q/ u( `! h* O! l38
4 B# {2 q- Z* W- Y1 b( g39
1 W* ^2 y. p7 i. j40
41
42
43
& F: T; J( y3 d( D1 ~0 [$ b0 x& L44
2 o& t) t4 c, d/ A3 B! i45
- n& q+ h4 C* H/ U46
9 L; j# C  B( X6 N: r7 n47
48
CountTo.vue组件思路
$ n- D; I; H2 g8 Q8 ]  J首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
( S- M5 _, k" J: V8 ~# m' X$ @1
0 {3 Q2 t- p( G" f需要接受的参数：
( ?/ P) }  r. P% Q3 K0 A
! t# B, w$ [/ _const props = defineProps({
, a+ P$ N' \" Q" G0 ?6 l0 \  E  start: {
! I) c& m) c( P$ W8 h. p    type: Number,
: w  {- T* \. i! d2 [: g. V& G( X    required: false,
  G$ T. U0 X- ?) P' A* A- R    default: 0
# P. w  u/ }. q# [9 p: B- p* u- N  },
# ~' z1 t) o# x- m; {; h  end: {
    type: Number,
    required: false,
, ?/ C  q( _$ T5 D! [2 Z7 g    default: 0
( X7 l1 S1 _, H. y  },
5 n. i" R) b6 `8 X1 A  duration: {
    type: Number,
    required: false,
    default: 5000
  },
  autoPlay: {
$ s# c$ L; i2 B2 D- }& m    type: Boolean,
8 O% k- {4 j3 I0 M" S    required: false,
    default: true
* m" l0 [; T8 c' a* N  },
" w6 w+ h1 P/ H0 r9 f% ^  decimals: {
3 H* |$ h9 y7 r& A1 u1 [2 A    type: Number,
    required: false,
    default: 0,
! _* l7 k2 x! p4 E! }/ R    validator (value) {
' X. N( g4 R# A! I; q* h3 N2 b      return value >= 0
    }
" F8 b$ Z* @3 Y3 ~2 ^  },
+ {- l8 V0 H4 q  decimal: {
) A. _/ |0 e' ^1 D& u3 m+ Y, I- D% F' G    type: String,
    required: false,
    default: '.'
  },
  separator: {
    type: String,
    required: false,
    default: ','
- G9 L4 m4 B( C/ x  },
4 S& i1 N, O2 [: q  P- u/ z9 @" g  prefix: {
    type: String,
  s( P, t6 W, x5 f    required: false,
& L# j5 Q7 q2 e2 v2 b    default: ''
, J1 d" ^: u) X: _3 Y4 Y' o  },
  suffix: {
1 }6 ~! _1 f9 I; Y) K1 ~8 ~7 s    type: String,
    required: false,
    default: ''
  },
% m. g7 z  x) I7 x  useEasing: {
    type: Boolean,
- E; F+ ^6 K7 A    required: false,
    default: true
* r" \* f: e& s7 y/ {2 a  },
  easingFn: {
    type: Function,
    default(t, b, c, d) {
+ ^0 ]  V! ?; V4 r% C      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
1 _1 m* O2 z/ ^5 ?" @: L& n7 M    }
: J  y, `0 ]: z7 {- b  }
})
( V+ n0 y; ?6 f$ J
+ m  W: F& y# n2 D4 Z; ~1 M
8 E* K5 I: c% @  E% r- P1
2
$ j: T+ K, ]; E  s1 ~6 A' `& S3
4
5
6
7
8
  _2 r. c) |! Z4 D  t9
6 ]5 u& N! \; ?- ?$ m7 [8 @10
11
+ v, ^6 m5 g. F12
+ h& ^8 Q% b9 B% \5 k13
3 v5 i1 _' p& U2 M5 J: O- O14
, f: Z5 X/ G* F0 D2 ?1 r15
16
17
18
19
20
( B0 t+ I1 E$ T! m: T  D21
: S- z$ x8 D( A+ `0 g5 E22
23
  B* y; a0 l- ]9 v24
25
: J% W. `) b  x  M26
+ P# ?% H' u3 y* }/ c2 ?5 }7 g27
* F: a+ @! R* Z0 W2 ~. d9 k8 j28
29
30
# `( K* o" p" r7 ^! Y$ H/ E+ R31
32
* ]+ b( q! t; `4 `33
34
. D+ e/ P6 Z$ |3 @  V35
' [% W  L) q- X5 n0 p- ^3 m36
% I& e% c, O0 R3 Z8 K) Y1 |37
# \* y1 r9 K4 M. Z38
+ V) J2 x, E# Y6 \9 U: F- V; e39
40
' b6 ^, Z6 p  z  ]& Q' f0 A, |. `41
42
  I0 o- I8 H0 D0 J43
& G  _, a( C  Z  t: k44
45
4 R# p9 s! c6 ^0 I1 y4 J! v& N2 o46
1 R2 L. l) |& D/ i3 Q; t47
9 i6 I! C7 l4 a* }1 p48
49
1 K0 M. }8 {* b5 d2 v# t50
51
5 Y0 |* W9 h1 w* d+ f9 z; A52
53
1 @: |9 _; H: G, d+ B8 [/ z54
' j# v& Z2 S! A7 o/ b55
% g8 d) V& P: l7 p; `8 J56
' b5 @' ]' k+ d: D7 R' x* u* R57
58
59
60
: ^, ?+ v/ |  O$ M, b, F; Q3 d61
62
启动数字动效
3 f% \5 A7 n* O& B7 a, \
0 w+ J4 u. F+ H6 econst startCount = () => {
1 H8 k, S% o: x  state.localStart = props.start
/ @2 `. `/ y/ N* q' m' k  state.startTime = null
9 U4 P: k0 K% w9 e: P4 R# n" ?& G; S8 a  state.localDuration = props.duration
  state.paused = false
* [5 m* @% Q( D% {5 ?+ O/ ]  state.rAF = requestAnimationFrame(count)
}
1
2
' Z* ~0 S% [' F3 K; D  ]+ r5 u3
5 U) H: _% z2 B* P# P) W1 }4
" w0 P6 T/ ?7 @7 a$ ]# }, C+ g" n4 Z5
8 O. d! U8 {. U6
7
. ?' }9 [" `( a. O核心函数，对数字进行转动
3 K, ^  w1 \2 W' D1 {" b
  if (!state.startTime) state.startTime = timestamp
5 \3 D, b$ D0 R" Z8 j' W  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  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)
: A' X8 G3 P2 y+ O' ?& U' {7 }    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
2 I& e; R' X& W  T2 A    }
  } else {
    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)
: U, X$ ?: }+ d1 C0 @# o    }
  }
  if (stopCount.value) {
9 M& ]) r% t& q" Z6 `; [+ U    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
( \; g) K5 Q8 ^" s2 _2 p    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

5 d8 h7 n4 Y9 W3 @  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
7 ]6 j& f% {/ C, `1 f! b  }
2 |! S0 @  {* O+ w( O9 O# [}

. F) |$ I8 \8 L7 i8 Y+ B$ |4 Y
// 格式化数据，返回想要展示的数据格式
0 u, P( @1 }+ n% v. v- U5 xconst formatNumber = (val) => {
. h# U& Z! b5 `& ^6 r  val = val.toFixed(props.default)
; h3 h$ D1 ~- s( @9 C  val += ''
' H) I" k1 D5 g1 K: o. [! a0 D, w  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
. q. q7 O  a; I" G, x5 j& m  S  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
" g7 M" |6 W% ]1 v4 I% n) t      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
4 [- j2 U. C, u1 Q/ A: D  }
3 E. F# r- n7 S& }" I! Z  return props.prefix + x1 + x2 + props.suffix
}

  i  }/ B$ B3 U1
2
3
. j2 }0 G0 ?% Y0 \: X) ?/ g4
9 X+ `. u3 _/ F  r! i/ T2 P  f# q5
. m# R! J. e& q4 G2 q- \0 K6
7
# }$ R; C/ Y9 p) g! Y6 f# ?$ q8
4 d/ Z0 }/ R8 _) H8 T+ Z4 n& L9
10
11
/ C7 E) _, D3 z12
" s  y: y# O" v  _* h13
& B8 z7 G/ H0 @14
, Q0 J( D1 U! N% X. U' z15
" a0 T3 _* {; S9 j5 x7 O+ K16
17
" o  G3 A- b: I# P) t1 `$ h- m7 f18
9 r- c9 ^" b, J7 K1 P19
20
+ x% E& t' J9 W' D8 k2 ]. g' S21
5 k7 i( K  P% u2 t22
23
24
4 _+ D# H0 F% }3 B+ ^25
26
27
28
9 H6 v: q- x# H7 x29
30
31
+ J! B+ [8 J, |$ o* b32
33
0 `8 P+ T2 f' G) x( E0 ^* g34
35
/ k; K0 ~# z; L- }  j" ?6 Y2 n! p36
37
( w* ]# N% Z  _) h; ?38
39
" u! D) u# w) y- R40
41
) ?- h$ ]" b3 S* [9 H$ O% y) z42
+ {8 l4 U9 j; H6 I" _! `. H1 L# ?2 v* ]8 Q43
44
45
: b2 b6 U3 ]! m, K% b46
4 z. B! H! G, u47
48
取消动效
( N7 ^( ~7 u9 Z& [% Q) D
// 组件销毁时取消动画
( l7 Y4 Q* a2 N% konUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
0 n  h( a. t0 {. z* B# j; a- D1
: j) d' n5 b1 r2
# n+ }* N5 A9 b' J% q5 r3
. u: A# X) T# X6 A% u4
完整代码
" ]: }2 x9 P: d, H2 W
8 R# E  X$ {+ R' \<template>
, F7 y" J& H) s# p, V  {{ state.displayValue }}
- Y8 {! n( p) d1 O</template>
" Y% o9 s" a. p, t
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
8 F0 g/ Y4 R  j* v  g" F. qimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
' m0 l$ [; z$ I$ T% K& [// 定义父组件传递的参数
; L5 n# T+ P4 p; b$ ^0 econst props = defineProps({
% H& A; Z! a( p5 Z, o7 \& C  start: {
    type: Number,
    required: false,
- u' a* G- p6 I8 Z& X& P5 n    default: 0
  },
  end: {
    type: Number,
    required: false,
1 z: V- y0 n8 |& A" m, S: t    default: 0
  },
* x+ m  A; B+ ~6 ~! E9 r7 o  duration: {
& _' X+ e# S9 ~8 h+ N& l7 Z    type: Number,
    required: false,
, T! v, m4 T9 J/ e3 Z1 Y    default: 5000
  },
  autoPlay: {
  Q# s" u' o! k9 b4 S. j    type: Boolean,
2 u9 ]# k+ m# |( v' s    required: false,
    default: true
  },
  decimals: {
    type: Number,
    required: false,
    default: 0,
    validator (value) {
7 [7 L1 a+ u4 H1 r- Y% s' L4 Q( E. Z      return value >= 0
    }
  },
) I( N, S! L. ]  decimal: {
    type: String,
1 d& [: }# u' m+ a1 t    required: false,
    default: '.'
; m* n: m" N% g" N( N. W  },
& Y# F* G" ?: f$ {: ]" `9 l  separator: {
; d% h* o5 w' t# E    type: String,
    required: false,
    default: ','
  },
, U& d! {4 _  u  prefix: {
  \/ e3 D; w" @7 K+ T    type: String,
, a/ E1 T) w9 f1 u% g0 {    required: false,
    default: ''
  },
  suffix: {
    type: String,
4 e2 Q+ n% s& E/ @' B+ w    required: false,
    default: ''
) B8 V6 d, b6 x! ~7 p  },
# V6 Y# p& _7 O$ L+ ~  useEasing: {
    type: Boolean,
    required: false,
! S/ {- E% q3 I- P, ^4 S6 m    default: true
6 y6 U- f5 X/ u0 a  },
1 k; Z( z6 l5 t  easingFn: {
6 ]7 a. Q$ `2 S( n    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }0 j  s& @9 R* m  }
})

const isNumber = (val) => {
  return !isNaN(parseFloat(val))
}
. |7 J- C1 `( Z3 m5 k& [
// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
, Q6 Y- C$ K- x. S- p" m- M  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
2 q( _$ o2 Q& a0 ^  const x2 = x.length > 1 ? props.decimal + x[1] : ''
9 V2 U4 v6 n' N2 k( Z1 ~* J7 Z  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
8 [) Z- F6 s! \( ^4 u    while (rgx.test(x1)) {
  h, T: c5 _/ l  e1 E. K6 J! [3 s' M4 M      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
5 T! H7 {  Z6 j& T# r# B. I    }
: W& h. j+ V! F  }
  return props.prefix + x1 + x2 + props.suffix
) b( i7 i! a" g0 j, s8 l}

- J# F: _( z' y% v4 A, U// 相当于vue2中的data中所定义的变量部分
" L+ \% U9 V9 H& \! v) R! kconst state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
, a4 G7 d. A' R% g% y! D- R  printVal: null,
2 E) T. _" k( X  h' p1 O% L  paused: false,
  ?5 p% x* N% Z3 h4 R  localDuration: props.duration,
  startTime: null,
  timestamp: null,
  remaining: null,
  rAF: null
$ R4 S: Q6 i9 G8 p* ?})

; K3 Y# X  w: _// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
- V$ G* ^3 X: ?  I  n  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
# T5 a2 N! _( C5 a; |2 p  F  state.paused = false
  state.rAF = requestAnimationFrame(count)
$ s: d# h, p1 Y; r* b) y2 e6 L}

. I3 R, G( _0 X8 i2 pwatch(() => props.start, () => {
  if (props.autoPlay) {
: W9 w( A/ [3 l3 i3 N    startCount()
  }
8 Q4 ^! O' Z& W, |})

watch(() => props.end, () => {
  M# `- T$ p# u6 M% Y! L! x$ a% n  if (props.autoPlay) {
5 T/ s; a. g* g( P& w. R    startCount()
' x# w+ Z* a( Y' F2 K6 K/ o  }
})
* t1 D' b7 p# I) ~4 E7 e// dom挂在完成后执行一些操作
6 S# L) r) W/ I8 l, U9 @onMounted(() => {
  if (props.autoPlay) {
    startCount()
7 ^3 `' r9 b6 f% v- @  }
' X+ ^3 ^$ H" w. g0 d% s  emits('onMountedcallback')
})
; G/ F' w4 d! x/ d( Z4 ~// 暂停计数
2 x' O! @4 V8 d* @7 }  cconst pause = () => {
4 E8 y. C8 B: i" S5 r/ V9 H  cancelAnimationFrame(state.rAF)
: e% _$ [$ o0 F7 T9 F}
// 恢复计数
const resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
" u2 V. G, `! I# }  state.localStart = +state.printVal
  requestAnimationFrame(count)
9 p! k2 x9 b1 ^% p. l( z7 C}
' U; ~2 o: K" e  t# f
9 P0 M6 \! e" x( aconst pauseResume = () => {
9 ]  |; L" [3 M* H: Q  if (state.paused) {
4 O2 m2 E9 E) \! ?9 j$ O    resume()
    state.paused = false
  } else {
    pause()
3 e4 `) N* O* B* M9 E* h1 e, U    state.paused = true
  }
! |# }: M' P+ F9 o( ^7 J}
% T* V, k, f- H# i* `
8 {4 l3 z5 ?8 W7 b2 K, v% {, ?const reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
' G3 S  ]6 Y: X  state.displayValue = formatNumber(props.start)
}
; Y9 D6 V5 R5 S7 u+ E
const count = (timestamp) => {
: M. {" K6 \% i; `7 I1 ~  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
7 C6 V" p& c# ^' l7 H  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
" f7 _: J" w& d, G7 x& z+ t3 ?    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
& `' A) b* C/ t" @/ O    }
, U6 {' B- F1 q" j  } else {
    if (stopCount.value) {
9 r* z4 ]7 c( z; r& Y0 b      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
  `- d0 r. o7 R    } else {
" h$ S0 @, c; C7 ?; F  w      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
5 Q% N/ J7 r* W3 \# \* x! w    }
  }
# M/ g) |6 W" i) |* W: W( a  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
3 j% x0 p9 z+ {+ |) ~) S  }

  state.displayValue = formatNumber(state.printVal)
; d  l6 t8 L* q1 n8 @0 }  t7 m. P- K  if (progress < state.localDuration) {
7 W6 K5 g% l* [    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
}
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
  }3 @, [* V$ F9 D})
</script>

1
. E7 R3 D. `- Y* B$ |+ y2
3
4
5
6
7
8
1 K; E& @- H7 y, L5 Y+ D9
" `0 B4 ?" s! x& y7 C  h10
/ I1 E4 D5 T1 v' \11
: x$ l  k+ \2 r) M& C) O, E12
13
14
15
16
9 B8 n4 Q. R, S8 ]17
18
19
# s  @: D# {- k3 M5 X6 Y20
; E% f. \- J/ H  G6 v, z# |- Y21
22
- m& y* v. k8 I3 E& `" I23
24
+ j* Y1 B, o' _& p8 }) _25
26
27
28
8 ?: l7 x' V; [) V2 Z2 t29
30
. N, G+ d/ {( |, w31
32
33
34
35
! k8 z% n, b. ?36
37
38
39
40
# x& e$ O+ J+ W8 E41
( t+ M0 ~. m" s  y, c, S3 l42
43
6 k. w+ p7 s1 L3 Q4 [44
45
46
% |8 W; G5 ?2 z6 O47
- q0 K+ r$ t+ W) P48
. j2 X9 l7 y) H, y" K& g5 n49
50
51
( X% J' }, O" a1 {' B% G2 S/ {52
53
. ~0 h' d4 Z7 w, f# ?  d5 W8 w1 U54
% l" Y$ t" S8 i6 g% P4 {55
56
57
/ b; C. H) p9 C58
* A! r+ m9 E" O  S; |1 p59
60
9 |7 p2 A% d$ C61
62
63
64
65
66
; Q6 R8 }* S0 n9 A) _! r. `67
8 I- P" A6 M- B# n' N68
69
70
( D/ @$ S# n8 u3 e, m1 E' u' l9 m71
72
1 H& g  i: J: L7 c, _' U: ]! m- R73
4 J- j7 D  w& F/ p) u4 p74
75
76
77
78
79
80
81
82
6 ~3 ?* ~2 n0 t' S" Y/ m83
5 |$ D! }+ F4 {" b1 c! ^! T* J) K84
8 _( j1 }5 {3 k0 q: a, e! w85
2 H9 j3 {1 i( K5 a86
87
88
89
90
- w) U* A0 [1 u& c' f91
3 t8 u( \% p6 V" @92
; }2 {. k1 Q& |( I1 T93
) p6 @7 ^$ x' R- t* }- O8 G+ a* u94
95
96
. ?2 T' V) y6 Z; z97
; S" N% K" v2 D& ^+ [% G98
99
& B3 i# k7 F' o2 x100
  v$ `1 ]4 H2 r2 d% D8 T% K101
102
103
104
: A% j3 _( ^% @( J1 w# g( s; g105
  v9 w  o8 e/ k4 r6 D  y1 L106
107
0 `# c8 K; O2 I! I2 w7 M" }$ Y108
2 t) E$ h, j8 X3 m109
3 c+ v2 r4 @0 c1 C! ~$ e+ T+ D+ }110
111
9 I5 l4 O1 }; K112
113
' F( u) n  J0 ?, e114
% A* P/ {! Z7 |  N5 r. w1 h* U115
116
117
118
% q& E) w( y  B6 k0 W$ N) F$ A: E119
# T8 }  X* V% M8 @( y0 d+ \2 R) [+ T120
3 U8 q! {. c0 N  }' @1 ~121
122
- i* r3 Y2 g6 b3 M. X( T: W5 J123
124
125
, W0 r6 H7 K9 i/ \7 Z% i126
+ e+ G% Z/ G8 i+ a& y# @127
128
7 x' }6 b& c/ p  s2 Z* t" e( V129
& |: y+ X) P, {2 H* X' s130
131
132
4 k5 W; B, t! I133
# ~& l9 L$ I  t+ i134
135
/ r, D' J3 x3 M' p, g136
137
6 k0 V: ]( f6 n, q  C. X138
139
140
141
  W' ?$ @- X2 [2 C( e142
143
144
3 i8 N- L2 B% o2 f/ C: T145
146
147
" {- y% R6 m; ^( t3 Q148
2 R( A; @( [# B* E149
; U1 x1 [* E2 k0 k$ L& D# ^150
151
152
153
/ t# k% B, M* w; U  g154
155
156
157
158
6 v+ y+ _$ Y8 t+ N, k159
160
  V% \3 @2 V, T: @5 f% C161
% O5 ~- r* o& v162
163
+ C6 q% o2 v0 b0 k2 U; a164
" _4 e& z0 G! Q0 U8 J/ A' w. @* Q165
166
167
+ p# p! Z7 C. u: p* |+ d# t168
169
170
+ w8 o6 _+ Z% ]. \/ ]' i6 K. P/ L171
172
173
174
175
176
+ X- m1 b$ O- I5 v' x) k) m& s) v; d177
$ \1 u  h+ F% F  ^: ?178
179
180
4 b8 a" o' N, {! {181
182
183
184
; z; e/ \. F/ o) X' B$ q' Q8 a0 L185
8 k" U+ R) v* ]1 ?5 w, d: j. r, \2 ~186
! a, w, h3 y5 q5 V+ G& b8 e187
188
189
9 o# x3 c8 J  v5 n190
. s8 ]5 n. Z; k1 M191
; D" u$ C. l2 Z4 v! M1 n- l192
* M# X3 ]: Z  j' |& N, F- Y193
7 i( w. W4 j, l  A194
5 s! S7 M+ A0 _  W( |( B195
196
! Q. P' M7 F8 q; s% w$ I1 T9 I  x197
7 {; z# W7 u7 a+ f. v- ~8 U; S198
  B( n5 `& [+ N) F1 f- }199
6 |/ i9 a+ T3 [5 N/ _1 S7 x200
201
202
) I& Z, h6 O& L. j9 M$ [9 Z; P4 @7 D" A总结
% {  Z! s0 u' S. Q0 {自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
后续的线上demo演示会放在
" |8 a& i. f9 \- }# D$ ydemo演示
- _, P0 @+ |: H; f+ {  W! b完整代码会放在
3 V) T- \# {& \/ ^- V4 ?个人主页

希望对vue开发者有所帮助~
+ T6 c8 K/ |; f! D) v, R8 y2 S( B
个人简介：承吾
6 m. v) Z1 b" d工作年限：5年前端
, N% z' J" ?+ N* C' R! _+ n# u% E地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！


' T0 ^, K! K( {( ?; d( R0 o

————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847


0 L$ z" m# _/ u8 _. Z( A5 Y6 h+ Z