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

杨利霞

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

* M" F' P: ^5 |# T8 G前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
7 U0 Y- Y$ `7 M. s1 ^# A) UTypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


9 H0 D& X2 M) M思路
' {3 _0 b8 ^% C% p4 T! u" I使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

. E8 \- a4 o/ [* X% m+ Z8 q, U/ V7 g文件目录

8 [- w! z1 p+ `3 n
使用示例
<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
5 [- V+ |  b/ {, D :autoPlay="true" // 自动播放
& R* Y# h: r" J; T' m :duration="3000" // 过渡时间
6 m1 `2 f) U/ w5 W: t- `! _' ~# U prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
. @4 y5 N$ _: g. h0 b. }8 i) b, T6 u />
, S9 w) H! N$ K4 o% f: F: Q3 V+ J) P1
$ O# Y* w* P1 _) C; e. z! R% Y2
3
+ m. _) }- V" D# ^; X4
8 ~5 q5 B( t9 [& x$ C5 J5
6
9 Y2 v7 |5 I, ^, J: B! Y7
8
入口文件index.js

const UILib = {
  install(Vue) {
    Vue.component('CountTo', CountTo)
0 G" K1 h3 p! i3 Q( k8 C  }
}

export default UILib
  J7 A2 i# V/ M1 c3 e, ]: k( {
1
2
7 P/ ]9 i; G+ c, ]; m3
# r* T* K$ e% w6 ^7 y% E! B* ~3 K4
5 Y6 l; \4 t' s" r3 T5
3 r* U( v) {5 u8 V: y4 H, ^6
. m; w$ @0 U, x; S7
; o  P% u- S& I8 {9 [+ r8
9
( |& g) [9 G( a  C  r6 I+ }; }: W& xmain.js使用
' r* G7 T8 q% ~, cimport CountTo from './components/count-to/index';
app.use(CountTo)
1
1 x5 P2 F2 ]6 K1 N0 F2
requestAnimationFrame.js思路
5 T8 o9 y. k: u  ?  ]9 P先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
" K7 V) f3 O* |如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
! a; U: y3 {$ C. b  ]+ k0 d导出两个方法 requestAnimationFrame, cancelAnimationFrame
' H9 t. h  h2 h  ]) i各个浏览器前缀：let prefixes =  'webkit moz ms o';
. g% x9 G! l; U" T判断是不是浏览器：let isServe = typeof window == 'undefined';
% z4 N+ }. F* H0 l+ `6 x  h/ ]& U增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
- o& U" X+ R$ O; H        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
& ?9 z9 b8 r3 O        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
: b9 j# }* X8 v! z
  //不支持使用setTimeout方式替换：模拟60帧的效果
' h9 ~# E& s0 i8 {7 `3 ]3 f. S  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
" s( H+ E9 c* s, |* t0 v5 U    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
# r0 ]& K% |2 p; A; w8 O            const currTime = new Date().getTime()
, `6 k' ]5 N0 c1 V9 h3 `6 o            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
5 a& s7 H$ G' Q1 Y  B2 ]$ }            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
. B! t. K* y1 z0 h# s2 e  s            }, timeToCall)
            lastTime = currTime + timeToCall
1 ^4 Z8 L: H8 V! n' ?* u& u            return id
7 I/ C9 V3 N' U0 X8 ]        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
    }
7 c" g6 {. _9 N6 f' t
1
2
3
4
5
% ^2 W% w. z& i6
7
+ n& `7 P0 p: L3 c9 Z8
" ~$ h" a, N( ]0 D/ e  t6 p$ L9 Z9
( ^( u4 T% W$ @3 X7 t10
+ ^, S% f; \3 @1 _11
12
13
1 ?7 u( Y, G/ h; A14
15
2 W- j  `+ a" Q( D16
17
18
19
9 D, x$ U. H4 V% ~4 V20
21
22
" S# O9 z7 W( \23
, _, b' ]4 n% N0 e! L24
) d+ W% N$ |2 U/ C8 _# G, l25
* @' r7 e" H5 Q6 w4 Y# a5 u+ f26
2 _) E5 E% m7 Q+ o) Q27
4 p' y/ v2 N0 _! T6 Z3 u+ N28
29
& t+ T4 p. G# W& q6 r, A# L* v30
8 S# l4 E  d, o* |2 o4 B31
32
$ D+ E' [5 D) g4 R8 ]" l完整代码：
requestAnimationFrame.js
8 j9 C6 G2 R7 v& z) ?- Z
let lastTime = 0
( B* ?4 B& j. `  {" J7 V# fconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

let requestAnimationFrame
) M7 S9 b5 U) W) b; ]let cancelAnimationFrame

5 K) n( ]/ K, G0 a// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
, [4 l$ C, t! l: n1 Iif (isServer) {
6 B4 r  t% E) Q0 M+ {7 l    requestAnimationFrame = function () {
' |9 Y: x2 R, l5 J, E/ F" F        return
    }
    cancelAnimationFrame = function () {
        return
& L2 y1 [& w* v6 _5 S    }
" L% I% O' O0 k} else {
    requestAnimationFrame = window.requestAnimationFrame
8 l7 E% k1 w/ g' v6 _+ F8 v' T    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
4 _; }/ ~) v6 v) d    for (let i = 0; i < prefixes.length; i++) {
$ Y8 Y! m! e% x( q# \, }, @        if (requestAnimationFrame && cancelAnimationFrame) { break }
: ^( m& R' G' A$ }# f! h9 s4 ~8 H0 `        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
1 e# o. a; f; s    }
7 i" _5 O5 _/ I: W+ i% W
8 E8 z$ z; ~. v& E; K" i    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
: C: G- f* l2 }3 a' v1 D            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
. y( w4 V. Z: h4 X: o: n4 }: `            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
) y5 p) A) P. D% z4 a0 W        }
! K  C$ z3 {9 O' u" G' j( x
) P" H0 o$ D. n8 r& B: M        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
3 Z- J# V* N1 G! O1 A4 [. X" m0 `        }
    }
& ]2 h, F! y2 K}

$ [, b( s( `3 u2 y: n+ ?* M2 Gexport { requestAnimationFrame, cancelAnimationFrame }

3 @8 \+ e" p: [- }: c8 t
1
& ]/ a; a3 I9 q9 c; j7 c* ^2
3
+ L& n7 ?8 j0 y0 J" V4
  u( I$ Q+ N# |( z' m* s4 R5
5 I" U7 p; K9 Y  R6
' X9 N2 L! B$ g1 C; U7
8
9
10
11
8 r# t+ b' ]/ K% X9 f12
13
0 e+ e6 b. @, X& I* i5 M) _0 k14
15
16
" X: c  N# [* A- N! {2 Y17
18
19
) M; ~6 I; }1 Q20
! A+ r2 `# l4 }21
5 @* M8 s% p6 {, V3 V22
23
24
25
26
2 U2 u& ]/ r0 V0 r27
28
( A) Q( j0 Q$ P$ R1 M6 B29
30
0 N: d. }, m2 X% P. M0 Y! J9 u8 W31
32
1 p4 |; L4 w9 G8 \0 t33
34
35
! W/ {3 u0 q2 j7 T& l2 z9 `2 C36
37
38
" H6 K* D: O* {; {39
+ q; _$ w! m) w4 ^6 u8 ]; Q8 ~40
1 i' Y  i% _3 P3 h. ^2 A41
2 k' I% d& g9 s' U1 B) E42
5 d' Q1 w: u* K$ U4 J$ E3 i43
44
45
8 F/ r2 F. _' `9 y* E6 X! g. r46
4 w; X/ I1 U# h9 E8 ~" M7 Y( k: }0 a47
2 A  w! \; T: P1 P# }48
CountTo.vue组件思路
  u) X' M: g* M' E8 ^4 `& O首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

  a1 K6 F1 F' Y( t3 B2 p0 {8 R引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
" u% H- j0 N% v" N3 A8 U2 R需要接受的参数：

const props = defineProps({
' _& ~* A* f9 T- m1 G" e  start: {
5 v: I( s( ?, {' n. I: p    type: Number,
. b* J" V1 P& I! n    required: false,
; j' M& C4 k* @3 n    default: 0
  },
  end: {
4 B2 N+ \0 P  N$ x    type: Number,
) n( ~3 `) b7 w  G8 T% M" W    required: false,
  o$ g/ g( _: A- P/ ^. B" w    default: 0
% o3 O: e% G- E/ `7 F, e" f  },
  duration: {
* q+ p0 o) j  g( u, [    type: Number,
    required: false,
' b: h  B: Q: @2 ^& P/ g& [    default: 5000
  },
  autoPlay: {
    type: Boolean,
    required: false,
+ K# b2 H' ~1 P    default: true
  },
  decimals: {
    type: Number,
3 w" w5 z5 L/ B8 R: W* x9 n    required: false,
    default: 0,
- @) s9 j1 @: |7 ?+ r    validator (value) {
3 U* l' v- j1 n, n- e; C      return value >= 0
    }
6 Q# d! j8 v, T* d1 a  },
* S' f" c  [( O# I# k( `  decimal: {
$ Z9 C; O, Y# Y+ S$ ]" n    type: String,
    required: false,
3 q7 Z4 k, ~: @* u# G    default: '.'
) g+ E" d4 Z0 W( f) E7 }: c  },
( q) N6 V+ q5 O! }  separator: {
    type: String,
    required: false,
    default: ','
  },
. U) O# E/ v5 M' G  prefix: {
6 \4 A' f3 W# E' w+ h4 H1 h    type: String,
    required: false,
, J7 h3 T" O2 M. Q    default: ''
; s  U. W, X5 p" I  },
$ s  e; i6 F: V% C  suffix: {
# V$ M! l* G1 r. D) ^- D# c    type: String,
    required: false,
: X7 z% |+ G- d$ V8 n' b6 N8 s; e    default: ''
  },
  useEasing: {
) n0 \5 y" q: m; Z) ]    type: Boolean,
4 w" N4 t* ?* S    required: false,
    default: true
( Q0 k$ X4 M5 E  }- h5 x  },
8 b. e, R9 \! [+ }  P  easingFn: {
# P6 l( J  r, Z5 G) s! o0 ^    type: Function,
    default(t, b, c, d) {
# p2 |* M8 S- l+ X      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
0 e1 U; ^0 @3 \6 F. B* B/ J# G    }
& u+ D8 Z7 M/ a' @, z  }
})
1 c5 A- @# I3 Z; T% k
5 F+ p0 I5 a, V2 S6 r/ \9 |. q3 B
6 z1 j- ^) p# O2 M1 x( r. M! z1
2
3
7 E. G( A& p8 X+ t7 O: {! L4
5
( M. J* G* x$ z. G- b1 J8 n6
  S! u4 d) |9 ?- n7
8
( R$ h0 V! N7 j1 @/ x. w7 C9
+ U1 S$ f+ V* M0 z6 ]5 Z10
  E2 \8 N& x* M7 d2 i* u! P11
12
13
- H; e4 \3 ^) B6 ]9 e) w14
: D( _1 H! G$ m3 m4 b15
0 L! ~9 |8 D. l/ I& }16
5 ?" b) q* s# ]! f5 I17
" |& x3 V% c& S4 x( h3 r3 l18
+ |/ q6 k# c5 q8 v4 `19
: V, k8 u# ^" j+ A( d% E6 T20
/ H; D" |, z% g6 `) f1 R21
22
: O5 o5 |9 j2 |$ J1 v& }3 z* w. p23
# ~/ [0 P- a/ h8 s24
25
% {4 |! G) o1 _) q+ F3 E+ X& w26
# }, O# f# h7 `: t  Y27
28
* x# @' w4 R* n( o. c  }4 x29
30
8 u' I: x0 E& G3 _# M. X31
+ d; V' {3 ^1 u8 p2 I1 Q32
33
7 \+ R8 ^3 A4 d0 w; X5 K! w5 B34
35
$ J* a% ~0 d1 f& G" u% _36
. x$ u4 h/ `6 l" |37
; s( H/ ^6 v3 V$ w2 p# n: ~38
39
* S3 H( W0 d% v9 q40
% W6 Q% i! W) v9 p% o41
- n$ b6 d9 R7 Z8 K2 q/ J7 x- j42
43
44
45
46
47
/ O* D! v# V' e' K: {. }! O48
49
50
51
: B- d( F; w5 M+ a52
53
+ N2 v% N* \4 m: x. ^6 d9 ~0 o, t54
55
56
! B$ h5 n4 i+ d, c8 k0 l9 c57
58
3 l$ l) b" [, f/ y& T59
% }) X. r5 G( d' K) j60
" E" i' j1 c5 A4 q& i- ]! W61
, b- @$ U$ X4 Y62
启动数字动效
0 u( }  ]5 C. [& |
const startCount = () => {
+ m3 L0 p) ~5 R& {( R5 [+ ?  state.localStart = props.start
4 r  P$ {! g$ }7 U- S  state.startTime = null
8 K; k# o- q9 r. t$ M3 S# c  state.localDuration = props.duration
- R% t* u; h" r! \( s  state.paused = false
2 L/ y4 Y* ^  r/ R5 P& Y: [  state.rAF = requestAnimationFrame(count)
/ R8 e9 Q/ v/ A8 r}
1
2
" W! |2 L2 c6 N- M' R% D& K, E% L3
; [$ t* I0 V# m6 C! G! h4
5
6
# S" \$ m% r% y0 g, C7
核心函数，对数字进行转动
- Y1 }' v5 M4 \% b9 Y% {4 E4 F
: u8 I7 h2 V6 T' g% M  if (!state.startTime) state.startTime = timestamp
5 \+ V; b5 X) m" D. k# b  state.timestamp = timestamp
6 }7 P4 [6 l" C* m  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
' z$ E) h2 @7 T" g& e+ ~; H    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
! r. m  s2 ]9 V/ }      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
: V- e) p4 O/ a    }
3 u8 ^* q# V& @8 |+ J4 E+ N  } else {
, Q0 e! ~: o2 [# T    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
0 ^( c8 {$ I: f- ]7 b, C    } 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
' |& V" V. H% u6 Z* |% M  } else {
/ H8 \# j# f# \/ R/ O( S$ a    state.printVal = state.printVal > props.end ? props.end : state.printVal
  F- s1 p4 ?/ Z9 x  }
% w7 |0 \7 R; r1 I* \7 }% O
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
" P4 I% W1 G0 \8 V; {3 ^5 U    state.rAF = requestAnimationFrame(count)
  } else {
) U1 h$ q6 S/ g! O    emits('callback')
+ `. t3 J# `, x3 W+ [+ r) n  }
}


2 Q$ C: n& V" l! V// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
) o6 @8 v& r  r" _1 x8 u6 {  val += ''
  const x = val.split('.')
. N6 N( l, F4 X- }$ G6 ^& _# Y& O  let x1 = x[0]
+ u2 I/ [0 E+ ~1 K  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
1 o5 i% J% }. |& h+ x    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
' ]. \+ {; J7 I  M    }
: q5 w* C1 R1 K, v  }
  return props.prefix + x1 + x2 + props.suffix
}

; p7 g4 j0 k# r1 h! O, R  g+ {1
2
3
3 O3 a2 l# B+ @3 {" |) X2 ?4
1 K9 V' f& v: M9 g* h: G2 v9 y# d5
6
7
1 H8 M5 D9 d) |: ], A3 V3 P/ u# W8
9
% x0 l1 m6 ^& F$ o; X10
11
12
5 ], R5 ~" ]3 |. z+ ^0 u13
14
1 H0 G: Q" {& ~) x' T2 D15
" i' x7 q5 q0 |4 W/ R: K  k" W8 `16
17
18
; l$ m1 U, u! Q; M* K' X0 U$ S19
) {$ Q  r5 D( K  [2 p% |# [20
4 v( \7 i% y8 [21
" A9 D6 N2 ~# V  |22
23
( Z3 P, ~; Z9 w# O, _7 j7 t8 F& ]24
. f! _* d3 ^7 v6 {7 ~$ o0 u25
26
! l, q7 {3 ], ?$ e$ g27
1 l3 }7 Z7 V* ]$ w* ^28
29
30
31
3 X& I8 Q% h( A- K% P1 D/ `32
33
5 g! \0 l# q9 |3 z$ W3 J34
& t/ m1 H# X8 ^/ I" `7 }* B35
36
* G$ [, `: Z% U, X37
38
39
. v2 f/ D) d" U, \40
41
42
43
44
45
- x) p0 C0 C5 L& `4 K- f46
47
48
取消动效
. n0 ?) b( E/ I$ F4 e6 E) X# N+ W- k
0 f; C8 o3 \4 O& q6 m8 E// 组件销毁时取消动画
+ E/ x7 P8 `' B5 ^! s2 FonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
1
/ {' t: b- z" z" H4 z% s  ?" d. ?2
3 ]0 b; {, w" @! [0 m1 c3 f! t3
. p( e- g1 J, M# d4 h! I5 M; h$ f4
$ s4 [+ b$ I4 f6 t完整代码

% B( A' L: [% _1 c5 }9 Y<template>
6 @- r% L& a8 u  {{ state.displayValue }}
6 U% k# I5 ^+ A; X0 x' {+ @# G1 C</template>
; N* L: V! I* [* \- r5 q
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
4 ]( i, [  K+ w! Iimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
; x9 x/ d/ D+ B0 [) y& Jconst props = defineProps({
# a  B7 M* R/ z8 A5 a" ?4 W; T, n) m  start: {
    type: Number,
; V$ p) Z# X0 a0 q( {5 w1 v    required: false,
    default: 0
  },
# C7 ]& B6 z# @3 ?& f* t' w* M, K  end: {
    type: Number,
! Z9 g+ l- c8 Q5 B* X$ S    required: false,
+ T7 v( C; S& v! S0 v    default: 0
  },
  duration: {
    type: Number,
# b& U6 F8 x( ^( X& `. e& L; Z9 z8 u4 y    required: false,
    default: 5000
  },
3 S& Z# T- [3 S- F7 H  autoPlay: {
" ~) T8 ~4 d- C; n; `    type: Boolean,
    required: false,
    default: true
  },
2 Q0 ?6 y3 r+ x4 _3 X  decimals: {
    type: Number,
; j, V6 a: G8 p6 P7 {& M    required: false,
) c, }7 Z( B$ U1 |    default: 0,
    validator (value) {
      return value >= 0
    }
  },
  decimal: {
0 I+ \; M" \9 F0 U& T) [9 c/ W" A    type: String,
    required: false,
- W+ k( q% B6 q8 E' T    default: '.'
  },
# N7 W; |; b" T  {$ B2 [8 W! j" D- @  separator: {
    type: String,
& n0 _1 N0 ]' N( f4 D    required: false,
    default: ','
4 h- g  h* |. i  },
( }  a& C8 T9 a, L  prefix: {
    type: String,
    required: false,
, j/ n% A) e& f- K" e2 W    default: ''
  },
  suffix: {
    type: String,
    required: false,
# |1 ?# H6 Q2 q& K3 l/ v    default: ''
% C/ m; z+ W$ C+ H8 j  g0 t6 I) O  },
$ m& H2 I5 O& T% ^" z% L+ ]  useEasing: {
    type: Boolean,
& c+ D7 a. T2 a9 q$ ^# l    required: false,
    default: true
  },
) B- p0 ~; m) h  N) ~  easingFn: {
7 ^1 i" o$ d0 H    type: Function,
' u( k6 h/ k, c/ G6 i, E0 ~. C    default(t, b, c, d) {
2 T' m( J5 X2 Z! L- v  c7 ^! B$ O      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
. V: L# m' u) }6 f6 f4 H  X8 b    }
  }
})
4 m% X3 |3 T% B( }! }1 N
. v. g7 e$ P- M  v& w7 jconst isNumber = (val) => {
8 P5 n0 Y$ j# ~; E$ k" m: B  return !isNaN(parseFloat(val))
}
( w4 T5 E) x+ l
7 j0 w3 M+ H8 g9 {7 I  d// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
) z& D$ D6 K& f; i- J  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
$ C5 s4 k& E! n& T  Q7 x8 j+ y  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
' J2 v$ y/ g' p    }
  }
  return props.prefix + x1 + x2 + props.suffix
}
" j# P# D5 g' y
/ W" L) G* d! o1 k6 x// 相当于vue2中的data中所定义的变量部分
& U( [8 t0 @+ e/ K) N5 Jconst state = reactive({
  localStart: props.start,
: ~9 t& a. x4 F  displayValue: formatNumber(props.start),
  printVal: null,
1 [( X6 x8 }! u! W. T  paused: false,
6 c, Z! e8 j9 M( K9 N0 g8 x  localDuration: props.duration,
  startTime: null,
" T7 o5 L7 ]5 @3 K: G  timestamp: null,
$ u- _2 Q* [, T# _& J4 `3 o; u  remaining: null,
; q5 }8 O+ ^  K# ~  rAF: null
; n% S. j, j, @& b, z})
4 h$ ^. l3 U& s8 k
// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
})
3 A" A4 D  g( E// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
9 i9 G9 P* x% Nconst emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
% d* D: J; i  s) q/ p3 r  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
" O  h0 Y: }( T, t" q  X0 ~  ]( `. u  state.paused = false
" ?. w; ?+ S$ V5 y. E/ x" D- i/ W  state.rAF = requestAnimationFrame(count)
}

! F# ~$ o# t  H  H7 u. Ywatch(() => props.start, () => {
3 g5 U1 L3 z* U  if (props.autoPlay) {
    startCount()
. P* [2 d! t( d, w  }
+ M3 Z6 a8 h8 [( S- `& l  B3 v})

) d: O6 Q9 E. r8 b% B  M' uwatch(() => props.end, () => {
  if (props.autoPlay) {
" f" e. m5 g! Y4 Q    startCount()
3 @& T7 P% H) @1 B* D0 N/ j. t; L  }
})
9 Z. G7 g: v% n& _// dom挂在完成后执行一些操作
  \# W* F2 G0 `" konMounted(() => {
4 t- T3 d: g* R9 K" M6 G+ K  if (props.autoPlay) {
! ]# d4 u1 z/ T/ ?6 j7 _2 E    startCount()
  }
% q$ s2 ~5 l/ ~, C* O  U' N  emits('onMountedcallback')
7 K0 c1 ^3 W- |  R8 O9 t  t})
3 Q9 A) p& P7 _+ L9 ]// 暂停计数
const pause = () => {
5 c3 Q% Q) ^/ a' z( t5 J- u' f$ w  cancelAnimationFrame(state.rAF)
2 k- v3 a" ]( G* h}
// 恢复计数
" `4 d4 w! m, y8 g& }9 d- `const resume = () => {
% B$ N9 T  I! D  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
0 T6 v, |9 V( r. \+ n  V, ?8 a  requestAnimationFrame(count)
}
6 X! }6 m  M: c. k$ w8 H9 W
const pauseResume = () => {
  if (state.paused) {
/ z% u# p9 O+ t    resume()
/ N% X# p5 E1 A- B  N3 R0 E    state.paused = false
4 J. N8 A4 |0 E8 l) a  } else {
) I: o6 ]* Z3 s6 z' Y$ a! s7 [    pause()
    state.paused = true
  }
}
9 d/ X$ B( K- d
: o6 N; n' J9 b1 Econst reset = () => {
' l  Y( b+ e$ R% l1 R  state.startTime = null
  p! P$ A" V3 T( E  cancelAnimationFrame(state.rAF)
& w0 _1 V4 W. }/ {5 S% C  F2 u  state.displayValue = formatNumber(props.start)
}

const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
3 T: B0 E) m' R$ f( ^4 I/ l  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
" u9 b4 t0 t/ Y- N" H( d9 i3 E    } else {
5 _+ ?6 H1 L% ^1 l      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
- Y& E% X4 @# a1 v6 J) Y2 y' x0 Z    }
  } else {
( B0 \- n% ]& W& f& t    if (stopCount.value) {
7 w% i7 F6 F9 w- H" }/ m      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
3 D" W( e3 g5 q. ]      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
$ @! g7 _& Q6 S0 Q) ~  if (stopCount.value) {
% Q5 M# t- c% s8 ~) v9 Z2 G' g    state.printVal = state.printVal < props.end ? props.end : state.printVal
" T+ V# S5 e4 l0 @9 ?# I  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

+ }# N" U6 J8 S2 B  state.displayValue = formatNumber(state.printVal)
& a  \' |. h  y  W. E  if (progress < state.localDuration) {
* z( J/ B* B  R    state.rAF = requestAnimationFrame(count)
  } else {
; U: @/ }/ }! j+ f, [6 I" O3 f    emits('callback')
8 p  P" z$ Q; ]! ]- ]& f  }
4 \: L9 h$ ?; a4 t  X}
// 组件销毁时取消动画
  |$ R( N+ e& p5 e( O3 S& PonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
</script>

1
* n% r( E4 K+ G  W( y, m5 n3 W2
3
# H$ K8 Q( ~; M' K* x4
5
6
7
8
, a- [! ^- ~$ L. Z; h% R( v0 k9
10
11
2 A; D1 T: K: f# c12
13
14
, C. |% u% M0 i1 i9 c15
16
* N9 g0 y% _- T5 ^8 ]17
18
19
20
$ N, P; L; w5 w. [4 d# w. G# E2 X& N21
5 l5 m7 f5 Z- n7 _22
23
24
% m! A' h4 L3 {6 Q7 i25
26
; j* e  ~& K4 {; N2 S8 q27
, F" E& _& O2 g  n% c28
29
; p+ t. ^$ E/ b4 m4 h30
6 q: w2 B- W# z- b# ^8 @31
32
33
34
35
# a4 M( ?& e' h36
' g5 b0 P* M& z6 j! x' l37
9 G3 K& W* h2 A% k, h5 `* B38
39
3 p# H1 B  E$ v1 q; s1 M5 k# I40
3 W2 d: D& a6 I1 `5 ~/ x3 ?41
42
8 \3 w! `8 V/ |8 @! g; L9 D! m43
44
5 R/ z, r. G. U# t* Q- V2 O" x: ^45
46
; Y9 i( m) ?& G9 A& l6 C47
7 ]  g" W! c, B# Z- B: [" u48
' M  N" `' T1 e49
6 D- \& c, A6 w7 l2 l( i- L9 k50
51
) w$ c& o+ |! {; Z5 I9 R52
53
54
& q/ R. e: N0 x55
( ?6 t2 R8 |/ M) @; X* V4 l! @1 u56
57
7 A- P- F+ `* i- `58
- i- I' \: Q4 V3 |* R; Y4 ]% h# x9 a59
& }4 y1 U1 N) y- Q% m# s60
: ^7 t- r7 [# B+ a4 l) a61
62
5 i6 c( H8 m3 B, j, n9 C' q/ i63
64
0 u  k8 X3 _; ]# p65
- T$ Q! _' n1 k" i: I% o" @- [& P66
67
9 ?8 v& i% U. v0 _$ d6 X5 N68
69
70
% r; l4 t- H- |6 ~71
72
73
74
: v' X2 a; @- g+ V6 L75
76
77
78
79
80
7 H, H3 I9 T6 L, j4 B8 K81
7 {8 F% L. t' C! U7 s82
$ ?) g+ Y: u) i* _83
84
6 x; R4 j$ M, `( h6 e85
$ n1 ^! n3 e6 j3 ^. K! @86
87
# l3 h, _6 Z! f9 a* _* c88
89
5 ~! s( c7 w7 r90
91
" s0 }% @) e" S, h, `92
6 n* W0 E. H$ D. X0 E( M. K: |93
94
2 A6 u" H* K3 U95
96
97
; a  P1 z$ J# s. Y: Y  a98
99
100
101
102
; W5 b9 f( j) k  e103
+ ~1 T8 ]" U/ R7 N/ W( {  n104
* N5 Y$ S- e7 I' G105
6 T/ ?# Y, f, d' G1 @5 x7 @5 X106
- n  Y% Z; X9 x. l- J) i7 W1 B107
) l8 S5 r3 u& ^* N108
8 d- h5 @0 x! y8 T) Z' G2 h) j" S109
% Z: p$ o9 ^9 ?110
111
2 v" A/ j7 |: d- @8 B  N112
113
/ {' I7 p* j6 {0 I/ D" p+ ^114
/ u/ X; e7 C( R- Z2 [5 W$ Z9 \115
116
- z6 K* z" u* [# [117
118
119
4 H3 a+ b& B3 G; s120
) u, T0 A  v. w6 V+ N8 {121
/ |& n0 V& K$ K/ T( h122
' T5 I. g" j7 o1 R5 T" o+ B123
- b5 e- {9 k4 D3 T( d124
125
0 D, J; |- }# f4 F$ v; R126
127
; G# t3 a# Z; z" Z8 r4 d) g- b128
2 k2 y2 c* G7 D0 e1 n! a5 s129
5 \7 Q, z, r$ Z8 g) c+ S& i130
6 N4 y( z* k$ _) O4 e* A131
132
" Z6 A0 {7 x" W. s' v5 K: Y) q0 i% X133
- ?8 C4 T) B1 [) J" X134
  P# Q* b; k0 _: ~* j; Y135
136
137
" \1 j. b  y) L5 y* U/ \138
% L8 }+ `4 w" k' c  D. Y% \/ s139
/ Z) z# N' q! x/ d3 B. A140
141
142
2 s, I' e. M4 {2 s1 x9 q143
9 K! f) I/ h/ M4 z7 |: \144
/ E2 j4 I+ x; J8 A( O6 K+ ^145
146
2 I$ [7 i0 a( ?4 k& i6 A/ A147
" t9 O0 m3 S" L3 g* ]; L3 y148
149
150
151
4 f' ?! R1 M) M8 F( j152
153
' l* F1 u4 p4 B/ |' P/ D154
/ t7 e% ?1 F1 q8 w0 a+ g155
156
157
% Q9 y1 N: s% m158
4 Y% r- S5 n) O- ^159
0 \& s: X4 Q7 s- W: f160
161
162
163
164
165
166
167
+ c' Z: I6 R& M. E* h7 r168
169
4 g" ^1 N* s* ^8 N" |170
171
172
173
4 p& |4 H( m( Y" G: ?174
175
176
4 \5 ?2 [/ j" _% F/ S177
: I: r+ A3 I! I9 R, ~1 ]178
3 n  }; Z, o! M4 h! A3 G' I179
180
181
182
183
; U5 A' Q* G% Z. D184
: h0 q- e; X: y( L  E2 L, E185
( o# F0 O1 m# M1 S2 ~; r% R186
187
188
$ Y% c2 t3 y  C8 t189
190
7 D! j  Z0 t, y1 p& U/ \191
192
* L7 J0 l& }$ |193
- Y+ I) \4 `5 j! R3 ~194
6 _8 v6 ?0 T! i; [195
- P3 B" f% _0 i3 o; e2 h$ s196
197
198
3 D) [/ q, f/ w199
# \; l) @4 t& Z8 U6 K) x200
$ b# X: ^$ @8 ?% H0 G201
202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

5 O6 w: v# p2 R$ vdemo演示
  C. R  ]( \# e$ N* C后续的线上demo演示会放在
demo演示
3 _4 b( f5 v$ U. E. G8 `完整代码会放在
, A: ?' ?8 q3 R( a% U  U个人主页

希望对vue开发者有所帮助~
$ k5 _& [3 |" n/ d
个人简介：承吾
3 M8 V8 F3 o6 h% ?, H6 Z! H9 J. ?工作年限：5年前端
; @2 Y9 B4 X! Y* t地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
7 w0 X8 G( u8 m. ^& z5 F
" f8 ~: M6 R0 r- r; W) i


- n2 n4 u9 ]9 L————————————————
8 c+ X5 L2 [/ V  ~版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
* S9 e5 L! z4 T3 P0 `% V9 S原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847

. G/ |- M' X$ I% y