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

杨利霞

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

- |- a4 ^& ^8 R$ J- C! Z* P前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
! r1 J! Y+ D" u& C' f2 _7 s3 x" K0 @TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
8 {+ n  O' b+ s

0 ?5 A7 O* F$ z: j. ?. O2 e1 H思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

文件目录
4 O8 z% c7 p4 G9 x. c

3 s. u: M% V$ {5 I% I使用示例
<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
) r6 @, s# u1 `1 Z' X prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
) C& `% C3 C8 L, Y2 m />
1
& ]0 }0 i- A, n: l5 ]2
' P" N7 H, N6 z. I3
4
5
6
7
8
$ h# x- Q- J" [& m$ u! U5 q' n入口文件index.js
/ {; ]+ K: y' u4 g
const UILib = {
  install(Vue) {
' }/ r" _- b4 o/ Z" c: S* g7 t    Vue.component('CountTo', CountTo)
  }
+ {: ~3 p6 G) t' b}

export default UILib
+ H6 w# g) e0 g2 F# k5 W3 j
1
% Z5 a. g1 `8 |) w1 `) s2
3
4
5
  ]0 @! {5 P% C+ |3 ~! @" e6
" w# P3 ]$ R0 @/ o0 n% d# u3 T: ^7
8
% q3 i# ^* f  f2 s  Y9
main.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
# y# q" w& S' t; V1
" O1 U- Z* `+ \, A4 ^" x4 t) s. j2
6 E3 l* H8 v" @' k- b; y) t- erequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
! E1 m9 c( z. M, l如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
. L- Y. M% I* n, U7 [导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
: `- x4 l- l* E, s/ t判断是不是浏览器：let isServe = typeof window == 'undefined';
* b+ ^! y, H8 Q  `增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
0 M4 J0 r# J* h+ T( ?5 y! _let cancelAnimationFrame;
) m) V; `# j( p// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
1 u1 a7 n9 l; U- l# K4 t    for (let i = 0; i < prefixes.length; i++) {
! P2 n6 U. `8 l& Y1 t        if (requestAnimationFrame && cancelAnimationFrame) { break }
8 o$ `) N' A4 [        prefix = prefixes
/ B6 R( h2 X+ n        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
1 j9 x$ ~) M! ], D        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
% a4 }' z- ?& X/ R, z7 V
  //不支持使用setTimeout方式替换：模拟60帧的效果
: G+ d- W; Y7 n( E! N  Y  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
" o+ l1 R# D% N* j; F% \6 I6 H            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
$ j  o1 [! J2 Q- o            const id = window.setTimeout(() => {
1 c& z6 w+ x9 g6 P. h; |  s                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
! s" f& h% u$ N6 u' _) u7 U( d            return id
        }
- t) C2 b6 G. Q, f' I
; i! k* M7 r0 L! x: b        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
, v! j' X  {  v2 }/ j' r5 o        }
    }

1
5 D$ M5 f; i& N/ B2
: A( }" v5 E3 s) r. n1 t' X3
4
0 V/ Z4 E7 `( ?+ `) _3 `: S5 q7 e5
6
4 p! V0 D# W# n1 k! e4 P" i7
8
* U* r) [# {; ?# \: \9
1 x5 t) d8 D4 P% R& p4 [) c10
7 U# B& v! T) T4 U/ p0 C$ h6 `2 W11
" ^$ |* p* }2 M: u' j, x  R12
13
14
' I! }: I# J, _0 H$ e; g, o. I15
. _3 v1 V- [" N+ ]  R  a16
17
+ \% J' z  {& ^3 h; J! g18
19
20
$ y1 Y( s, h2 @21
22
23
24
25
, g" t' _6 b- b( Q! z, m26
3 X. f( ?4 z0 n  H: i27
/ `% o0 }9 ~8 ]28
9 Y+ R) E" n- f9 Z8 Q29
30
31
& B, ]8 H' B# \1 T4 ]32
6 X( l; @8 ]) W完整代码：
4 {& ~- ?# P0 e, B: i& J( F0 X& xrequestAnimationFrame.js

# z* z6 B; L1 ?7 [- mlet lastTime = 0
9 h8 i) i: G4 g% ~const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

( b( ^: h' v& X  c* i' u7 ~let requestAnimationFrame
let cancelAnimationFrame
" n5 s/ ]7 {/ L
6 p* ?7 k2 d" z7 h! u// 判断是否是服务器环境
/ w. r! R! ], }( O* V9 fconst isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
        return
# n5 [* d6 E9 `' u    }
5 ]3 H3 X+ w5 d7 ^    cancelAnimationFrame = function () {
        return
, Q7 n4 g3 J$ a: `    }
} else {
; U6 \7 |3 b8 v* J$ {    requestAnimationFrame = window.requestAnimationFrame
  E5 P, {7 S& E    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
5 e: n" C6 h9 j9 M  @        if (requestAnimationFrame && cancelAnimationFrame) { break }
8 |; `0 ]9 o0 B7 b5 W5 Y8 k        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
+ ~, X0 Q" E' I' X+ v* J    }

9 C7 B6 A* [' J0 n6 L: B5 e    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
  n  \4 ~7 s# n& u            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
! o' ]. ~# v; o            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
4 F1 a, l7 g, q( H: u" _                callback(currTime + timeToCall)
' O5 ?; e$ ~7 m            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
0 K! ]  k* v: Q2 y4 q9 Y        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
# y% Z- J# M1 M3 \    }
}

export { requestAnimationFrame, cancelAnimationFrame }
' c# t" U) _$ O5 s! F0 A7 o5 r

7 d& e/ x+ b" y$ U* U/ l5 V1
& }! I' |$ O5 G3 w2
3
4
8 f) `& M7 U: x5
6
7
6 ?; q: ?# ]# W: l, i0 ~8
4 g! _' K1 I, g/ Q% r9
10
11
12
) N% g* r' b  P1 F13
) C: V; w/ N% I& Z. H( r( L14
: l3 I  c+ W/ L3 c5 T4 x15
' Y- y$ g# T8 S/ X" H16
, s6 F% c  R" J( I17
" |' i5 j6 j3 T( X6 C18
: U8 ~2 z  @% w5 U' T7 W7 o; v' |3 c19
20
21
, D3 h3 [( @7 o4 k- F3 m8 U22
1 v3 J1 q0 X1 Z' Q23
1 }, i% x( O2 I- O24
( t& p" i  h/ L- L4 g4 T  i25
: E, k  ]7 N* j26
27
4 f, W# s/ p, _% y% Z6 X28
$ l6 b9 q+ `' r; h6 }  t29
5 k( ^% J  j# y30
3 Z: t; @4 l% U8 ], N( H31
' ^7 R5 U5 L/ e# H$ H32
& C( ^7 d" L0 N5 H% u' L0 E$ X6 {  L33
" d8 d5 |! l; F7 ]" J5 C34
; ?6 {# Q0 P3 d. k35
. x2 E3 F0 g6 [. Z& [: |( T36
37
* j, J$ \7 z" x/ V9 S38
2 a$ f/ x2 N( d0 @39
40
41
42
% `9 C2 Z$ F( O, I2 |43
44
$ M% L: Z8 y" o  F! L2 g' ?/ ]: X45
46
) t$ ^; g6 O: \, |47
' o2 D) \4 u) F. q: j48
- C( h$ L0 s% Z/ {+ `, B4 GCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

1 v$ C' E! D1 N6 K+ z引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1 J! h, e4 p4 ?1
需要接受的参数：

const props = defineProps({
  start: {
    type: Number,
    required: false,
    default: 0
; @" m" V/ B* E6 o. M, q! B  },
4 a- c& |, S+ v8 o$ c% A  end: {
, e+ ^# D# f! ]$ `2 H    type: Number,
" T. ?( B0 h1 X2 u& X0 l. @. a    required: false,
: F3 D7 P% e- A$ U8 `    default: 0
  },
1 D, b1 L; F2 h: P4 n# a2 M8 n! |  duration: {
    type: Number,
    required: false,
1 N+ O1 T0 S/ I/ k    default: 5000
. ?) u9 r) S" q4 E" c9 l+ ], a  },
" Q; }# e/ y0 q: g4 A; N  autoPlay: {
* @. Q! l9 d) u    type: Boolean,
    required: false,
    default: true
  },
  decimals: {
    type: Number,
2 m2 O) U1 z: ~4 R; r- A    required: false,
    default: 0,
    validator (value) {
      return value >= 0
$ T+ ]/ B. Z! ~5 Q    }
/ R" F8 l; x3 L  },
6 G! T: F* j0 H# h( t4 c  j# B  decimal: {
: S+ \' j& l% J5 [    type: String,
    required: false,
    default: '.'
; E7 w" e% Z5 v) W2 b/ V6 R0 ]  },
3 B; g# U8 K$ p: T# S8 S- W7 o  separator: {
    type: String,
, ^; \8 |. l6 J! }7 P! C    required: false,
* U8 E9 G5 z, c6 c8 g1 P9 q    default: ','
  },
% N2 e1 ~' P$ X/ Y. A7 X  prefix: {
    type: String,
9 M' R" J" N8 `7 a# z9 L, t7 p$ A  k    required: false,
3 a5 l6 n6 P7 H9 C# x! S    default: ''
0 N; z* l/ t1 n$ Z$ j0 V  },
% _+ a1 x+ e, {, e" Q8 M  suffix: {
    type: String,
/ p( L7 O' F) w5 M+ b3 n  p" @    required: false,
9 L8 v" B/ _0 c$ y2 U    default: ''
' o- b* V* p5 ?% m& @! o6 o: u  },
" E+ b! [) D* h; @6 v( w! j7 F/ O, q  useEasing: {
    type: Boolean,
    required: false,
    default: true
  },
* O( M7 {1 d" J/ [* g* y  easingFn: {
    type: Function,
6 C- H) B& ^/ |8 }3 x    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
6 w$ \4 Q+ l! Y+ |  }
})


1
2
3
2 m( ]5 d0 F+ U; ^: |4
: D+ s3 g1 U' Y' Z% ?: ?7 b( Y5
; s! V6 \. g- z4 g6
: ^6 I5 y7 y& d+ G7
$ K3 h0 F1 z4 V/ }. p3 A( a4 s8
9
10
) r! a. K  n1 X5 U11
12
13
+ w* R' h  t, s: p14
15
16
17
3 T5 i" F; f6 K! k18
19
0 C: s6 J- ^8 U$ _4 i- P% A) H20
. B8 I) {5 ]& o. a: f( V21
! _0 r' y$ G+ V( {/ x' @  n22
23
24
# d1 \7 w# L3 w  p) c  Q* E, w0 b25
26
( T8 n4 P7 k( p7 A6 Z27
28
* S) C" E" f! F6 \1 b29
: A4 H) p9 t$ B; `# g" x) I30
0 l$ q8 _* H) a* W: o  T31
) W. b; v" `" q% ~; R5 B* w, `32
! f& R( e, I9 c33
5 |! d+ T/ _4 W% v6 {+ \34
35
36
1 o5 Z7 w' s4 c37
9 t& C+ |1 d) G4 F38
* Q. V7 s0 G% _7 Q8 u" k& ]39
6 k$ X7 h6 ]+ O" Y* m0 c40
41
42
7 m- H, T1 W8 r% s5 X8 g43
44
45
- B' c4 Q9 f4 g46
47
3 c  [2 b. m/ ^+ b# K9 `: D# F* F% o48
0 ?+ U& N* B$ U( `# S  V49
" M) v. S0 G* l9 \50
# I9 U9 N( E( }" `51
7 `$ F5 k$ J' l5 `" M: g52
% Q6 D3 h/ s' J" O' `53
54
* R* E1 ^' _/ {( y2 |55
56
! I8 n+ K( u! Y* \7 C& |57
58
59
60
0 q) L" N4 G8 F  I1 y% ^5 u8 |61
' j1 J$ p7 T% S62
启动数字动效
- ?  B3 ]# f2 A+ r# J& `
const startCount = () => {
  state.localStart = props.start
2 |7 Q$ t7 C9 k  v% F7 i$ J! m2 P2 K  state.startTime = null
7 Y, }' u8 Q7 k8 r  s" B! Z  state.localDuration = props.duration
  state.paused = false
# @  f, |, n) Y% {  state.rAF = requestAnimationFrame(count)
}
" t8 [+ T$ X% s; s3 W( L1 Z# e1
* n) T7 \& x" O# V3 ?8 E, u: Z2
6 t8 v( R1 C7 m4 f3
4
( V1 G5 c4 c% N+ t  H( U  Z$ L5
* e. S. J5 T8 s- Q1 a' S2 K9 V6
5 L. y' |4 S" H+ ^7
4 R2 r0 q9 j  t1 n; L核心函数，对数字进行转动
+ T  o+ W: d$ n( w+ k- p& W
  if (!state.startTime) state.startTime = timestamp
* K1 Z3 i" E  @4 g  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
) ^. H( {! L' A" U0 n  // 是否使用速度变化曲线
  if (props.useEasing) {
- _/ O. ~9 V$ b9 J; `    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
2 |; x3 O' P5 n  r* D      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
8 t) [0 Z$ i: F! G' Y    }
. g6 Q/ ]% V7 I$ P" `6 z; G0 ]. X  } else {
7 z4 N& P# |' u. h$ z    if (stopCount.value) {
& ], _2 V# J0 C# K' A' Q      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
8 F: k  u8 b" P; B    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
( X9 O0 O1 O& {( [' e3 A  if (stopCount.value) {
3 c& O2 Q% e6 {( q    state.printVal = state.printVal < props.end ? props.end : state.printVal
# }4 W: {, I! l, Q" z' |  } else {
5 C  P' Z8 q" W; M. g    state.printVal = state.printVal > props.end ? props.end : state.printVal
0 [' P0 ]% ^! N' U) ?+ U  }

  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
9 _- M3 d! y9 x! q) `$ r7 J    state.rAF = requestAnimationFrame(count)
. e% f5 v$ T' Z) \1 X% V" u  } else {
    emits('callback')
  }
  L' y. h# N) m2 u' a}


// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
/ c# {- ~% g3 L# L7 O, r  const x = val.split('.')
5 p2 k1 Z4 t0 A9 x7 B- v  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
. X+ p' R7 Q6 A" C3 e' H  return props.prefix + x1 + x2 + props.suffix
}

1
2 P: [0 u6 E) l& B% M2
+ a( x3 n2 h/ F+ E+ c9 u2 e3
4
5 m, M; a1 S9 _! ~8 h1 K4 q* X2 Y5
5 T1 u% v9 g, l' @$ v0 |6
7
8
/ G& F2 C2 W# B6 A  q! U9
' f1 @  t- _3 H& U! f9 m" {2 M10
11
( N4 h# o. D: u5 m12
13
14
% }& V9 c, g7 K5 h5 e& S15
1 `+ W8 K% f8 F- s16
17
% n1 r: w1 [6 V* }, j; S; ~18
7 Y# `2 j9 ~) h) T3 D19
4 [. U7 S/ u" I% `0 N20
21
! c, L7 g7 c+ V; Y# [" U+ \1 r22
& L8 K7 @& T7 @+ i23
7 b* H; }' H0 e" G$ r9 I4 N5 F7 \4 @24
1 r: W2 o" h( N8 V& ]/ ^25
- c: h5 I  z2 U3 y" w26
: S0 V6 c6 Q/ s27
28
$ N* Q+ H* C' |8 x29
30
31
32
, ^* c9 G5 u( y% A33
34
' `3 r7 t, O) C# L35
36
. S  K3 ^" ~0 c, I37
& ?$ B' K" Z" ?9 ]9 B! ^- Q! M; W/ }& j38
3 i: p) W+ J! T- i39
40
41
4 J! {0 m' O7 F% q8 k- `42
43
) o+ w0 K, ^% k, T44
! K, [8 f; h7 C. [; \45
46
' F. |4 T( f+ a% ^47
' [  j4 `; w7 Z: y48
9 \# Q& D$ h/ ]  M* ]& e% ]% b取消动效
. m* ~! Z: p# y/ ^
3 [6 B' [6 ?/ w$ j// 组件销毁时取消动画
6 z/ w. Y) ~1 i9 c* honUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
1
2
3
4
完整代码
! K6 p+ z' _8 v7 ?
<template>
' W& l! V6 ?) i+ w  {{ state.displayValue }}
" w0 j7 ]/ j# k# Q7 Y& ]</template>
4 _2 b/ |% u: ^* q# R1 @
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
& X1 O; G: N! {6 O" d7 uconst props = defineProps({
  start: {
    type: Number,
    required: false,
    default: 0
* X: S6 ~  ^' s6 r2 n$ J* b  },
( i/ A' A" V3 {7 d  i  end: {
7 P2 Y% @0 n8 @/ h. {    type: Number,
* |- q9 l5 K( K5 x    required: false,
" d5 _! h) B5 q6 w. m4 f# H) u( Q    default: 0
  },
  duration: {
    type: Number,
% a  v, E. n& ]# j, Y: w6 c    required: false,
    default: 5000
  },
  autoPlay: {
, }' x$ ~: g  k$ J2 J5 a, K+ o- W    type: Boolean,
    required: false,
- L& }4 G! M% K4 [3 o( N    default: true
3 e9 B5 e$ Z: z7 M' t4 ?  },
  decimals: {
    type: Number,
    required: false,
    default: 0,
7 R% P9 ~2 U9 P, ?1 C6 y5 m    validator (value) {
, z5 t: ?% K+ S' A2 |# q. i      return value >= 0
- G8 ~% |2 B$ i# d    }
  },
' _8 ^* g# }* E/ I& C  ~4 R  decimal: {
- P1 U1 a7 m/ u& H2 B    type: String,
    required: false,
    default: '.'
  },
  separator: {
5 G; R# ~, ^% m0 l( E! T    type: String,
" }0 S; O+ G1 I    required: false,
$ B/ \( M9 g7 n1 b) z. I    default: ','
& R  B8 F6 |! C* `, U  },
  prefix: {
( ^+ N/ J" T+ ?    type: String,
    required: false,
    default: ''
  },
  suffix: {
    type: String,
: I2 S4 P3 V0 G0 V! M( P    required: false,
    default: ''
  },
7 ]2 P6 Z3 l' T  useEasing: {
    type: Boolean,
    required: false,
    default: true
  },
  easingFn: {
4 f; j8 E7 `+ e' a  o    type: Function,
    default(t, b, c, d) {
' S" l6 g/ b5 C6 ]      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
. z# f2 g: z9 P* Y! V' `  k    }
  }
})

* i, J* Q& |; n: mconst isNumber = (val) => {
. m1 K4 J% G# O. r+ f9 L  return !isNaN(parseFloat(val))
& {3 o+ x) V9 C& p6 G. s}
' O/ F+ I! z5 A
: K3 B1 G: r/ F- ]4 m. J# ^1 m" j( ]// 格式化数据，返回想要展示的数据格式
2 k" P, ^/ O1 ~const formatNumber = (val) => {
  val = val.toFixed(props.default)
$ U3 o/ `% P. b% s$ M, M* e  val += ''
  const x = val.split('.')
2 ?1 D$ D6 V% t9 t5 j% H  let x1 = x[0]
2 f. ]% B* o# `/ l8 J  const x2 = x.length > 1 ? props.decimal + x[1] : ''
) h% a8 u& Z9 ?/ ~  const rgx = /(\d+)(\d{3})/
/ l9 G0 E( G. z( ~9 b6 _  if (props.separator && !isNumber(props.separator)) {
5 B/ ?& D- i" m+ h( H: r' |) {    while (rgx.test(x1)) {
- o) L8 X- W; B& }7 ?      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
& x6 P7 W! [7 o9 F& Q5 m* V. u, a* l    }
0 p' w  X' C- K. P' F) }) W8 r  }
: i; y% L- v2 o  return props.prefix + x1 + x2 + props.suffix
}

2 j+ a$ D1 V. J5 Y# N// 相当于vue2中的data中所定义的变量部分
const state = reactive({
( @% E9 }! `/ ?. u" ~; V$ C. [  localStart: props.start,
$ s, O0 O, Y" J4 e3 W$ l+ c  Y7 i  displayValue: formatNumber(props.start),
  printVal: null,
5 Y* g! a, @9 O# `- e  paused: false,
0 b/ J% s+ h" V% _  localDuration: props.duration,
  startTime: null,
. a2 F6 r4 z: |) v8 L: w6 f  timestamp: null,
$ M5 Y: u) E+ @3 P* a  remaining: null,
  rAF: null
})

+ D8 q8 s0 c+ p7 x* O7 a4 p2 f// 定义一个计算属性，当开始数字大于结束数字时返回true
+ E. j& ~! c% R, b8 Pconst stopCount = computed(() => {
  return props.start > props.end
5 t& j% L6 H2 a5 V$ U8 L6 X  q})
, z: v3 d! I1 S6 }$ {// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
" Q" b9 h$ s9 u- u/ O, ]const emits = defineEmits(['onMountedcallback', 'callback'])
  E& K' V9 C, U) }
, l/ a' {* I8 hconst startCount = () => {
& J# N3 h. Q: ]  W. B) Y, x  state.localStart = props.start
  state.startTime = null
. q' I% `# M" u: ^3 j" c. u5 A: ?: M  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
, z: F0 ]' P% p* Y: q: N
watch(() => props.start, () => {
4 f) `. K, z# y; Q  if (props.autoPlay) {
    startCount()
  }
( k! F% `$ D* ]5 B})
- ?, h4 z& D3 {$ j1 J. u
9 i% K: h+ \. Z$ f$ Ywatch(() => props.end, () => {
/ W, v" S; x# C6 M& w  ?% C7 Q  if (props.autoPlay) {
% `' j/ M- ]. p9 P    startCount()
  }
})
// dom挂在完成后执行一些操作
onMounted(() => {
) O3 Y. E$ A9 J8 k* b  if (props.autoPlay) {
    startCount()
! G$ e/ r5 f+ x! ?! V3 e: b( ?, a  }
2 ~7 r6 G& ]: q9 o+ ]0 Q  emits('onMountedcallback')
})
0 K/ D0 T# N( j; h. l2 L: W6 B// 暂停计数
3 \( H8 L  F, y* o4 e) Lconst pause = () => {
  cancelAnimationFrame(state.rAF)
}
4 R' j. p  E$ L+ W5 p* P" H// 恢复计数
const resume = () => {
  state.startTime = null
- k. e# S7 Q; z1 q8 ~  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
}

const pauseResume = () => {
, ^: E" d/ A' `8 L9 \$ B+ W/ P  if (state.paused) {
    resume()
& h& c$ v. M% _) v    state.paused = false
; }! w0 S" Y7 N; r' }) Z  } else {
) d* e% j9 d. a% v  u    pause()
! E+ ]  B1 c  J+ I9 Q2 G0 ]    state.paused = true
! I  E4 U0 C9 o5 W8 P# T  }
}

" {" ~% F, l: k( v( Dconst reset = () => {
" h' Q0 G/ W9 f* E0 i! T  C% U  state.startTime = null
  cancelAnimationFrame(state.rAF)
+ U7 q' V7 H  `  H( C) v$ Q  state.displayValue = formatNumber(props.start)
}

const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
4 x  i  M( o# C* \8 G$ U  state.timestamp = timestamp
7 [  W5 t% }0 P# u+ ]- z- s$ R  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
# B) p1 b% ~; W7 `- `9 |' D* Z  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
# ]# }& J3 ^: G    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
5 y7 I8 P9 I# U) h& P# t    }
7 O4 i* {# I' D6 k, E. n6 n, t9 p  } 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)
    }
  }
  if (stopCount.value) {
) Y8 p  K) H- p6 C4 E) ~& n    state.printVal = state.printVal < props.end ? props.end : state.printVal
5 ^2 S# E( y/ ~0 j7 d& z5 L  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
) G9 O3 E# w, _1 j! E' Y
  state.displayValue = formatNumber(state.printVal)
- L1 F2 q9 p3 p8 v& {/ o# i) k* p  if (progress < state.localDuration) {
" Y' G7 @$ u/ W" n1 b$ T; t    state.rAF = requestAnimationFrame(count)
: V: Z3 k) k9 b/ z6 B# X5 R8 _5 ~  } else {
    emits('callback')
  }
3 B9 Z& `/ B; @. F}
// 组件销毁时取消动画
onUnmounted(() => {
# `7 w. N: Q+ O& R  cancelAnimationFrame(state.rAF)
" j$ g) Z: O$ b' `) A6 B})
</script>

" F4 S9 L. t: \$ V9 o  w1
2
# p1 L% c, Y2 z3
4
5
( f* {9 L3 C! p3 i8 s% @- D  F6
$ Q( r- Z7 |. H4 l7
8
6 F; c( {" H$ S) n+ t6 |9
10
11
12
  C2 J/ p: ]9 `4 J5 ?9 O13
14
15
16
17
18
/ _9 [. g' W3 A" m19
$ e- g' b4 L2 G* |20
$ @2 e& a- S8 _4 I0 m21
% \5 l; X4 r1 |# X! `  j6 d: b+ e22
  a6 \2 n6 g/ a9 ]: c5 @23
24
25
' }! q: D! R( ]2 u/ s; o# G26
27
" M+ s+ B5 d7 u4 ^* I# G28
29
30
# q4 e0 g6 h- i" {$ P31
3 ]2 O  B8 N: g32
33
8 r! Y) m5 q/ G* f& W34
35
36
  {) k* F$ [% R7 `( s5 n+ @: C, ]37
38
39
- ~, p! |# C3 X40
2 O% i+ m% {* d+ w, H" U6 c41
42
43
* {  I4 E8 S& f: W44
45
/ N6 K- \9 F0 l- K+ ]* t# Q46
47
* y0 p5 n* ]# g: Y. i2 k48
49
50
: h) K$ a; Z3 h51
% ]9 l9 A. n' i. G( S52
53
54
55
5 _2 y3 t1 K* N. b) A56
57
58
% n7 e1 N2 V" U1 x1 i0 X59
60
6 n9 G2 f8 r+ O2 i) g- `61
62
1 o+ ]$ W& R! Y6 N7 A63
64
1 @  u6 B1 C6 g; B* S65
; U- j& V# e% L' @) t66
/ @# ?4 q- `7 p& u) j( x$ z* |67
68
+ ]! M; G5 c6 _$ ]% K# p0 W' U/ J69
70
71
0 V; [+ B3 @; b6 ?1 x72
, T4 T8 T0 r0 `" p" x+ A! I# h1 K73
74
75
76
* d5 {. m; Q, g- u77
78
79
6 r' n1 l  _6 A( I80
81
, T. _, D# {6 C82
' E$ G5 M/ u; o: Q: }% t83
8 q, V- m7 `" Z' z) |84
5 X3 I+ K& K+ `% S85
86
87
( S- R% _# `- t2 l5 ^' J. H88
5 f+ n$ E0 z2 S( w89
90
* r: I& ~% D3 f/ L8 E$ k91
9 \6 Q# n2 M8 x0 U! {5 }+ ^2 K7 `92
  R  K. D5 [; P) h6 l- L) c8 y93
94
7 |! C6 a$ g5 g6 F. l8 L0 a) I95
; n" B1 ]+ i+ @' w96
* g! O# L8 p1 A, d) }, V97
, `* i8 `1 u. ?. v% w  E98
99
100
101
102
3 @$ q1 R' _6 E& p103
7 j6 w0 h1 D; D; i  T6 m104
105
106
107
. ?# J5 c6 R: x; b+ {% I108
0 D3 S' s, Z' U$ ?* i109
110
111
' i" I* H0 \6 \112
4 T4 Z% d- G* [7 O/ T7 A5 l# \0 J1 X113
114
. L+ e* Y2 S0 a6 [$ o: j2 W115
116
! X- _) x5 F% O( T0 t9 t6 C117
) t. f3 x3 _& N3 p0 Y7 _) Y118
119
4 f1 M0 r1 h8 o4 P' h8 C120
121
" t: [) z! e9 }, Q3 K+ _8 Q6 v122
2 Q# B$ E7 I! R. W( G123
124
125
4 r6 w0 J  T6 ?126
127
128
8 d! u8 {1 P# l( }) m& a9 Y3 n129
130
& r3 N( y: E, i) E: ^3 A3 ^131
132
133
" l( O: T. h7 j134
) ~. t( W; o- h3 ]135
136
137
138
139
& ?8 f8 q% m3 [5 E" _: l140
$ S* s, X* c/ x141
142
143
# ]0 G, b" O$ q1 R2 R2 U% z1 a144
145
146
( ?7 o' C6 Q5 v, V. x9 z147
+ @6 I/ i8 Y6 \  m9 c& l, `148
; k- [3 ]; E" Q149
  E0 R' M: b: q; q, k, E150
: p6 \8 V6 J/ w& i1 \4 v$ k1 n' _" B151
152
6 v3 G( z* q- [8 u) l( t153
: U/ n% n8 {5 E0 ^4 D, l154
( i; f5 V# C/ U5 ]& l& o1 h' J155
( l3 L9 p+ |; ^3 ^156
2 j( [5 }/ ~5 p9 f9 T157
; Z! g3 E* @) n1 W; P158
159
160
+ G( A( z0 n" L  ^+ H4 _161
( q/ z  \9 w! z# t" d! r+ F162
# d+ b* m8 N: a' ?163
164
165
; k$ i9 y$ R, z5 i166
167
. ^$ \) r  j( i" d" }/ h4 l168
; t  t. e7 x4 t169
170
# N# L2 T1 V% w2 k5 ~. A171
172
173
174
( N$ U$ O; w, s+ p175
  P, E' z  X& ~176
) K6 a& C0 }* b' M7 x177
3 `3 ^- L2 C  P2 O/ e  |. g+ C178
179
5 o! }: Y; I2 {! Z" v2 N9 T8 Z180
181
182
) q+ g& @) c' H' \+ X  N$ E# Y183
184
185
186
, r# R$ c+ L. }. r- x2 [! r+ ?% l5 _/ e# Q7 }187
! i$ O5 P" ?3 |, K$ {188
189
190
" B4 K1 r& S0 k# F9 h# _1 N% v% `191
192
193
; G: c; P6 h2 a194
195
196
197
198
' n) I# a4 C0 p! |+ K, K/ E199
200
4 Q6 _1 d9 K0 y' q8 q/ M201
202
: y* ]5 `, @/ w1 r5 {. T9 L总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
; X# C3 v& g. p+ o6 a) {2 ]8 Q后续的线上demo演示会放在
4 y+ c7 y8 g+ t' _! v! {) wdemo演示
- j1 i; m( ]) r' k完整代码会放在
9 `# n3 n; ~) z9 s个人主页
4 }! h$ s6 ^3 Q7 E/ X
希望对vue开发者有所帮助~
* ~# X0 r8 @) T) x9 B3 M3 `/ \) i
个人简介：承吾
, \! [. h. h+ J- W工作年限：5年前端
3 S- p( {: Z& H& ?4 B" x% O" K地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
2 G& m% K% t) C' j; {- O/ N8 D


; `3 x! b1 g  g/ x2 x# s& ~* u
————————————————
  N1 {+ @0 `: _$ Q0 H版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847