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

杨利霞

vue3 | 数据可视化实现数字滚动特效
  b! k3 A8 Q3 g7 u6 n
( k+ V# ~! P* Z# `. D. W3 ^. c) `前言
5 J8 |* A$ ?( X$ ]5 p1 }  Tvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
3 v; }3 j5 D5 N: DTypeError: Cannot read properties of undefined (reading '_c')
& f$ c  C# e- F8 H- Z的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


  Z& Q7 q/ J0 n* ]* k. ^' A思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

+ }2 c- O+ o/ [& O文件目录

! p. p/ ~$ z; P0 G8 l, L% |
使用示例
, m) P. f6 c! {6 ^" T+ U5 r& C, `<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
$ e% x6 H0 Y& I prefix="￥"   // 前缀符号
, m9 \! d% J- J3 z* { suffix="rmb" // 后缀符号
3 a0 X- O" |. `8 ?  { />
1
$ T4 @2 i) Y* w1 j/ A, H/ L* \2
3
* O+ E: c3 ^/ i+ V4
5
1 v% g! |- n& e4 {6
7
8
入口文件index.js

const UILib = {
/ O. F. P/ n7 O* |6 r* V  install(Vue) {
    Vue.component('CountTo', CountTo)
  }
4 j  U4 X, J/ G}
" A: c/ \* E2 ?% T9 b; P  G
export default UILib
: ^. P4 ^" X7 {3 l- ^+ M
1
' {+ \* Q3 b/ c/ G- `) Q2
3
9 Q0 W+ _2 n- d1 I( L, ?1 `4
5
5 l0 E& a5 B& t4 `/ ^6
7
$ d! u! T  t! }+ G8
7 p! J8 }3 W. M. Y* E9 s% s9
  u( ~/ F" }; u7 N6 o" p% Dmain.js使用
import CountTo from './components/count-to/index';
. t7 B. C, Q, M: u7 [4 bapp.use(CountTo)
1
2
9 n2 H8 ]$ d4 h2 @% ^$ T( q$ s6 rrequestAnimationFrame.js思路
& V9 \' T6 E; I7 @6 T+ M先判断是不是浏览器还是其他环境
8 O* f8 C1 D1 C如果是浏览器判断浏览器内核类型
) k/ q5 P. c/ |如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
$ q1 n2 Q. ~: h, H  H& f导出两个方法 requestAnimationFrame, cancelAnimationFrame
1 ?! `7 d# W1 M  D3 A9 x+ ]各个浏览器前缀：let prefixes =  'webkit moz ms o';
: v4 n) n: \0 f2 p1 }+ \判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
! ~1 S1 Q, z1 U3 R( Y! [/ {$ |  wlet prefix;
let requestAnimationFrame;
" K  G2 h; S: Z) n; M2 hlet cancelAnimationFrame;
- F  F7 \" a( ]7 k! J; }// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
" Q4 ^" {, q) j) U% c2 k  ~) d    for (let i = 0; i < prefixes.length; i++) {
- B* m2 {$ p2 ^+ P- a6 T  s; D- C        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

  //不支持使用setTimeout方式替换：模拟60帧的效果
7 }' }/ H7 P& B* z  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
( l1 }0 h+ e- s7 @* Z    if (!requestAnimationFrame || !cancelAnimationFrame) {
$ ^+ O. z9 Y) I' a$ x% M- y        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
7 B: T( I- d, b- g            const id = window.setTimeout(() => {
, k, y: U- o, V8 M6 j                callback(currTime + timeToCall)
, h5 j, v; g0 ]* a- q            }, timeToCall)
            lastTime = currTime + timeToCall
; W( M0 p7 s5 ?% G2 _) Q            return id
        }
: Q7 H4 J( @  e  s8 o. w
        cancelAnimationFrame = function (id) {
4 N( n: f5 a7 \  O( Q7 J% e5 ~            window.clearTimeout(id)
8 m/ T7 s- a6 [9 A& L4 m        }
1 M3 b8 P; v3 G    }
! g- |5 s. ~1 q% S* D6 ~% F
0 i( x- o' Z, c  H9 \8 b1
: f) q& o& r8 _" Y& S2
3
4
' j; r7 _( d& A0 J9 B* @5
6
7
' u* e) `$ i4 g1 \+ D$ O8
9
10
5 b) r* T- h) O- \# L9 K4 C11
12
13
14
15
16
17
18
19
5 x7 W" J! W0 K* P% I- x20
21
& C1 K0 k$ c6 _( ]22
' x& V* X/ |& u1 }8 Q  c- V23
24
8 ?* [( q7 m. @, J2 o2 M. f25
26
; d  ]4 K& d- n$ A% z# w0 L- L7 H/ |) x27
! A' l/ b$ m3 L$ s3 G: S28
" i6 Q0 m; B, A+ u* K) K8 K29
8 K7 Y- m4 D3 ]: _30
. j( K. a5 |$ @; F31
4 c- D& Q' F% h8 ?  _9 [32
3 ]% g$ B( \: {完整代码：
requestAnimationFrame.js
9 Q: k, b0 e9 ~, B  b3 t( Y+ A: q
! Y. C7 _% O# t% j" j! C- ^$ Wlet lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

' q/ H7 l9 ^  k* w; I: ^$ Nlet requestAnimationFrame
* I0 w6 t& d! A( E# t. K$ N0 Wlet cancelAnimationFrame
  ]# p- `# V) w) w1 w2 L" m, E
5 K1 S% m; E3 c2 d$ @1 W// 判断是否是服务器环境
5 b) W5 r  F. @$ C4 Q9 Uconst isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
        return
4 h- u8 {( y, h' I! A5 k4 E6 z    }
0 {; ^; n) O- ^; g0 ^    cancelAnimationFrame = function () {
        return
2 @3 y9 G" \2 k. f; v    }
} else {
; x! ~6 J( o6 C2 h$ s! V    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
; ~0 @# s( S: J, B9 Y/ R* O    let prefix
9 P& E  N1 R  I9 G  c' E  y% d    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
0 A, I, f0 W$ z+ C7 v8 v        if (requestAnimationFrame && cancelAnimationFrame) { break }
" U% ]/ q9 J* r  h2 o* E  s4 X        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
8 d' a( y7 l* }% d) u' T  h
    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
: a6 R0 m( F6 L, I1 T" D! G  b    if (!requestAnimationFrame || !cancelAnimationFrame) {
' Z' I& ~3 l8 u        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
6 N) u$ Z" Z* e8 N' u            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
, y5 C& r$ Q/ L" h8 N/ y* a. F            lastTime = currTime + timeToCall
5 e; B  A4 z1 j6 {7 K            return id
4 U( |- A  X1 b4 A' E) G9 n        }

        cancelAnimationFrame = function (id) {
- h2 y( ^9 B9 P7 o            window.clearTimeout(id)
! n+ ?$ E5 y# e2 V& q  e) D        }
3 k4 u+ d) I% [* @6 z    }
}

export { requestAnimationFrame, cancelAnimationFrame }
5 d& o3 v; I, t% s

1
8 D! w$ l" B( x8 o0 g" N2
3
4
' _6 ?9 ?8 x( Y" I2 M$ ~. _5
6
9 U( f% S, H5 t9 n7
8
5 V: m0 [/ B! H. c/ T9 Q' y' I9
7 H* m( z& \% P7 X3 h8 l8 s10
11
; n" f' P5 L! a# _12
, @/ `. }% \9 f% v- x/ c: f13
14
$ I- ?$ P$ C( j  s, I6 G' p6 f* L, {15
' e/ Q( B& w4 r+ `! ~16
% n( P4 z4 {0 W! V3 M: x/ I* Z17
18
4 L! l. @; d& j4 m- @" r+ f19
' q6 F' Q* R. O+ I7 ~20
21
; A3 A' Q, H( V, p* I0 G& X22
23
24
0 u: _& @; e: [' J- \: ^25
& f4 c) a' k' z. p- e26
8 K/ [  V+ h4 ?" |27
% m) X7 g, K8 V28
29
. s6 T; ]& P  b! n& B30
, c- L6 ~5 v  q" @8 u0 J31
0 S( p! {, C& e% @32
33
$ [+ j8 Z) \5 ]/ t8 o34
, d# y- A# Z) G35
& o5 }( ~. W9 G. W/ @36
; n1 r1 c& e/ w" q7 N- c+ [37
3 f  M- \2 O( f. g- K/ N38
39
40
41
2 ?$ e4 {: B9 _' n* d' j42
43
5 u- ^2 X  ~6 w6 u! `. I44
( F. p6 w/ N+ e3 J8 e' i1 L8 X) {  r45
46
47
4 Q7 ?, J% F+ z48
CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
5 n, f5 M0 F6 s4 T
/ B9 C$ U" u' ]. s3 I$ h引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
- `4 l, ?% l8 f  n* g1 D1
8 t; a; Q) n# L需要接受的参数：

' a( `8 S2 E2 h2 b0 _const props = defineProps({
- m& s' `( ]+ A. Y# e+ R: r  start: {
    type: Number,
+ ]& D( I$ H/ k2 l; v) z0 P" A3 H    required: false,
    default: 0
  },
  end: {
    type: Number,
: C) E; O: f8 K    required: false,
) n8 m5 U" G) X  ^  \/ Q    default: 0
  },
  duration: {
    type: Number,
( }0 ~; @) i  I  R% Y, g    required: false,
" @& a2 p9 {# `* c9 R+ h6 L    default: 5000
  },
9 {; X7 S9 E1 |/ q9 l4 D; f' C  autoPlay: {
    type: Boolean,
    required: false,
    default: true
/ {6 q/ j6 w) y8 d4 C  },
$ n* F( g0 T4 a4 u  decimals: {
    type: Number,
    required: false,
8 U3 q; P4 q2 v( u# A- J' i. u    default: 0,
6 I5 D+ r- r$ C4 `  ]6 w. _    validator (value) {
: x) d& A2 e9 Q1 b& M5 t3 Y      return value >= 0
' [# E4 _% w- T+ f* ^! }- F    }
  },
1 ?3 ?' W) O. h  decimal: {
* A3 [* T+ E* T& y3 k6 W2 t    type: String,
    required: false,
: J6 A& D- T! A    default: '.'
  },
( ~, g! [& E/ `4 v2 X; _; Z3 r3 D  separator: {
7 k- W( C% j- a4 k  U7 G, N    type: String,
    required: false,
% s3 S9 u! o9 ^    default: ','
  },
  prefix: {
    type: String,
    required: false,
" @4 B/ i  A. ~$ H2 Y    default: ''
1 R9 x0 E0 R" b/ ]  },
  suffix: {
$ Y; L7 q9 K# \9 i+ N+ m    type: String,
    required: false,
    default: ''
  },
! D/ @( X! ^! O& D  useEasing: {
5 d- l' k) W; B+ B* t    type: Boolean,
  M7 c. v, k% j' e4 G& i    required: false,
4 Q- s6 ]$ L0 M" {    default: true
  },
, s4 J* g( B; Q* _0 E8 }# D  easingFn: {
    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
3 W" V# @7 `3 v7 {})
: v" v$ T/ P+ R; j7 @4 i/ m" l
) g5 \2 A% U+ B; ^
1
) C( K% g3 }' |7 D2
3
4
6 s9 _0 x* |- i7 }) c0 _% ]8 |  \5
6
4 H! y5 v3 Z, g7
8
4 a" r( n' d* w7 t9
10
. T4 D  G. |" ?8 W2 J11
5 B: `$ \  O8 n) ]3 n12
9 r  o0 l8 T7 q" p3 `/ N13
; j; w) K! f6 z14
+ L+ ~. C# J: v% Y3 b: }; |/ I/ a( L15
16
17
18
# P8 ~, I/ c/ Q# F/ e19
; ?" A& |2 ?3 x/ C5 D1 @20
21
3 ?7 T- N- i! }- N' ^! P+ ]+ C22
23
" ~* V  _6 |: ~; w; d% c$ V24
7 p- N. e& `( R: e7 o  X' ]7 i25
26
27
0 l' V. r1 @& s' A- [& c! \28
29
30
5 Y6 E5 F4 O5 E3 M  D8 W8 M31
: p2 v. Z1 G. Z32
33
34
35
/ M3 a- k" w! O+ l36
9 w& g6 u1 m) t! o$ H- _' }37
38
( C8 I4 g/ s1 Z# ~8 s39
40
41
42
43
44
( H- q% p" c; @. f+ Z1 x* f  d45
46
47
48
49
7 V; b4 {3 |3 y% r50
51
0 S+ Z& o! z; h8 {/ Z( T4 l5 a# \52
53
4 I- H# E9 P9 {1 S8 y/ H4 Q9 |4 a+ r54
& Q- z4 i: A5 {/ ]1 y8 B55
56
57
" O8 o$ U/ w. ?& R# m: b58
# N" P; ^! G* O  t9 a% T! t59
4 W2 D( h9 M- A# I$ X60
+ q% f' i- }; [' s. K61
62
/ n# x/ P6 k( h7 q4 l0 H$ g1 l  w: l启动数字动效
4 t, N- e9 _1 W
const startCount = () => {
% ~, ^% u& R# Y+ t9 i: F$ S5 ^1 z  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
. \8 B; ?( d- n% y8 r6 B9 p+ ^  state.rAF = requestAnimationFrame(count)
}
, t3 Y2 d! ~: o. ~1
5 j5 o& |# N* G; K4 d1 C2
3
4
5
8 G0 y! Z3 {! p( o9 {6
4 |: t& |7 a' r" a" U; y7
5 p$ ~  B$ I# T" c* n4 m. n) L核心函数，对数字进行转动

# `; s8 b0 i! w7 I, C3 J/ Z+ T. A  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
% }! l% l( t. G2 F9 y5 p4 V/ w  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
9 l) X  R2 J& O' O8 N' d& X      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
0 G# J/ k6 ^/ L      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
- X& b5 g  }+ d9 i    }
- J- c2 k  Q0 {! {$ h  } else {
0 G4 `) R; h- p  x7 K# p    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
5 }9 e; N& C$ t4 P    } else {
. E$ ~* h# N. D: g      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
+ V$ v& `2 U0 T  f, j    }
! T. t- d' f8 n' ~9 V4 X3 t5 z6 W  }
# F1 d/ a8 p- a( \, @  if (stopCount.value) {
3 D8 H! M% `! ?1 x# @6 j    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
1 x' l9 E. J, ~5 c$ ~/ k    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
9 e3 v/ x( C* a. B8 F, v. R
8 ^# x6 m6 Z0 t( ?% `  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  b# Y- p  p& ~9 E3 N; ]( S  } else {
) I8 U) [* {4 A3 P    emits('callback')
  }
}
3 C* J- q  `% \7 T! N! g

; @7 [3 s2 j2 L1 u// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
7 [2 |- m% [$ e7 \& C  const x = val.split('.')
& Y  x$ t$ a0 ?0 k) r2 }  let x1 = x[0]
6 k& c9 [+ F; K9 s3 ]( D3 ]$ ?% \  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
2 u0 {9 T( |" F' I      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
: _  v7 i8 W0 _! i0 a; [    }
1 ^, q) S, K/ B$ s. U6 P  }
  return props.prefix + x1 + x2 + props.suffix
}

1
2
: J. F% D" D2 D1 z3
+ A+ T, I  t5 ^* u& f3 u; ]4
: d9 {/ D1 \  M9 W% w6 F5
6
# r/ {  s# f$ t6 ?; y7
" q5 f  P4 u, I9 `( \9 `8
9
) ]6 L1 Z/ U- x. g, N% G, g; r10
11
12
& Y! S! Z8 X2 ~3 K! f) ?& O3 R( t13
4 j, d/ |) M8 ~! G( e# t4 N7 r14
7 o( @! v! Q* \. v, f15
- i% I: T# |* k) {' F4 d# @16
17
18
19
7 ^+ M, C; ~' a' ~$ J: u5 c" i20
21
22
23
24
25
26
27
: f0 G5 Z% `: F& T28
29
30
! j8 H, ?; O; S31
32
33
. H( d8 N+ t/ O34
35
: K% o: {8 u/ P7 B  N7 k36
37
38
39
40
6 e1 P- H5 D5 m" K41
9 ~. c- e0 i; }* s42
; g$ {1 N  \- O3 o' J43
8 c1 q% d+ X0 Z! c' ^44
45
+ c& x  \5 \/ R, F46
0 S) |, l' l5 S1 N3 ^47
48
取消动效

// 组件销毁时取消动画
onUnmounted(() => {
6 I; _9 U$ ?9 q5 W1 s! E# S8 D4 [  cancelAnimationFrame(state.rAF)
})
1
2
* V0 V/ P# P0 t; e; S; z+ v3 L3
0 I- |9 G* ?5 e% \- w2 j8 @4
) u( g( F% Q3 X. G( w& D完整代码
; R/ \, P, ~$ A0 p  m) B$ h" c! o8 u
& L2 f+ |3 i. ^) ^, z, c<template>
: |# S/ q, M3 I! |  e  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
) _0 y. [" v: m0 n% w. jimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
" [% o1 R  G4 D4 n6 |// 定义父组件传递的参数
! R  S  l8 y) Z; Iconst props = defineProps({
  start: {
) n. z# V6 V* Z. O& J; F; p    type: Number,
    required: false,
    default: 0
0 G. H6 F9 L3 Q  },
4 L' K0 K, a* ]: j3 B8 c1 z: a  end: {
    type: Number,
    required: false,
6 @" N# f2 l6 V4 J    default: 0
  },
% c% l* a/ i3 R2 l/ [- K+ L  duration: {
! n0 [' q& T6 v; |+ _) h* X    type: Number,
    required: false,
0 W9 k! @& s) Q8 }. K    default: 5000
7 T$ s, J8 ~" ?4 ]9 l. @9 Z  },
  autoPlay: {
5 B( R5 L, c( ~! T    type: Boolean,
    required: false,
8 [; Y# }3 X# A+ [* z    default: true
  },
  decimals: {
    type: Number,
    required: false,
    default: 0,
    validator (value) {
7 q5 t; w# N. }) r. K7 q  z# P      return value >= 0
    }
  },
/ {$ J; A$ C* }3 |; q/ p  decimal: {
    type: String,
    required: false,
    default: '.'
  },
  separator: {
    type: String,
    required: false,
    default: ','
4 `( S, r) r8 B% K4 v* w$ D  },
  prefix: {
2 w3 j' t3 R3 G    type: String,
    required: false,
5 U' P6 x5 j$ a, T. C    default: ''
  },
+ O  k. H4 y6 g& y/ J) _8 R  suffix: {
5 C6 |# g8 Z( D* W2 b) H) K4 x1 E    type: String,
    required: false,
    default: ''
  },
! J" P: D2 t/ @- H# e/ R* r, ]4 _  useEasing: {
    type: Boolean,
    required: false,
" h" {/ K' [1 O* j6 s  E- w( @2 |    default: true
  },
  easingFn: {
    type: Function,
    default(t, b, c, d) {
' S: n  X* u( v* I: N, s; P) F+ E      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
6 u6 N' }6 l% A4 T, b! E})
, @- ^/ r: B. }3 ?9 ]0 t# [
6 S7 k) S: {4 V6 pconst isNumber = (val) => {
5 a% o- t1 P9 U  return !isNaN(parseFloat(val))
+ F, h/ L4 C- h- ]3 f1 J3 A! |' F}

// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
! y. X! a0 P( s$ p$ Q  val = val.toFixed(props.default)
4 {' [7 W: W0 F  val += ''
) L4 |3 _7 I/ s  o; F$ ~/ ?  const x = val.split('.')
6 ~3 U" ^( ^" y  C  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
. a8 N& s) |/ k$ J  const rgx = /(\d+)(\d{3})/
, y) z$ a. ~: d2 G  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
4 o# G3 n' k/ T6 E/ G4 ^  }
$ Z6 Y: w. {3 r# F- A6 l  return props.prefix + x1 + x2 + props.suffix
}

3 k- `% G$ M: P// 相当于vue2中的data中所定义的变量部分
const state = reactive({
' ?+ o9 m: X# L! B2 M  B  localStart: props.start,
( {1 I+ {( t" l3 z) H% w' [8 N  H  displayValue: formatNumber(props.start),
! v1 M! b0 D$ D9 t) h. C$ b  printVal: null,
3 J% {- T! B6 E' K2 g0 w  paused: false,
  localDuration: props.duration,
5 g( ]" w% d9 ^6 U  startTime: null,
- V4 l, I4 H# Y7 t0 d& }" P0 M  timestamp: null,
- W% e+ i  i. Q+ f2 _  remaining: null,
$ Q1 |8 `, j+ Y& F' p6 W  rAF: null
})

// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
- O6 G2 a) P* S3 t4 n% P+ Sconst emits = defineEmits(['onMountedcallback', 'callback'])

) h& P! E2 P! Q" M$ D! econst startCount = () => {
  state.localStart = props.start
9 f; y* x( d" ~4 R( h  state.startTime = null
! Q) V" N* j  I. N% R  state.localDuration = props.duration
" O8 C' @: \0 k( o6 `6 e  state.paused = false
7 f4 [. Q9 D, a$ }  state.rAF = requestAnimationFrame(count)
6 ^( z& W5 g4 ]$ G8 A}

7 M7 L8 i6 F4 O6 D9 S$ vwatch(() => props.start, () => {
  if (props.autoPlay) {
    startCount()
  }
})

- w7 A' e2 U4 W/ {  u$ Fwatch(() => props.end, () => {
  if (props.autoPlay) {
    startCount()
2 e! @8 o! W- \; g' P  }
})
// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
# E# i4 T; Y' L, Y; w, j    startCount()
2 S* N7 p" x! f  f; E  }
  emits('onMountedcallback')
  ~6 ~% Y. ?/ r% L! Y- ^( r5 O) w})
// 暂停计数
const pause = () => {
) v) I) G2 ^+ ]  n; x  cancelAnimationFrame(state.rAF)
}
4 `8 f9 p6 W& c7 ^& {// 恢复计数
/ ~- l( T) p  g) m( P' I+ T% Pconst resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
" W3 f' v& Z. [( I4 l  state.localStart = +state.printVal
; x+ U4 v3 @% M" z  requestAnimationFrame(count)
}

const pauseResume = () => {
  if (state.paused) {
3 O4 f/ c1 }  Z    resume()
/ v- {+ V3 Q, |( I8 ^# M    state.paused = false
4 H8 A2 I! X+ ~% ]  } else {
    pause()
    state.paused = true
  }
}

const reset = () => {
/ O! {& p4 _: K$ O  state.startTime = null
  cancelAnimationFrame(state.rAF)
; J/ Y9 N# U0 u  state.displayValue = formatNumber(props.start)
* T; Q, h" o% w2 J( K}

const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
" p! v! x4 P+ v  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)
3 J+ A  H2 }0 [5 t    } else {
; q8 Y$ J& i2 h2 _/ `      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
    if (stopCount.value) {
# m9 Z; o# W/ b  V      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
. C) _1 K% e4 h: D# l2 u' m3 B, @- ]    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
1 E2 U; `  K! U  Z/ r& c6 e  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

8 ?5 W5 M( q# [" E+ d  state.displayValue = formatNumber(state.printVal)
, a' b/ Z8 K# M2 _9 Q% @; }- j; b  if (progress < state.localDuration) {
/ Z6 F8 s3 X% W" }5 z7 M: N    state.rAF = requestAnimationFrame(count)
9 I8 t6 v' h6 E) t  } else {
8 m' p! c4 f  C# W# n    emits('callback')
& `; ?2 v# N( K/ G% R2 p  }
}
4 @- G. \' Q9 ?6 G0 k0 }; R// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
( }( R7 X4 \2 X+ P3 ]/ q% D, G})
</script>

1
) k  H) k  O/ \1 p2
# c: i. x( x2 U( Q2 X# Z9 X# T3
4
+ \$ g9 H7 n7 G2 t5
6
; U4 @1 ~' \/ W" |6 ~6 O7
8
0 b5 G# U& P, t: l. ^9
- d4 K+ e$ }# {  y4 ^5 K& k10
2 C) M+ o* e2 }+ s; o, h/ x11
1 a" E" W& l! _2 e7 Z12
/ E% D5 h- S. c13
14
15
16
17
18
0 `! p+ D& v& v* _% k, |6 X' V$ O19
20
/ I' }4 I) R( R21
# }# z! q# J/ n* M/ ~7 T22
23
9 e/ E! h) L! F* C) g, U3 }24
25
26
27
28
# i% u' J  E3 D$ k+ c$ x29
30
9 H% p7 H( F7 l1 t31
6 C; N) i( V8 P$ X# H" g32
+ O5 N7 P" E9 x33
8 J: z8 w3 t! n" q: ]+ g34
35
& @* N* J' D( W- D9 g; C4 o1 H36
37
38
39
40
41
5 X) K7 ^$ |6 `9 Y0 P42
9 W6 l0 E7 N+ |- S% P/ N6 J43
44
45
46
$ C$ r: X: r% o! @' d( @( F9 x( j2 b47
48
0 z; x' {! K3 Q8 H49
4 s4 y$ V! B/ v/ E/ s: U5 p1 s& Q50
51
52
* e' f2 A# w0 O( x$ b* {* S7 e9 N53
54
/ t  d0 O  u9 d8 L$ ~9 Y55
56
- _( {/ u1 A& L; e- _+ k' K57
58
59
& T) L) p0 P! Q5 ?3 L60
61
& z+ A) G+ t- ]0 \( w6 R0 b62
63
/ Z. @$ Q0 I5 n/ I/ b9 B8 g64
7 V) e) K3 F* B& l& _65
66
67
68
* x5 w' {% r) o/ C69
" I5 y4 M: R& A/ ^7 f70
/ T0 z: c3 ]& m71
# ?" Q  @0 e9 E7 ?8 {72
/ R- S$ D* v" M9 [. x73
74
75
76
' v, s. s$ G  W2 k77
+ c; R  T3 u  E3 q5 E9 k78
79
8 z" W3 \9 Z# c" f. }80
( i( p9 j7 @' j81
82
83
84
85
86
87
88
89
- t( x5 |  ^' k& J: W90
91
92
93
- D* {7 ?  x: C5 E9 s( \# P. l94
95
96
97
: j' C/ }( j& b8 f$ D5 G* R98
99
100
101
102
7 J" I6 R! J- D) G6 D/ B1 T103
104
$ R( F4 b7 T1 X105
; W& H; z8 E1 N* i9 v4 ]106
* t9 k& X3 U( m8 l1 u, ?) B107
108
109
5 K) x' i: A9 {* F110
# G, }- s& `3 L3 O% b2 z2 ~  X1 J! [111
112
' E7 D! W% P! E$ [, E0 e113
114
115
. `* T; j% m, Z  o6 c; B116
117
118
. \; y  u, v1 F0 @% J2 C119
0 ^- B4 q! ^- S! W. J120
: E5 D$ x! X' Y121
122
123
$ s; ?7 f: p& R( P: V+ u* W- f& u* B124
# H& u- F/ R$ ?2 I0 Q" Y/ z8 W125
126
127
, t4 U: ~2 K& F: ~9 o4 @128
129
130
131
132
133
134
$ }; [! T; Y5 U135
136
$ j' N/ k! \8 J/ ^137
138
139
& t- j# ~& {  w! Z; b140
141
" c, x9 i: @- N+ R0 i142
143
144
145
- H0 x& c6 S* i5 w, ]5 E146
147
" ]! g( }, e% V1 r148
149
150
. d$ R, i3 ~& J% \7 ^0 v" X! _151
# V" a0 @" y; _+ p* j0 [152
153
154
155
, U3 V- W2 |4 {2 e7 [8 o0 E156
157
158
% S! ^2 [; q- e9 c159
160
. i1 h0 H% t1 z* _: M3 Q; d  G8 O$ q161
162
, z, e# h$ U" ^163
164
165
9 ^0 ~# a9 ^& z/ [( o' x166
$ }5 R, C: D( G. ?; j0 u167
4 ]6 ]7 c5 ?! O1 O5 R168
169
170
171
: p: T* z7 I# j4 c( h172
9 O; @! a% L) }. t173
+ [0 S5 w2 w8 A0 v8 l* [2 J3 x174
175
176
% F% G. Q% u9 O$ p" T177
5 }6 E8 {% q  a! F9 y) z178
' S. @% v2 G5 X5 O" K7 V' P2 s179
, V# [# F  ]0 H9 D$ ?4 |3 s# _4 F180
181
182
& A: v. l# t/ ~  a; H; u% q; d2 Y8 p183
184
185
& W0 @) P) S% A" \1 a- u# }186
7 f; }: `8 O! `1 {+ m0 S187
6 w1 `. t( f7 J. F9 z188
9 I; V4 P% Z- V' g  @& F# f189
+ p, B$ z0 |! l9 ~" Q; V  J190
191
192
* r- K- w) c- q* j; C5 \9 k. q+ I0 `# O193
* ?( t3 t; r6 {. W- r194
; K: r) M0 Q5 P$ I  h9 [( i7 A) X195
196
$ a4 c+ G: x. Z5 |8 Q197
0 [5 P& m7 S* I) o/ E7 }198
199
; t* m: N7 K5 ?200
201
202
( w4 q1 G% N+ n5 f# ?总结
% q; w' c" g& |: |自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
3 ]* B. ~7 g8 ]8 V4 B后续的线上demo演示会放在
* _4 s! m: k+ M6 C8 ]demo演示
' ]" X3 l9 ~4 }$ X完整代码会放在
个人主页

希望对vue开发者有所帮助~

1 ?6 u( M% o, u6 a个人简介：承吾
工作年限：5年前端
地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
( T& u& @) j, s9 q2 {) W2 M

! x/ Z1 r7 s7 N7 E$ k

5 R0 v; K( ]" i" U* z————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
) K" x# I& {; Y( K$ b原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
9 J, i! A; f* W0 [( @9 t( i! K

8 }) o1 ^; c+ I. S0 ?