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

杨利霞

vue3 | 数据可视化实现数字滚动特效
$ a) M3 U4 s5 ~) V7 R8 ]; y
+ l. r# H$ B( U+ ^0 Y! x6 A1 N$ U  N前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
) _1 m6 Y* k1 |! \* `的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:

& ^* W0 I6 e# U, P6 y% S' R. G  C2 A$ A
思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

文件目录
. H9 k: c2 H2 [  h

使用示例
# d' o6 U3 ~0 g4 `( E" P2 o! u8 w4 d<CountTo
:start="0" // 从数字多少开始
/ ~2 b4 b2 c. a+ L0 {$ H :end="endCount" // 到数字多少结束
3 N  d) i1 @1 r+ y# L4 Q: ~. K. p- R- {" @ :autoPlay="true" // 自动播放
2 W3 j  s: y5 M7 M. L2 { :duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
- V2 u! {! X. _4 _( [: u1 k suffix="rmb" // 后缀符号
* k$ E) @* b- V />
5 T: F8 ~+ A# ?" `. q" q* `1
2
9 y9 a: F3 ]& b7 e" [. w! M3
4
5
6
7
6 O8 D! f  g/ {0 e8 D, k" O4 K8
入口文件index.js

3 r4 D0 ^3 U+ s  m9 n; Kconst UILib = {
  install(Vue) {
; n2 E% k$ t) n; e: O. a- m/ P) @* B    Vue.component('CountTo', CountTo)
  }
- _2 h9 T1 Y+ L  v5 B2 y}
& d5 e. G& ]- {! Q8 O4 i6 {
( T2 d- S& l) c  _export default UILib
# T1 ]: P9 l$ O
2 l2 \* U' B( L- g) @1
2
3
( M1 m7 r) W' o6 p2 L7 X% B  I4
5
% I+ w, H8 X8 H" v" N$ S6
7
8
9
: y5 V! L0 t7 R; Y; E- b  D8 R! Bmain.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
' ]2 D% s! I. P3 }' g/ P" D$ }8 b1
" [3 N! Y& }6 R+ a% W+ j2
requestAnimationFrame.js思路
1 Z! f* m: f7 z: b先判断是不是浏览器还是其他环境
2 A/ _$ K/ m+ I. [( J7 S% P' I& n4 Z如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
. u  T: l. Z( h( E导出两个方法 requestAnimationFrame, cancelAnimationFrame
3 N6 ]& c2 E0 w$ C  N各个浏览器前缀：let prefixes =  'webkit moz ms o';
8 `4 M% M+ J3 i0 F5 y! }  z7 f判断是不是浏览器：let isServe = typeof window == 'undefined';
- i& G/ I; Y: ~3 Z* R1 ?增加各个浏览器前缀：  
9 Q4 {  k, i0 ]& r' z( elet prefix;
9 K: b7 j* B5 v0 G7 E; _; H- vlet requestAnimationFrame;
let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
' N& u3 `8 s: |4 f" O        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
2 Y% h9 {7 g  ]$ @$ n" u( t        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
& h: L6 ]# K' n, L1 H: {5 _& \: O( q6 |    }
- m" U* h) Z  K1 b- N3 [
4 E2 d: u0 e, l. P; s4 e  //不支持使用setTimeout方式替换：模拟60帧的效果
3 ^2 P2 E: _, H. T2 Q  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
0 p! E7 Z6 l) h5 E9 F    if (!requestAnimationFrame || !cancelAnimationFrame) {
  k- G' {# Z& n% Z        requestAnimationFrame = function (callback) {
( }% V' u1 _8 C2 L5 F2 a7 g            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
6 N) x4 z: z1 B; C  ]            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
8 Q; j6 i" Q5 ~4 ~3 B& Y( M  c            const id = window.setTimeout(() => {
" t. M4 G; X/ c                callback(currTime + timeToCall)
" h3 ?2 }/ E; G- `            }, timeToCall)
6 L" s; z; f% m  Q- d$ x            lastTime = currTime + timeToCall
            return id
        }
+ a6 E- |, `9 a& I3 h  ~
        cancelAnimationFrame = function (id) {
! O2 t/ }5 D# t% a/ p& ]1 M            window.clearTimeout(id)
        }
    }
8 Z3 m. [  ^( F; [4 g% J
1
% M+ y! k2 h3 f8 Q& b+ I6 q; ?2
3
8 U/ g4 A# R5 Y4 {7 y- k$ k4
6 e8 h, U" |% ~: d9 `5
6
7
8
, ?3 d  Q/ y% j9
# z) }( |0 C# [) _& d10
4 U0 T; b+ F3 I8 |, @11
12
0 Y# ~# r% j; ^13
  e5 c5 }/ |  o! D  |+ [14
; q" O& ~2 q2 S: V6 v15
: l2 f* P; e3 p  e+ f16
+ C  s+ O0 N9 ^$ x( A9 O17
8 B4 u5 u. r6 x6 j( B0 G# t$ Z9 u" Q: e18
6 K) v8 T# ~: _- W) ~19
/ T# T- M0 H2 S20
21
22
- S7 ]- h3 u& i! {* |, m& T& M3 w8 \23
# R5 n5 }* W0 p' S& |8 q/ a9 v+ T& f24
# f# f6 |: k1 X2 ~9 x( q) O5 k5 d25
26
27
28
* \9 O, `& @/ d! f6 q29
30
31
32
0 \  Y: G* r0 x6 @. X( e完整代码：
requestAnimationFrame.js

let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

let requestAnimationFrame
let cancelAnimationFrame

2 \; e8 I% h+ H+ j' X// 判断是否是服务器环境
4 V( j& p5 y, x7 ^5 S, gconst isServer = typeof window === 'undefined'
; e- `5 a; U& }( w: Cif (isServer) {
    requestAnimationFrame = function () {
        return
    }
7 \! }6 m+ J% |& l& v1 P# ~# C    cancelAnimationFrame = function () {
3 k4 }- B: ?5 S7 c        return
* W$ V% U/ _+ x' L( e: @    }
3 {+ h& z: [; D# C} else {
    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
6 c! q' T1 u" c: L: |% H/ o& o    let prefix
' V" M/ J, t0 @% o7 O% A. u2 @    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
+ J- F8 z8 h# K; i, W0 R( I    for (let i = 0; i < prefixes.length; i++) {
) \: r5 Y+ O4 O3 `( j1 M. g8 D  J* B/ |        if (requestAnimationFrame && cancelAnimationFrame) { break }
* m$ z# v: N. T! T& K2 Q( R0 ]        prefix = prefixes
- w! V0 I* C6 c' H- \" l: e        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
6 _3 U) `# q6 H& O    if (!requestAnimationFrame || !cancelAnimationFrame) {
: i. Q- E6 C& O0 l4 _  J! t* `6 G' w        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
* C: i2 C" G& T% B' Z# B+ H4 W            const id = window.setTimeout(() => {
6 B0 u9 q( p# o7 X, l; I) E9 ~8 U5 |8 c$ N                callback(currTime + timeToCall)
            }, timeToCall)
0 c1 @: E; Z1 [            lastTime = currTime + timeToCall
9 U; W- J% h+ y2 c/ I  x, I% A5 s0 F            return id
        }
6 Y% X$ h/ F: e4 W
        cancelAnimationFrame = function (id) {
3 r* K2 q% s1 X) l* Q! ^( O            window.clearTimeout(id)
        }
    }
7 [1 W, [/ N9 l2 G0 N$ D: R}
( i' j! \5 R" V: D# n
export { requestAnimationFrame, cancelAnimationFrame }
2 r4 v' N# r' G: f5 K# J( |2 _
, L$ S4 g; b. e; u
1
' i1 D$ X" _: f- y( ]' g* ~2
3
4
  m0 B7 S  R; a) n5
6
7
* m2 m( L- y- r' s( K: b/ l8
# Z/ l2 R' M# e* h0 f$ l9
10
' P/ ?) _! ^, {6 j5 R; N. }11
12
13
+ Z0 L- o* D7 D% t( F& C14
15
16
17
18
' M+ m4 L$ p7 Y" e4 w4 c6 a19
: z2 y: p* b" I7 M: W20
! g3 x9 z, d/ k. G4 _21
# m) }8 A9 a# b; A, w2 H$ C  M( o22
1 G  V" a+ l7 @' E( g7 r  J' e3 A23
24
25
26
27
3 C0 Y5 S$ N! w% G  ]28
5 S; E  f9 ]- Y, P# r29
30
* T* t4 E- M; H" s: w31
32
( V' o% W" S7 `& F33
34
35
/ e8 e! `4 r! I* h1 q6 i2 I36
( a4 h, z; @. X$ T5 r4 N37
38
; j- b9 s" B& C' d: D39
8 h' f# L- T5 _, a  c1 U+ r3 e; d40
41
! g2 \7 Z, g4 P2 O" W; c# J9 |! R42
) D& b# s% r% E# J9 E8 t43
44
, U+ h4 H& j9 ?0 F! V. Q5 I: x45
/ F8 e' j: k+ N8 j* y$ r46
47
48
# W9 F! L6 d' S# X* R4 R7 OCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
, n1 x- p& U. e4 S9 u+ P
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
6 W7 }" x8 F8 G" v1
5 b$ s! R: A6 |9 o! ]$ F需要接受的参数：

const props = defineProps({
! K: V1 N6 }- I3 A" b  start: {
    type: Number,
0 M! h! b1 z6 N, C7 c9 Z    required: false,
& q% \! F2 P$ n    default: 0
  },
  r3 G  t7 V' _0 r) p/ Z6 Z  end: {
    type: Number,
    required: false,
! x: Z5 x9 K1 K7 U0 O    default: 0
, g; j# E" \+ i5 _) P  },
  duration: {
, C  D+ ^  L. D$ Y: u. k& q, f    type: Number,
    required: false,
4 D3 N* i7 o. X3 }    default: 5000
  },
, Q' \9 }0 \, u9 }" J9 ^  autoPlay: {
    type: Boolean,
% z; C9 P. U, m" _! N6 q6 X    required: false,
    default: true
  },
  decimals: {
    type: Number,
    required: false,
1 O1 E% N. M: K0 A" ^' W    default: 0,
    validator (value) {
      return value >= 0
    }
  },
$ c/ g. |- U8 N2 g7 Q  decimal: {
; t- a8 Q3 G' R2 y. W0 u2 k, g- p$ Z    type: String,
    required: false,
    default: '.'
  },
0 S+ [3 P" G6 t8 V4 [  separator: {
    type: String,
# Y# @+ }8 N# s; |    required: false,
    default: ','
  },
2 m- \3 a! g' |2 ~) ?  prefix: {
    type: String,
1 H  Q0 y+ t$ A$ m, g    required: false,
" f/ Y6 [1 @" D$ X9 \- a    default: ''
1 }: [! V6 t$ W7 e' X! x  },
  suffix: {
    type: String,
    required: false,
    default: ''
* l* I- l  ]& t5 ~  @9 P$ o/ h% Y  },
  useEasing: {
& G. r# Z6 ?5 T  p! v    type: Boolean,
    required: false,
8 L% t% U' _2 g7 ?    default: true
8 v" b+ F+ E& [/ L6 l  },
  easingFn: {
  K" `8 h# \- \4 V* D; \" I$ i    type: Function,
% f# U# O6 C7 e. T1 c) D: R    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
})
7 i  _% K9 `) A* g2 |

& B* {* r1 W/ F: U+ b3 Y& i( M/ `' h1
9 a/ o) S" c7 p" j6 U8 U2
' l0 c" z  _( M8 Q8 ^3
. y/ r" B) y( ?6 T" Y5 a" m1 r4
5
6
7
8
. E9 y, A- D5 z. c0 I1 ^9
' C9 r! n9 I- v# s/ [9 [# @10
8 o: \' a" s2 H, f& W5 n. m: i11
9 Q5 t2 p2 w" ?3 m# E9 b- {, [12
13
# o5 x' C* ~% P  \9 G1 F6 P14
3 x* l2 ]4 @2 T. n0 T15
, G0 K! P( i) h6 Y6 K9 k- D16
17
0 ?5 C; N: j  }  C, s18
1 i7 }+ L( J. Q9 v3 o7 x19
20
- W2 J/ B! A5 w& W4 u21
$ [5 k7 H; @4 F, D22
23
- _% @* E2 N% E0 O! a) {2 b24
% L8 e  z  S# u! a! S2 k4 C25
4 m/ v$ ~' J' u* H8 @/ H3 `26
- f! c+ B2 S  q+ o+ e' H6 {6 `27
! Q6 c  {6 @" F5 e2 e& Q8 _* L28
% O! L3 z6 J2 F" Z1 q: c; x29
30
! A; g/ O, N+ X9 O' O3 W) Z; S31
1 V4 G2 L2 w& k$ U. j( S32
33
34
; O$ b/ ^) S, `2 G7 g& E. R, _4 \35
36
37
38
39
6 I  R! e9 @( |+ P40
3 X, L* I" e+ \4 u6 p2 j/ g41
2 s  ]% I  U2 S$ B3 Y* j0 w42
  G: u! k) F2 X' |0 Y2 @* ?43
# W2 b9 E( R4 i% m* p& v6 `  c( T$ q44
45
46
: R3 h8 O" _5 r; W/ d4 C% c, J; _5 {47
# v- P, h" @+ Q; u$ M. E' A, Z1 p48
49
( x5 v4 U7 S. a! y! }50
51
9 n( u& N' J. j6 k" c; ^52
53
54
55
: j* A6 r* X2 T% n' }56
57
; k* c5 n5 P: R, g* M58
) G2 y  s5 T2 j! c59
60
61
62
& {% W1 l) ^2 h7 B, O- x启动数字动效
5 ^' b% o$ J; t" V
const startCount = () => {
) l% h5 |" p$ Z  state.localStart = props.start
. m% T9 ~. u$ m  Y& i  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
1
2
3
1 u& T3 W9 h# o4 y1 e8 r4
& }  I# s7 R4 r" s5
6
% N( y8 z# U4 g5 {! T) g8 o2 H. q( e7
核心函数，对数字进行转动
" X: }' _" @9 o* P0 S+ i
  if (!state.startTime) state.startTime = timestamp
7 m# I& R7 ?. K# |9 Z/ v1 {  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)
) C9 {2 ~1 Q  }6 Z    } else {
- V9 H2 b& w4 x/ i: E1 t4 E      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
* a  g: }3 ?2 J+ C& u3 h5 ^  } else {
( o$ _2 x( F) R+ l) m$ H    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
0 E9 o& s% R& i/ C" c    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
7 v- b/ H! @. w) B" u/ L8 m    }
  }
  if (stopCount.value) {
9 d; h2 I( n  d- f/ v+ q! M0 s1 V. Z    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

6 J$ \" Y2 b7 w4 h2 c$ z! h  state.displayValue = formatNumber(state.printVal)
8 J2 [/ X3 m* d  if (progress < state.localDuration) {
$ z/ I3 T- x3 H5 Q# b6 Y    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
}
& w  J7 D! l  x& z3 O  x( g
9 p. M' M* R, \- V' W! i! [$ ~
// 格式化数据，返回想要展示的数据格式
2 n3 A% w9 J: S7 Y3 Zconst formatNumber = (val) => {
  val = val.toFixed(props.default)
! s8 v  f7 e1 H7 O- \6 F  val += ''
0 |2 }5 V6 L* a4 Q# J! ~7 u  const x = val.split('.')
7 p! N* P- U. R$ C0 x  let x1 = x[0]
5 T6 t  B% c! m) ?# F  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 X* y/ v1 v/ {1 q, e  return props.prefix + x1 + x2 + props.suffix
  e- l5 J( C% D8 t( x}

1
3 R5 s5 y- l# I2
3
$ J$ U5 q+ G' l/ ^4
5
6
7
8
4 B6 l# o7 Z4 I3 H! H7 Y- t$ q9
. t4 o5 u* i+ y: Q! q- F, N+ M10
& B  l, S- \& i- V; h11
12
% ~. S4 u# h5 m! o9 n  E# r13
14
15
16
17
% y+ {, Y! D" g! K18
19
20
; `; F4 K$ z$ j) W$ w- j2 A21
  B& m  g1 o" f22
  y( n& v- r5 X23
3 _4 X# v: o6 Z) R" P24
; Q' @) ~3 _7 Q8 z25
" M) d3 q, ?4 A3 k, y26
27
1 s, M8 q# q$ b0 d8 i28
29
, K9 e+ i3 y2 h% g, m' q30
1 ^: V. M1 o2 o: Q* W: D31
32
4 `# l% Z1 x- @" i- K( T33
3 P/ c. I9 _' F5 r0 O; i34
35
36
37
38
39
+ d; |$ E7 |7 b0 F& x/ C40
- `/ [+ [6 v  x; X# B& X41
42
8 R- t& g) X5 @7 a0 `7 T43
44
' ~5 M% R1 G# {( y6 W45
3 [; N9 w7 L& Q; {& E46
47
% l; ?- I7 T# Z. H48
& z3 N6 `/ Z* o2 c- t+ m取消动效
8 K4 F$ J- W6 p1 Z) L
// 组件销毁时取消动画
$ J, ]3 R# O0 lonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
( D5 {/ w1 B% x9 |5 v. _( c1
: z  ?6 G8 D; p, ]' Z2
8 c" C3 a1 O/ m  \3
) @' T- X# @% P2 O8 v0 V4
完整代码
, T8 c, [# K& f% \! {- O% A
<template>
  {{ state.displayValue }}
+ P0 o2 K, y7 O; U8 J1 T. d</template>
! W0 G4 \- E0 b
% U2 t  K* O; x7 u% u  X<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
/ b" x7 [8 z' N+ R' b* b0 cimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
const props = defineProps({
  start: {
  ]. {6 S: x# S  Z7 l# n4 i    type: Number,
    required: false,
% e$ T- a9 W* k! t5 [5 U    default: 0
2 q- S5 n( u: s! `$ {% d  },
1 i3 q; S7 F( P  ?- u( C$ D& l  end: {
! [1 q. E+ o4 }9 M, M( Z, k9 A# f    type: Number,
    required: false,
) L6 ^  f4 _/ ^9 W( V    default: 0
# q7 n# E5 B' v& K- `' O  },
; G2 n1 R' {+ X+ J0 t* R  duration: {
  s0 I. i! Q' u. [    type: Number,
0 W3 ?6 S1 Z( `+ P* j+ S    required: false,
    default: 5000
  },
  autoPlay: {
9 p; V2 L, g$ H  |- R* X    type: Boolean,
. H8 Y; g; f! `  c    required: false,
* T8 s# L% U, h5 `% K    default: true
  },
+ `2 Q- Y* C7 i( c4 G6 I7 X  decimals: {
    type: Number,
    required: false,
0 q& m; d2 X9 T5 p1 K    default: 0,
8 f9 w2 [5 D4 N8 E& L    validator (value) {
      return value >= 0
: f: n; A4 c8 F3 I4 S- H/ r    }
1 a3 `. w3 l* `' V, T5 V) t  },
  decimal: {
* f& ^% g+ Q0 t+ x2 T  m- e3 D    type: String,
    required: false,
7 C- A$ Y5 d' T; J! G) D3 g    default: '.'
. o2 P" B% f! i" T! I+ r  },
* R/ [: Y4 Y% t: x8 c) _  separator: {
4 S. `9 J; U+ C  g" g5 x- K2 F    type: String,
& S/ n1 [5 o+ R) `) I; W    required: false,
( u. C; q: s% }* G8 R( n8 S    default: ','
% ~% T7 Y9 j+ f! k5 e  },
8 y! E: N5 g& R/ Z! G  prefix: {
    type: String,
    required: false,
* v; z& w/ g+ H/ F/ R6 J    default: ''
  },
# u7 F4 @4 @5 f# E4 }# E4 O) s/ M2 `& [  suffix: {
7 j5 Y  {% B1 ~# o% h( A0 L& `" l    type: String,
5 A7 g, `  K2 P$ [8 x- H: l: U( v    required: false,
" D+ @" K. e4 Y5 J: @    default: ''
/ {9 f! N: W2 x8 H1 L8 U7 X  },
( Y  V& Q( I7 F# |7 |2 M+ }  useEasing: {
+ B0 J! y% ^- O! N    type: Boolean,
8 {% p0 ]; E4 G% a* X- Q6 |7 j    required: false,
, W( ^" g: q  f9 ^5 V    default: true
  },
$ a" B8 n! t7 Q" e8 a: A( m  easingFn: {
; k/ {2 j* b6 M9 w    type: Function,
    default(t, b, c, d) {
* a* r+ p4 u- M      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
( v4 M& \) O" m  }
})
; v4 [! m* T$ g+ ]( i, ]$ b
6 i9 M1 S' ~& g' v, y! [" ?. @$ a; Vconst isNumber = (val) => {
7 ]% x" l( p" j4 ?4 r  return !isNaN(parseFloat(val))
  E- r3 M* c0 N. v' c1 V}
4 B( T! h& G8 N% m
$ j+ l9 a" o1 h9 o% U+ x" I// 格式化数据，返回想要展示的数据格式
+ \+ H% U$ d; qconst formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
+ R: H* C, H/ N& q  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
9 w& \( X9 L2 w8 A% j# L6 N4 |  if (props.separator && !isNumber(props.separator)) {
3 u" e3 c1 Q5 |8 R3 l/ t& N: R    while (rgx.test(x1)) {
+ R9 Y4 P% t! @8 Z0 R      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
) A2 @& O+ \: \# C; W    }
" `$ T, D4 Y& F) G* ^  }
6 L0 U) u: T. v, c7 ?  return props.prefix + x1 + x2 + props.suffix
+ D3 k8 o2 O* W' q! q}
1 z4 q6 I3 q1 v$ u* r+ Q
* g" g+ a' a) |5 Y& q/ R/ C' O// 相当于vue2中的data中所定义的变量部分
const state = reactive({
9 d* ^  M* j( \0 {( w% g: P, r4 J3 n  localStart: props.start,
3 S1 @# A$ M" R  displayValue: formatNumber(props.start),
  printVal: null,
  paused: false,
  localDuration: props.duration,
  startTime: null,
  timestamp: null,
4 n( N3 J. z! ~& h6 q  remaining: null,
7 |2 c$ ?9 b6 o# d6 w  rAF: null
1 E: X& [$ C) Q, J) B$ T) Z})
; u$ c0 l' H5 K9 S" |
// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
, n3 L* k+ k2 e3 x% E7 ]0 I  return props.start > props.end
. q2 y( @( C5 Q9 ?& ]2 |9 V% P})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
2 T' c# {! R8 ]8 m( W' B5 h7 hconst emits = defineEmits(['onMountedcallback', 'callback'])
+ F# V4 @  u6 {& H
+ g$ y( q! _: y' @const startCount = () => {
  state.localStart = props.start
1 @8 P" B3 X- q. R; E2 z  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
( p# q4 V* Z0 P1 g9 A' V% F% c}

) D6 a9 E. x% y' m* lwatch(() => props.start, () => {
  if (props.autoPlay) {
    startCount()
2 \3 B- o! o1 p: z  }
})

0 M6 `3 }7 L+ ^  Q5 C$ Rwatch(() => props.end, () => {
  if (props.autoPlay) {
; H8 E* ?$ }, K* |    startCount()
! w& A( u. v" r3 K: s6 f, t( Y# ^  }
})
# M9 U4 V! i; a. ?$ \' g9 y7 _4 o$ M// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
" v% `4 P0 _4 L6 a- W" G    startCount()
0 ?, S/ n. S# u% c& d  }
  emits('onMountedcallback')
})
// 暂停计数
: D2 H; Z. |, ^, dconst pause = () => {
  cancelAnimationFrame(state.rAF)
}
// 恢复计数
const resume = () => {
  C0 p% E' F3 \  state.startTime = null
) v" K+ P; c4 k# ]5 W* Q  state.localDuration = +state.remaining
# R+ f3 ?5 ~2 `' m" K; T  state.localStart = +state.printVal
1 s+ M5 h+ n7 H( H4 r( b  requestAnimationFrame(count)
) i& h. {% S- b$ o2 C1 u' D}

const pauseResume = () => {
# x+ Y& i; K2 B  e  x' {' V  if (state.paused) {
5 [) ?1 o# w! f6 {5 o    resume()
    state.paused = false
  } else {
    pause()
( q2 u  m5 ~0 f2 ^3 Q    state.paused = true
7 m/ B$ N1 ]; o  N3 j  }
' e* U- _( A+ M0 }9 a0 q9 A}
  H# _6 D. r, J0 E4 H
7 V/ n0 A6 ?1 o6 c! q% nconst reset = () => {
0 G3 K% G9 J, ?& Y: S5 t  state.startTime = null
  cancelAnimationFrame(state.rAF)
( U' N0 X( d& y( K1 @1 O2 a' w  state.displayValue = formatNumber(props.start)
}
7 y# e" }  N3 j# [
9 G  [  h1 A% h9 C* t# u0 G4 Rconst count = (timestamp) => {
: s% D; d# M6 z  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
) H+ N: N- L6 U8 g3 {  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)
6 f8 z1 |; V9 d: A1 U  y    } else {
! U9 f6 A' |% Y4 q      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
# ]: r0 O) _+ u( Z8 V( M4 D& Y    }
% e* Y2 @% G3 ~  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
  Q5 d! g% v+ k5 a0 C0 r- j1 b0 N      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
9 P: q6 m- ?# F/ R. x3 J# C( a  } else {
  I# M/ \3 D8 @5 M+ i3 c% ^2 D    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

# }4 j! L: R+ z* G$ k/ _; {) I) u  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
- A$ [0 _2 _% j0 B    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
3 C* s: n5 m- Y. n' ~}
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
$ H# I* Y' o" r! O" }& D, u})
</script>

9 g- k) N3 S  b# |4 x. M, d1
2
4 I3 M2 Q/ F; H7 l) d7 c) l. l3
0 H, _" F: a- C7 |4
! U8 d8 q9 |2 K/ u# f5
6 O; u" Y" y0 H6 ^( E  \6
7
4 v2 m. v* }  ]1 |0 r8
9
10
11
4 X5 a& v. M5 F9 h12
13
8 [4 g9 E: V: x! Y9 p14
15
16
17
. j0 f" s# p0 J& W4 y/ W18
8 B7 R4 O' J2 {5 x+ T19
' d7 m; H9 \& W) l5 \; `7 t20
21
+ n5 n" Y6 b1 ]: I, ~" \22
7 Y: N7 l3 ^# `5 t( S23
24
* P' i) X" U; S; \* V25
$ |6 c4 ~" L7 e) u26
- x" G( ^0 e, ]+ H# O( {27
1 i; c8 A' f2 ^: ]7 ^0 m5 U28
) n; e: y' i, O( D" N; b! g# ~29
% ?) C6 l* D: p) u0 o/ o+ W30
  {& Q: K# u9 t  |$ {9 g31
- h! l& ~, A0 }' x2 q2 @& S32
, c2 L+ t  `: c8 Y33
, G& x; E8 p8 s- P1 w8 O34
9 x( W* M6 R6 K# C$ _7 U35
. z# k' K7 B5 @, g6 s9 {36
$ }7 j. x1 b$ _0 q6 H37
38
% B" Z6 S# e8 p0 |8 y! u1 B$ w39
2 V; ^1 `! s/ K5 M% {40
3 y0 w! k, L) o) ~, X41
( P# q* W3 ~1 U. E" u42
- F2 {* \7 |3 ?$ f0 X+ @& N43
44
8 _1 o4 u; f; y' F$ U( ?45
8 }4 y3 ^% W/ T$ P  f4 j46
47
- s7 c6 s1 r: S1 h9 F/ |+ E48
49
50
51
" C  Q3 L; O5 e/ t52
. U5 j9 a& O1 c53
54
* x& P1 e7 N& C! l55
% s8 L# x% k% s. d; W56
8 d, Q' u7 B; S9 ~2 i; n57
* x5 E6 ?! l! r" n) L58
59
60
6 o8 s0 z: c9 l1 B61
/ t; T2 b7 B9 p8 f4 s8 r7 @2 {62
63
64
$ I4 J0 H  g* v* ?7 [( S65
) J+ r$ l* R) L3 ?66
67
" U$ b5 `; y  |# `! U! c68
' S- p6 g4 I* c, c9 Y, u69
70
71
: M4 y* h. i- p6 j2 O9 q72
6 C2 ?  V# K! J- _" z6 U. k73
9 O: A2 X: ~1 N/ e74
75
76
% f4 U, v) @$ G, m+ B77
78
( c# O5 P* [8 V; E* v( v! B79
80
81
9 {+ S* {1 W5 I9 K; Z' _82
) j. f* F- ]2 Y1 c8 G83
' F: _7 E. U# w9 l" N84
85
86
87
! r. a4 m6 p* P: ?- [88
89
90
7 `0 o$ V$ G* ^2 t8 P91
92
6 _; H: Y. e6 N" d' t93
94
8 p3 V+ G# m" b4 t' J1 |  X95
96
: @, ?, o2 Y& m( X97
98
) b: j9 s! _, i  V, S; g3 k99
5 \  z+ i7 D$ [9 M  x100
* _- f8 ~! z7 R# d+ Z. Q1 F; Q+ V: D101
  d2 R) X9 S$ [5 _0 Z9 z6 k102
9 A4 S3 [7 U) E* a* p103
104
105
106
107
108
109
  o8 A5 Q+ h4 a' F% c0 ?9 A110
2 k5 H/ L( D/ y9 a7 y7 o111
  J$ y7 `$ G5 C1 n- n  l112
5 l7 j1 i6 ?( O113
114
" X; F) S# Q: p/ a6 l8 v! Q115
116
117
118
119
120
7 t( G% v( }9 Q; D1 V121
122
123
124
! i+ M9 }1 ~6 B3 Z$ e125
126
127
9 [+ |/ Q/ c- W) q: E; d9 X128
3 P. R' m4 ^7 H129
130
: u" Q5 F% n) @3 [2 G4 M4 S8 F* u131
132
4 A3 [+ K' b2 N133
2 h! ]4 z7 q3 C& _  r/ @, {134
135
136
137
) e7 {; p# G" l138
139
140
141
142
143
144
145
5 G5 i7 T! S; d9 W; b; }0 l146
( ~" J( N9 U: y  J147
148
149
150
151
152
153
$ D5 E" w# j0 G" Y154
155
; C& ]5 n; Z! U  E6 U. W156
157
7 t) w/ l2 O2 ?) O158
159
160
161
' I  B9 n# }1 R5 `2 d& }" M162
163
! h- y- \; B) z164
& r- ~4 _, e0 |) E165
166
7 M: P6 N4 ?; U7 `7 p167
168
6 u0 }4 E5 Q1 o( Z/ M; s! r169
170
4 R4 s5 Z" l9 o5 |  j4 m171
172
6 H3 x5 b0 A) R3 _/ ~) m, f173
# ~5 l8 n0 ^+ `174
1 P9 \9 V+ f) D9 ^175
+ \5 {! e# T7 j1 H/ P( x176
/ K* Y: i5 Q" \/ L  j0 ^, n177
178
179
180
) k; }' l$ L  m181
+ T5 G- k! z2 p  p! u; G+ p; |182
- O5 y. p" }. c- _! ?5 B6 ]/ R183
184
185
186
  p0 h8 V- A" G3 o. f. p9 c187
188
+ C+ A( v# Q2 z8 C% Q& H189
: Q1 E0 y% F3 H190
% V  G; ^) e: m6 M# [191
192
193
( G7 \' Z( o( F5 ^' A2 }194
195
$ a: Z5 z7 y0 z1 S5 [196
, N, B3 X- p6 `! L# {197
. ~) J# B  N+ B  ^4 I198
199
: V' |' ]* Z* N+ s' ?0 _6 a200
201
202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
2 R: B( V# s2 W* a$ z. s) l
demo演示
- m1 l0 u2 [/ d% c后续的线上demo演示会放在
: B% |$ A0 t. _9 W0 Qdemo演示
) h4 q, x; d4 L1 [$ t( R完整代码会放在
个人主页
5 S$ |: R/ e* t! o& T! N
1 M- y* g' m$ [- M, y9 y; n希望对vue开发者有所帮助~
: @& H& ?4 o% s0 k. k" e3 |, {8 U
个人简介：承吾
工作年限：5年前端
地区：上海
+ a$ D/ U# M: s  i$ x个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
/ `: E& f' O5 g  u2 L) G
: Y# q0 X" F6 T
0 H6 H2 q- k6 o9 Y

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