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

杨利霞

vue3 | 数据可视化实现数字滚动特效
0 }- Z6 @' K, M  ]: h5 [; J
前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
  T% i( D5 f' y# |, s* [TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
( @! m8 L# ^  F" ~& @7 i1 J7 i. g$ S% d

1 u" @: G' J& {* u9 r2 r思路
/ Z, z2 H8 l* M. T) p使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
! c$ R  p7 {3 N: y* C4 |( Z
文件目录
- k$ h" ~3 {/ [0 K7 X% u/ f1 {
9 O+ [+ l4 ]& P- X
# g1 ]* V% q* Z使用示例
<CountTo
2 T) R: Q/ v  s: _3 I* X+ J; [% Q$ I :start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
' l! [( h5 R" Q* y# S :duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
1 i7 ]' n, \, ^4 ~+ C />
1
3 W; H! T4 `5 o; }" t) H2
% M' q6 [& C) {5 n' `  N( g3
4
8 t; w3 z8 P( l! Z1 k9 g' p' v! C+ p5
6
7
8
# v" p8 }9 {9 S2 H5 F, |入口文件index.js
" u  w0 a3 z1 R, S4 B, q( l6 b
const UILib = {
  install(Vue) {
5 u6 q5 E- U7 w0 u+ r2 k- r    Vue.component('CountTo', CountTo)
  }
}
8 |9 v- m% m8 }5 w( I! `& N* p
export default UILib
3 V( U  g" E; ]# s8 }
/ c* J* F; H& Z1
8 i) l" c  L) H2
4 q1 g; ^! n. u3 B5 O) A" D' e3
3 L( a& P1 a2 L% m6 Z4
5
. Y2 W: E2 Z  d! l6
7
8
9
main.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
1
; o' d5 k0 e: w; a  n2
* d. X, k1 }  Y! mrequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
: E( Z$ O/ n+ a如果是浏览器判断浏览器内核类型
" m6 V4 C$ [, x2 n; k如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
1 ]9 _9 `' ]/ A7 C各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
3 a0 [7 d1 K7 {1 P- M增加各个浏览器前缀：  
$ W( c) q0 @8 e4 Slet prefix;
2 Y2 ~6 M6 ^2 vlet requestAnimationFrame;
1 ]% H9 `: J# `5 g* I; |6 [. }let cancelAnimationFrame;
  `/ ^% E8 A  B2 n// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
6 S0 ^  `; @, N2 f6 |  \        prefix = prefixes
* e' x2 m6 ^+ P4 X) D/ L) W        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

) E% ~# E4 n9 ~" V9 Y  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
+ {3 v2 S4 A0 f, @* R    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
2 |, a" C$ N' ?            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
; u) C* j9 A2 E" ]+ j( ^: E1 m            lastTime = currTime + timeToCall
+ |7 i- j$ |  h. |            return id
) C7 x6 ^$ z! S% x" `+ ?        }
3 z. p% \8 J( V. |& ^
        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
- N4 n  |, t9 v* f        }
    }

2 ~2 v% b& `# U" d# W1
4 {5 O. h6 P4 m' d7 A6 F2
3
4
5
6
# I) F1 y+ Z% _% s# C; D- Z' k, V7
6 u: Z6 I( x) e, e1 A' \( ?8
' C/ M1 e5 p; p  U5 s  V  O8 j9
7 c0 u5 R) Q% _- f2 {) W10
2 o2 w) A3 b! Z  o( Y2 t+ z4 q11
, n5 Q9 X6 C- V2 w( x0 h12
13
14
15
16
( _- ~9 Q" @& E  e$ j, \17
, L* K, C  M5 C0 i* `4 P18
19
20
3 Q  \1 c! j" a6 b/ N% U7 X5 @% S21
8 b: C5 l2 {; W/ |: y; V& A6 B22
% i2 R1 W0 Y2 e: D6 \: ~23
24
* a% ?, D. r) S, l6 R25
26
) _4 Z% J' U- Q! `# I2 P3 c27
28
29
30
  B7 B  o2 J/ r" z6 K& g* n31
32
完整代码：
  O5 v. b/ z  erequestAnimationFrame.js
7 g; f6 Q7 Q! `
2 S: j( ~) }; C7 _; K, I& V2 ulet lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
. H8 U7 d. K- y: X: y- D, n
let requestAnimationFrame
, c8 r' V1 S2 M/ v( l; L4 olet cancelAnimationFrame

& N9 `% @+ q4 Y) z2 L// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
; }0 X% |. y/ e1 U; Y* S. V6 {        return
# S+ z; {# a* C9 a  J- c! H: r$ P    }
    cancelAnimationFrame = function () {
        return
    }
( q3 @2 r+ T; d} else {
1 Z& _" b5 Q! H    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
7 [* }! ]+ _, b9 b6 `7 J9 t    let prefix
9 }+ |6 Q  R: d. C    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
/ o+ G' z' i" ?* U        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
# G3 d+ g( E+ D5 W/ B+ C8 i  |9 o1 M        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
" g  q7 S4 t6 R4 o# f4 l# j
1 s5 T- M( p- F) C    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
- Y0 O4 U  @0 H2 Z4 L0 B        requestAnimationFrame = function (callback) {
: Y9 q! E* Z$ Y9 e8 P4 U# z            const currTime = new Date().getTime()
+ h- S+ B, o- \* t* w& G6 f4 X            // 为了使setTimteout的尽可能的接近每秒60帧的效果
7 d/ }; O" {. ^, L% N            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
5 d/ E9 E) Z, f, `                callback(currTime + timeToCall)
            }, timeToCall)
3 W9 b3 G# e. A* ~# V            lastTime = currTime + timeToCall
& `; h. f6 R5 Y6 m            return id
( z+ y4 m. }) p        }
6 P3 B9 r9 h) n7 F" g3 H& y
        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
) M$ p4 ^( l% `5 O$ [8 y% Y. }    }
# E3 g, Y. L' N, \8 V; L% o# X}
8 A9 S% P- K/ u2 I5 r3 X. F% x& v- C
export { requestAnimationFrame, cancelAnimationFrame }


" Q4 d# H( R+ B) o/ s& Y1
$ p% j- Q2 n5 }2
3
4
5
6
7
8
! N5 i2 H/ Q9 Z0 {9
10
8 [6 i2 y$ f  B# y7 j0 V: w# ^; t11
12
7 ^  Q; y+ P- e, }- m8 @! Z3 E6 w- l13
14
15
16
17
18
5 I  }& {  N3 x* T9 Q/ k% P6 V19
20
21
22
23
2 n) @! a* g+ T+ J0 v2 X( y24
25
- o( }/ L) O4 H3 y! {+ w26
+ Q* `4 h  }4 U; }* K  i) h) \27
, |6 m2 Z" K) t, |28
29
5 \0 @5 |. Z. h4 x/ {30
31
% X/ J* l1 h0 V0 O' V3 q+ E32
0 F! u" I. {9 S6 d- ^33
3 b( K' A, N% n3 f34
1 N+ @0 z9 B$ t& A; k. _$ o! p35
2 N' K  n+ p; x9 A36
8 p# A+ _- d1 c# h4 A6 y37
38
39
6 j4 l$ D4 b; r0 C6 \3 w! _40
41
- s, V% o- U8 J4 R- b42
2 C. h- }- Y, B7 T9 b4 v) s+ |4 A43
# K$ Q/ V8 u1 B: l6 ?44
( @/ |1 Y$ {+ {45
46
47
48
CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
; Y7 Y$ A( f1 r& I9 \9 ]- M' `0 _& b
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
. y, j3 j9 Y$ J) H6 w需要接受的参数：

. r) G( T3 X9 K* a' v" _. ]; Gconst props = defineProps({
  start: {
% f3 V" m0 T1 s* n0 q6 q  m    type: Number,
$ j" ]( i" s! K/ G6 u# B    required: false,
# k% @+ l# F$ a+ \; {4 q    default: 0
  },
1 b- w" b3 S7 R$ k) [  end: {
( ~& r$ J, A8 X+ C! G; g% v    type: Number,
    required: false,
2 @  e' ~$ r: ~- N/ _/ T. _    default: 0
  },
; p4 ?- X# P: \' V  duration: {
    type: Number,
    required: false,
7 C( G7 F4 l0 Q; ]: {( Z& E    default: 5000
0 t, R, E* l6 h5 m4 |  },
  autoPlay: {
    type: Boolean,
    required: false,
    default: true
- \' B7 j9 e2 O  },
& w6 P% M9 r* w( Y; J* k. P  decimals: {
% n  A4 g6 T# ]0 f    type: Number,
9 Z. c$ n0 u8 A) d    required: false,
. H8 D% N  m" g    default: 0,
7 p! W) L3 B9 X$ p9 S* I! k    validator (value) {
      return value >= 0
    }
' }7 s8 a2 {( s  e+ H. R3 L6 D  },
) s- F/ C2 u8 _1 c7 k. K2 w  decimal: {
    type: String,
    required: false,
    default: '.'
  },
  separator: {
    type: String,
    required: false,
% r; e8 ~5 f2 z9 z9 Z1 v5 Z    default: ','
' s5 ?3 A8 |. I* k4 y: {+ D  },
  prefix: {
    type: String,
    required: false,
    default: ''
' }0 h2 m8 x6 Z  },
6 d. S2 K$ `* D: z9 n* o2 D6 u  suffix: {
% U* }+ ]4 I/ a0 z7 I5 f    type: String,
  Z% S% l* T- ^' E! q    required: false,
4 o" B' @" l* ^$ J4 l* Q% k# ?* ~    default: ''
  },
- f+ g6 |- U: Z1 A5 L# P/ d% {9 S  useEasing: {
% c' M8 i& _9 u: u. h    type: Boolean,
3 D2 W, j8 Z! ]( v2 K    required: false,
    default: true
. R  w. @9 J6 r6 x9 m% F( A8 r! L6 p  },
( Y+ Z3 f  i5 ~  easingFn: {
) M) y4 q# H7 B8 J% x    type: Function,
) I1 ^5 u% `& j2 Y( U    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
})
% U6 t( P7 H1 c6 i& N. t8 G

1
6 z' H# D/ y- B, a1 T2
3
' g2 u) `! t% S# t* h3 H( i4
5
6
  }" t) g' [- x7
8
9
7 W% [" x  T- n% j, `  p- O3 Q10
11
12
$ }2 }! _* v0 P- J13
14
# F+ ?" J' ]) V# t- @6 D& r. _( u15
, q" _" J8 O8 e/ b. l16
17
18
19
7 J, u. b3 b  E3 F% d20
+ u! ]2 W0 Q7 q2 g$ c% t0 T2 G21
22
23
5 C! d  F5 b; J. t6 f4 l24
- P/ \9 ~0 L/ H' y4 E8 }  p25
; J0 ~. U7 x2 F/ A& @2 H4 E4 m; H26
27
28
29
- }% d5 [& N$ H6 d. h8 W30
4 z# }; U6 h1 b" ?) t( z" K* X31
32
6 D. H2 }$ H1 X2 Q9 Y. \6 M( f' x33
34
0 m/ f; m3 d* c9 D5 u! l# L9 I35
# r5 H' h9 f2 c36
37
38
: [! O9 X! t5 s: N% ]39
7 ]& o) e2 |+ K2 B' M6 J1 `1 j40
# M: i; D8 n3 F2 C41
% I( a  n5 S& D* w8 d  H/ q8 f- H42
43
) R, P& }7 Q% e$ a) Q! Z8 `+ [44
1 r( Y5 K1 W/ u# t# Y45
46
47
48
49
50
, l5 [5 T5 E" \3 c) `51
  q' a9 ?' p3 V( l5 e1 [52
  a+ A" R& Q3 C9 H# }  c3 f8 R53
54
55
3 y) r; y) {: w! F  a8 ^2 L56
& r, ?* L8 I3 `57
4 U5 z3 u) w1 ?# D& P2 v0 p58
1 h7 t6 ~' A* ]7 p8 T: {59
60
- ^; ]- p7 O9 |' B61
62
启动数字动效

const startCount = () => {
1 v2 p! H( m/ M, Q, B0 E  state.localStart = props.start
  state.startTime = null
' j0 J8 }/ `. X8 y" S# ~) e' v5 q  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
  N( T( J$ r$ n8 m2 F, ]}
0 X5 B' U) J3 N  B. h( O+ s( Q1
2
3
4
5 L% D1 x$ r; _2 R/ U7 h. M5
6
7
& F7 u8 y% W, q8 r6 s核心函数，对数字进行转动
! S* R' a8 G8 I
  if (!state.startTime) state.startTime = timestamp
8 c, c. C! c! q  P9 I1 w% Y  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
* j; G1 n3 g3 J- e* }4 N+ ]      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
1 u8 R2 w9 w  A      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
5 M% l, V0 V1 W; u' k  } else {
. L3 ~! G- w7 r/ ^, Z8 q    if (stopCount.value) {
9 k' ]+ x) z  Z* x3 f% U      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
! t6 I8 p" S$ \- C( w  }
, |4 e* d2 D5 W) ]4 K, w. e  if (stopCount.value) {
, ]. X$ ?$ C# K( d" H% P    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
0 H, A" N$ X$ ~3 r6 \* ~
+ M) g! P% S6 p. T  Y3 c- ^2 S  state.displayValue = formatNumber(state.printVal)
) M/ |" O8 |8 b6 s- }  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
' t. y# ?) e% C- a3 X6 a    emits('callback')
  }
}
" ^  C, \; P8 {
* ~# H4 Y0 v: g3 a( v
! d1 c. Z( }) J* J// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
) W/ _! N$ q3 {$ L/ ?+ u  val = val.toFixed(props.default)
+ d* z, N: o9 A+ v( j' W' E7 D  val += ''
2 z% m; W5 C" r" E% l  R9 l  const x = val.split('.')
' e8 q+ T8 _  @/ i  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
' u; W" {: s& l    while (rgx.test(x1)) {
8 Y- ]8 d1 _+ X      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
3 @- @; C/ G1 |0 y    }
  }
  return props.prefix + x1 + x2 + props.suffix
}

* Q/ V9 Z; P  |, w5 }1
! G! i0 c9 r. F! I" a! J* _2
3
4
% `" @' N( u/ ^3 [8 K5
9 x- Y8 i. e+ a! S0 r' _# P* n6
7
8
- W0 C: `2 d3 l( k, B; B9 l9
( B1 N  e. R5 H2 e2 p10
8 [' F  m9 D: U  M" i11
12
  _) I1 e! d7 R8 s- T13
5 `' |& a# ]/ k: U14
5 Z7 I5 d1 S7 O+ P* z* I15
0 I) z5 q6 W2 F2 V$ B16
17
( q# O' S: Z4 w18
19
9 Q. u$ j( {6 x20
& Y6 c. O- p( J9 K4 q: F8 `- Q; f  X4 w21
6 n1 Z9 q, ~) ^% U0 ?3 j22
23
24
25
26
, M4 X8 I0 Z9 {+ }/ N/ d+ _27
28
29
30
) C* m6 \# ]2 w) s9 D: }31
32
33
' Y# G/ W3 J1 ~0 K! m34
35
3 `. W1 c9 ^; ~36
* Q% i! X5 i+ T$ o37
38
39
40
8 k/ l' r6 n; O5 c8 s41
- @! ?7 @. g) S0 N2 N$ L42
43
3 ?" o5 m9 A3 N( T/ `44
45
46
' O9 U6 r+ h  I* W: _2 y47
48
6 M! V1 A& A! G; F$ Z$ c取消动效
- ^7 |! k/ m9 y; m4 E- y
5 h$ ?, V( y, \1 [" d* G// 组件销毁时取消动画
onUnmounted(() => {
2 f- H* U( z: Z% k8 i4 x  cancelAnimationFrame(state.rAF)
})
* g6 C' {; Y7 u( Y; o1
2 l. }) \2 J# I7 i( o5 t, ^2
3
4
完整代码
# Q/ K$ l7 L5 v1 r$ g) T; `
! t8 ?: q9 h! g) z. T<template>
; }7 @1 Z* m7 t2 c" }8 o: d1 Y  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
% ?1 G' g4 I8 t$ Z6 wimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
( i% I0 G7 Q2 n) y1 x- Vimport { watch, computed } from 'vue';
  p3 d/ z8 g; @; rimport { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
" @' s* t- Z8 e; @3 \: }// 定义父组件传递的参数
const props = defineProps({
# \1 ?! n7 l" W; Q  start: {
    type: Number,
    required: false,
5 T: [% c% G- |) c, G& Q    default: 0
  },
( B4 {4 ?: H. E5 S& s8 v  end: {
    type: Number,
+ D; R+ \( j. F0 k4 G3 @5 S- p    required: false,
, h$ [: E! _! Z- D4 M5 N+ f5 z    default: 0
  },
  duration: {
    type: Number,
    required: false,
    default: 5000
  },
; ~, v8 y4 s2 P  autoPlay: {
% Y0 A9 Q- e$ L# r" c    type: Boolean,
    required: false,
    default: true
8 ?. R5 {5 m1 Z- D8 p4 J* W  },
  decimals: {
: B8 \: {# S/ X, _" S# D# c. `    type: Number,
    required: false,
    default: 0,
9 ~: e' n% Y2 _5 G    validator (value) {
      return value >= 0
. X1 o2 _, w5 @' B9 _/ l    }
, N7 Y) d$ Z+ p  },
  decimal: {
    type: String,
    required: false,
- d8 z2 _, }2 u" y. M6 v( F" G; C    default: '.'
  },
1 |. ~: ~( F. O2 @) b. v  I* n' z  separator: {
$ W, x6 p* _) @, i    type: String,
    required: false,
3 F" {3 ^# Y: r: a& m# v    default: ','
: E8 K- F6 n; O: e9 }& c  },
  prefix: {
    type: String,
# g6 B8 T% l( r; \! j" ]    required: false,
    default: ''
  },
  suffix: {
* t$ `/ y+ Z4 |8 R    type: String,
6 ]& }% \* y( {8 t4 |; e' @    required: false,
    default: ''
( l! u8 R/ O$ \% ]  },
6 g* D. I# l& b2 L  useEasing: {
/ H% F" S, X9 }( j: [: {; V( n    type: Boolean,
% ?. r. `/ q5 G3 C; c. u    required: false,
    default: true
9 B! E+ c3 h, I7 U1 J+ _  },
  easingFn: {
- ]$ k! U" i5 Y7 m  c) @0 p1 E* w    type: Function,
4 o( M. \$ ]1 n$ f- C4 W    default(t, b, c, d) {
2 ^! }- J- b' \( X0 I! K- V      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
" k9 G9 Z! Z7 B5 {- y- p  }
})
5 Q; L% z7 p% d; k0 w# d3 t
* e- D" r/ ?% I. X$ q& Aconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
}

// 格式化数据，返回想要展示的数据格式
$ x! f0 O3 K" Mconst formatNumber = (val) => {
  val = val.toFixed(props.default)
; [! h: g; G$ O9 `$ `  val += ''
0 _; w) a  H0 F% n  const x = val.split('.')
3 J( ]3 Y7 b* Y  let x1 = x[0]
7 E  v+ W( A0 p; J5 K. n  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')
    }
  }
0 K  p$ E; k* G; {7 x7 `& i  return props.prefix + x1 + x2 + props.suffix
7 |+ l# c5 Z7 T, T+ D# Q}

3 J- t6 e# r% y# d! \! q6 y// 相当于vue2中的data中所定义的变量部分
: [9 Z" c. A7 Vconst state = reactive({
  localStart: props.start,
% B% ]" Z6 ~/ ?5 Q& J  displayValue: formatNumber(props.start),
  printVal: null,
  paused: false,
8 X4 D5 {3 q* d. \  localDuration: props.duration,
  startTime: null,
  timestamp: null,
; d3 `/ G% _! F  remaining: null,
  rAF: null
  M* D& g7 h! R. h3 e})

// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
- h0 ^! o* d* c2 M; _0 B  return props.start > props.end
})
) {( k+ r. ]+ O! o// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])
( b  h& R5 }/ i% {; r
0 Z$ D4 j' V1 hconst startCount = () => {
& Q8 V+ j4 u, g% ^  N  state.localStart = props.start
2 P* }8 H. D, Q* T  state.startTime = null
  state.localDuration = props.duration
5 A$ e2 W, a; a# u) X: X) U  state.paused = false
  state.rAF = requestAnimationFrame(count)
- U& D5 x7 c) G; w( @' O}
3 d8 }* P" k2 {5 K
watch(() => props.start, () => {
  if (props.autoPlay) {
& Z3 u! q* q: J- R    startCount()
  }
})

! z1 A( v# W1 \: V* ~( {. g: [+ nwatch(() => props.end, () => {
  if (props.autoPlay) {
) l6 l/ s: K- q    startCount()
; v5 ], I* }7 H) q' y$ @+ ?  }
! t0 J. h4 ?2 b7 E})
// dom挂在完成后执行一些操作
onMounted(() => {
; A" K; z  i8 m/ T5 h- H" d8 h  if (props.autoPlay) {
5 K  W; d9 |' A. z; r    startCount()
8 O" z4 J9 G3 y( p/ e  }
  emits('onMountedcallback')
})
! e5 d" n6 t" q1 R' l// 暂停计数
  f; q) y# r4 _3 q+ [  a# [const pause = () => {
  cancelAnimationFrame(state.rAF)
}
: Y( U! x9 f6 ~7 f9 {8 \// 恢复计数
# O5 ~8 p) v# z4 W# nconst resume = () => {
" t  C9 O6 x" Y, A, n8 N  state.startTime = null
7 Y! k! P# @* a6 _+ R  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
# l9 [0 ?0 Q. R  `}

* s3 }" [+ g; hconst pauseResume = () => {
  if (state.paused) {
5 c8 A& V# z5 r$ B8 \. ]    resume()
    state.paused = false
  X, f' F+ ?$ O$ ^8 w( ^& w, H" n  } else {
3 p% T8 U0 X( q    pause()
( l7 k% y0 f- @# q7 l6 T    state.paused = true
6 ~0 M: S5 Z. l6 E: v  }
, ~/ d: J6 b. m6 S, d& w6 j}
" [# C" G6 o+ ~3 C
const reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
) d  W3 J4 x: B3 m  state.displayValue = formatNumber(props.start)
. w, h& K) B8 E}
2 e4 D" A3 N# o, F
const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
5 @, v& M5 o5 @# \# I' y, C6 j; g  const progress = timestamp - state.startTime
, [- ]% |, w" \: v8 O( J  state.remaining = state.localDuration - progress
8 J: {* p4 Q' J2 ]2 d  // 是否使用速度变化曲线
0 q4 Y0 r9 I7 g( a0 z* w* G  if (props.useEasing) {
/ W* z6 c- `2 g9 T" c% R; X& K    if (stopCount.value) {
  M) J8 W' ~8 A. p% j      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
# P. |4 s0 {0 W! A    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
( _: G2 W9 o, J  } else {
    if (stopCount.value) {
# j, r1 t& C' f# g' v& Z      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
) Z) R) o: e$ `, @* y1 Q/ W! c      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
0 w8 D4 w) z' ^; y  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
& U0 q' C6 q. p# v    state.printVal = state.printVal > props.end ? props.end : state.printVal
* R1 W6 G3 q& F9 H9 R  }

  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
8 P( W, B& r" P9 D& v  } else {
9 P6 G6 d; t8 A4 k    emits('callback')
* D' }1 T# V( B0 @. R, K3 [  A  }
+ d$ j' L# [" W$ ?8 ^}
// 组件销毁时取消动画
onUnmounted(() => {
. W' y; z6 E: C  cancelAnimationFrame(state.rAF)
9 E( i- E7 `) }8 H0 n4 u})
5 r" F6 }" W+ U1 S</script>

! G/ w/ N+ f/ J3 M5 D4 E% A% K) w( b1
2
* Y3 t' h* g9 J/ I( T4 b0 G) ^3
4
. Z- }$ v5 y5 C/ `0 _  S5
; N( i* A% f- M6
7
8
9
10
, X' L  n/ E6 S9 @9 ~5 n" j11
12
7 q) y, S/ a% {# v) ^" P, a1 L13
14
15
& n! n% E+ J8 @3 v% H6 q2 U16
17
! c9 D) V- q" x* f, z18
: y, C/ g$ }+ w' C$ S2 w* y, C19
6 c" s( O& V! o7 d! O- K20
/ U: n# a" z- z$ O5 V21
5 G2 D) K0 C$ n2 |4 o22
+ o% c! T1 T$ f7 t$ t23
% i6 D5 q, T0 g: `4 L24
/ J$ V7 \) @+ \25
; F( {/ L* y5 e# l: c& }# f26
27
28
29
30
31
2 w5 [: U& i2 {! ^. F1 X. q- }32
33
0 P) f* a, {, W% ]34
35
36
37
% I& C+ @+ ]8 C: |* H7 h0 y9 @38
39
# N  V# S5 I, h9 o% ~" d5 \1 J, ]1 ~40
41
42
43
44
  N/ m7 {4 m8 {: O7 u45
( c' f1 M. m; R46
47
48
49
50
51
8 G. N( J% S. X" @. C2 X( @52
# C9 K1 e# z% n53
54
55
56
, `0 v$ i& ~/ {. v* V" I0 {57
58
; I  S, y* _" g2 i: Q+ \59
( h* u5 Z  m+ ]& |! N60
61
: B7 V. N* t2 J6 \% L5 K- _' j62
63
$ h. V: H4 x) P( `64
# @+ r1 v  ^$ c# c! [' o! K' D/ b1 T65
66
67
2 d+ Y& Y' k; O" h' ]68
0 ]( v1 n" F- @0 I9 B5 y69
70
5 P$ a, v. s2 F: a0 s71
72
73
% P8 C% j6 G# z8 Z8 B  O. E0 {8 v: o74
75
2 o6 B' u$ p/ _* ]* ~) ^  d76
3 J6 s4 s( V( \& y' r7 @! _77
78
79
80
81
" B6 z$ m: U) N82
83
84
; s, z/ f! ?+ t* ~4 G/ W: L( t6 j85
86
- J1 X2 T9 |. ?, N' F  ?87
88
1 h% C. y+ `& H9 w0 m: E89
90
91
92
: ~: D, |/ ^2 O. ^' Z. p93
% r  P1 Q4 |7 v+ Z: r/ @) T94
1 Z  T8 Z6 h* n9 C# i3 ?95
2 |) H: f# }, g  |5 g96
$ |* k+ x1 Y! G- f+ c5 A# i97
98
2 s0 H  n. _3 J" C99
8 `: {4 ^( N9 e& @4 M" b" C* }6 |( b100
101
102
+ t9 X# ]5 D1 z% R103
104
105
106
! g9 J7 x3 Y  M" {; \- R0 V9 N7 o107
% T% s! O1 B) A. y3 p. P108
109
110
7 {: ?9 m5 z, o5 v. g111
, N" R) M+ r( R4 z8 i112
4 r; j6 V. a" c8 X113
114
: W; V5 d; Y  _& Q% Z, h. z115
116
117
* Y6 F- p6 o. o/ ?( [5 n118
2 E* T) d# m  V1 m& h119
120
( M; m8 X3 k4 [* a) \121
122
, f6 A, f1 r1 }123
124
125
126
* `$ w. d( X2 R0 i! L+ b% D127
4 i* c# W  F( F; K2 r1 d5 D* g/ z/ [128
129
130
131
: Y" f# F+ n6 B. t( Y( Z/ a6 h# ]132
133
134
% D& l: T, @; W% J& `$ v1 R135
136
& u$ f6 m& l3 b' Q1 t, L137
138
' e* B6 f% @: n  D( i( o139
. P: a  b1 q0 r0 w6 z8 n7 y140
2 H% O  R0 p5 r7 x0 C, H141
142
143
2 ~7 l; e! j2 j  K2 G$ J144
145
146
% U. d* E7 n) o) N8 P/ P147
148
1 c& u( N! Y. Y8 o% B& i* _149
150
) O* i0 Z' S; u151
152
5 v! R5 G, t* d" [153
8 J) m. b3 l! k, P154
3 x# [3 Q1 O9 f- S: s4 l155
1 T* D! q/ e1 z* d: p; Q  s156
9 x3 e7 Z# `/ z* q157
" F# E% i% _3 P7 y0 J$ _158
159
4 L) H& k, u7 U/ ~! [160
, w; U6 g( n+ V2 T. U+ f. p( }161
162
163
164
6 Z: z" U- U# ]: N& ^165
+ Y6 A& b2 L% @166
167
168
3 x! F# g5 j8 T169
4 A/ P  M& {9 ]# m6 A8 r170
" b  Q# y  \" K9 Q4 p( R0 o171
, Q1 P2 J4 `7 o3 a: }) o* g172
173
174
$ n! |. t7 ?$ i$ j$ m  Z1 N175
176
7 X& B3 H* s& k/ P# V1 C177
3 N: y( [: p3 I% e178
179
% g+ f) T) x, p+ a9 |% H180
* q: O) f* Y/ Z& l2 R: A! T181
182
183
184
185
186
2 h0 a# Q2 s! p4 X2 p6 L187
8 V) j5 ]" q& J. N: [! f: X4 r188
189
0 j! m! B# ?" ]; C9 o( o190
191
1 z" V0 f& Z/ e192
193
194
195
196
1 Y/ W. _% e! f/ l197
( H; |( W3 Y1 P. x9 E6 P198
199
4 ]  d# h- `& j/ r1 ]2 O200
201
& o  J* h1 s/ W" j  G. q4 M+ A202
总结
4 u0 P& M! h1 h- y自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
7 i! _. R' V8 b' V
8 m' g7 G+ G5 B- qdemo演示
) u1 u+ M* M5 x+ N8 z; L后续的线上demo演示会放在
demo演示
( S7 m% V- u6 h* K- u. I完整代码会放在
- v' I  q+ V5 O4 S: F个人主页
# s4 q/ [# o8 p9 ?( O- K
, m; }3 L4 q  I  `6 r% o. v希望对vue开发者有所帮助~

个人简介：承吾
工作年限：5年前端
0 r  v7 E+ {* |, [地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！


- q/ N: f- C, _0 C) k1 n
# u4 G( [6 d8 s, i6 M
7 z* _) {; `% I. ^/ x4 `% h————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
$ G; p# w4 b# `. w4 ^