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

杨利霞

vue3 | 数据可视化实现数字滚动特效
* c; q0 t4 u$ ~( x1 Y0 v
前言
  n: y3 A, {8 a4 a8 ?& ^1 _$ X0 wvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
- A/ R  e) J: h4 v的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
% H: ^. p- F; o- O0 ~
# F, |3 i/ ~9 O0 }8 l3 Y4 s9 ]2 y文件目录


4 N# \6 Q# b0 G2 g( `3 |6 |使用示例
<CountTo
:start="0" // 从数字多少开始
# v) x$ i5 d2 j+ ^2 d :end="endCount" // 到数字多少结束
' N8 n4 K7 r" W( s% d5 }! e- m6 R  W :autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
( F2 e; i, d  s# _, S prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
4 R$ C' y0 d$ K2 y, H; z$ f& \* w />
1
0 \  r" C0 w9 K1 U! H, v2
3
$ h# ~. x, U9 T9 u+ U  Z% X0 z! W4
5
! H8 L) l; j7 [4 w+ E1 |! c6
7
8
入口文件index.js

( _0 K" ^% {3 c. Xconst UILib = {
+ G* W1 Q( ~* P" D* A  install(Vue) {
0 o6 _; M! N; E1 ?& g    Vue.component('CountTo', CountTo)
  }
}

& N! e3 }, j& ]export default UILib

1
5 r4 F1 a& I- ]; h2
' G3 B4 W$ q3 v4 Q3
5 G# x& Y* r; C4
5
6
0 {0 g7 A2 E+ Q& V4 E: q7
& }6 d* z8 t- G) w  [) {8
" x! L5 n  |% L+ Z. L4 F9
main.js使用
, a& X* f7 |5 F* K; ?3 {: ximport CountTo from './components/count-to/index';
app.use(CountTo)
; X* G: W# Y9 G9 f. c1
2
- ~9 N* `3 O) P6 y, S' x1 UrequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
& i9 V$ d9 q$ v. }, A如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
. s% [8 \) O9 [2 @% ~, f; P1 c各个浏览器前缀：let prefixes =  'webkit moz ms o';
! }! w. ]8 Z3 r$ y& s: m判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
4 q/ [' U2 a. R) D- F+ a4 Ulet cancelAnimationFrame;
' ~7 c+ n. m$ Y: o" \// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
  }: b# ?/ n5 {    for (let i = 0; i < prefixes.length; i++) {
9 V4 r1 y: {7 t8 ^4 o        if (requestAnimationFrame && cancelAnimationFrame) { break }
7 l+ p) S8 W, P9 d1 p# {6 E        prefix = prefixes
0 p" _9 T) y- E4 D        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
$ H$ C4 g, S5 _3 L7 g    }

  //不支持使用setTimeout方式替换：模拟60帧的效果
( d& J6 b0 t: L1 B, O% P  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
4 l- F  o5 r) r" q- X" j; E4 A: y# @    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
+ l" Q, T+ f# b) _) }* ]            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
% q& q3 D! d- k% x* r# m            const id = window.setTimeout(() => {
2 K$ m% j$ u1 S2 f# X0 p                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
+ Y! t) {  V3 q            return id
        }

        cancelAnimationFrame = function (id) {
/ w: }/ M2 {3 {  @8 [9 I9 U7 f            window.clearTimeout(id)
" E+ I$ e4 y1 M        }
    }

1
2
3
8 X0 @1 A1 e3 h2 f- a4
5
& K# C7 u: R0 Y, Z6
( a) |$ K4 y- ?7 j8 n7 y  D# K7
* s. Z$ Z3 p7 Z8
6 r1 u, w0 t, v7 R3 q8 ~9
10
11
12
; F. K" I6 z/ U4 _7 t2 f13
' U1 n/ @, c' ]' _9 d14
4 f9 |+ D# S8 N6 y2 {0 t15
: w) c8 g" e& v2 M+ L16
17
18
19
20
. l4 J5 E! @. o  w21
22
# ?7 Q9 d- O4 A7 ?$ u  |23
8 I- b' I0 G6 {0 r2 q- o7 H/ R% I: O24
25
. V: D! R1 t& Z" t26
7 R: f! Y5 x5 ~27
28
% F: P% }: ]& T% D5 _1 ~$ W29
30
5 F7 T+ d/ `- y% G5 Q31
32
) C6 [) e! P. {. ^7 m完整代码：
5 e: G+ _5 c" |( z9 X  {! lrequestAnimationFrame.js
0 _1 s7 ^8 k- r1 P# K( U7 D/ C
" e) m  v: m# D& ]! ?+ {" Qlet lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

2 a4 i5 Q6 E$ k, l: U5 K; l, z) ulet requestAnimationFrame
" o( L( C4 \" r( n( y( L5 slet cancelAnimationFrame
7 E( d2 q8 t, v, H
// 判断是否是服务器环境
; w& a3 A" x: R& ]! Econst isServer = typeof window === 'undefined'
" P3 X, Y7 M7 ~! Vif (isServer) {
    requestAnimationFrame = function () {
0 ?- ]! c; G2 R+ j: z- ^6 S+ u        return
* t5 b0 l3 X- L; m& d    }
2 a  y) G9 P' Q  l5 P+ I7 A    cancelAnimationFrame = function () {
        return
# D4 J5 {% O5 Z! j: k    }
} else {
    requestAnimationFrame = window.requestAnimationFrame
/ `1 a, g6 S" G) p( t) ]    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
, p/ i$ E% ?; C1 S' o    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
% n4 w' Q8 Q; G1 R, D    for (let i = 0; i < prefixes.length; i++) {
/ D8 J) o) }. {- e- T3 B" g        if (requestAnimationFrame && cancelAnimationFrame) { break }
* @2 Q8 g' q' q7 [$ Y& ]        prefix = prefixes
9 p! u& ^3 X2 q" t: g        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
! R" k0 A- I! H1 i  j. n5 g
1 J0 X  R  n7 S( a) A    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
9 e7 G6 y. ~0 }) W5 S" Z    if (!requestAnimationFrame || !cancelAnimationFrame) {
" A- x7 q* a" }" u! n+ v        requestAnimationFrame = function (callback) {
& j8 b7 T0 H, J' R- A9 k' C" U  }            const currTime = new Date().getTime()
0 x1 v; W3 _; E7 j            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
7 w3 N8 P. C3 h            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
* t% ]! ^/ s0 \" E: z            lastTime = currTime + timeToCall
$ ?# x1 W, Y" v, u; o3 n            return id
        }

1 p! l0 j' _" B4 M4 _7 l0 U        cancelAnimationFrame = function (id) {
& N) Y$ Y0 \5 u0 W  W( `            window.clearTimeout(id)
" m) l5 _- L; }, w8 ?        }
. @7 E  U4 \% a0 v" N    }
}
* ~# S8 R: K0 }( k, w0 p
export { requestAnimationFrame, cancelAnimationFrame }
& \  W# e+ O1 J9 p, H" |  z

" Y, h  Z% }. N2 ^1
) k" d5 F- n) y0 X7 }( q2
3
+ G2 J% g0 H! I( K! w4
5
& K/ s1 n! ]( L. k" T0 T* w9 _6
. w, r" f; b. |$ ~7
8
+ [4 ~3 y7 l' G4 `9
10
11
6 {8 {* x* y+ F12
13
6 Y& e: n: H+ W/ R' T- b8 b14
15
) k2 ~# y( A' E/ i" ]; S& P16
8 T& k3 C1 C: g2 V17
& ^# u' y8 _; T- P# J18
19
3 A; s, Q! v5 a: ]3 y20
21
22
23
24
25
26
& J, Y/ c; b2 C# \( N' r0 v* y; K27
4 `% |3 ~2 L9 i  p0 [0 T9 S28
29
30
. j* R" [! j% H" F31
32
% j* [! _; F7 Q6 G8 ~! X33
34
35
36
: s! J* Z+ U# }6 v3 m3 P37
1 F5 A8 D1 L% i0 {, D* `2 v38
+ V' L2 ]1 q! f$ o/ l" b39
  y& X$ @* Q, N. p4 r40
5 ~8 C3 J; b& L41
& H6 U3 Z8 ^1 `% b42
5 N: L* e2 K+ O' ^9 T43
44
) Q7 r  N: O  P9 M8 w45
46
5 ~) m) k, P2 z+ I47
48
. R8 n$ L9 E% n# x. q4 [: SCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

5 T+ M3 \6 t+ X& N引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
4 F9 Z9 f- v/ E" u1 t( H1
4 m( ]% R' W# w: a/ I  Z6 Q需要接受的参数：
$ H- R' f7 ^5 G% |  B
const props = defineProps({
  start: {
8 f0 ]- N' d$ X3 m( b    type: Number,
' A& K* d- W4 O/ F8 J    required: false,
    default: 0
  },
  end: {
; v1 \8 l/ Y8 Q    type: Number,
    required: false,
    default: 0
/ A+ D+ o( p; M' M, P4 T  },
  duration: {
    type: Number,
. {2 W% u1 r( q    required: false,
: X+ x1 T  ?5 D* Q, x. l! O    default: 5000
6 y7 X: x1 x. l  },
1 B2 O, c6 m) r: c; ]  autoPlay: {
    type: Boolean,
1 S2 A1 Y! z0 c$ F. M    required: false,
6 q; p9 U# I- i! H1 O    default: true
' f5 n+ _4 y2 i  },
  decimals: {
    type: Number,
    required: false,
; _) B2 Y6 l" L" Q# |4 E) w    default: 0,
    validator (value) {
      return value >= 0
    }
" Y7 T' T* _" ^  },
  decimal: {
" M: |+ f; v2 z9 r8 ?8 P9 [6 U, }+ Q  H    type: String,
+ z$ A0 `  c' z& @/ T7 _. D, y& t  |    required: false,
    default: '.'
  },
  separator: {
7 s( i$ U/ K' ?    type: String,
( r4 E2 K$ W/ h# i8 k% b    required: false,
& N" q( Q+ `5 [/ X& n4 I& f    default: ','
  },
  prefix: {
% z" g, u6 ]. j6 Q" h    type: String,
" a: m- L; G1 b5 j3 F    required: false,
1 G2 k1 g6 f' ?4 I    default: ''
  },
  suffix: {
    type: String,
( P" X8 I4 U. C    required: false,
" a+ D& x4 w8 L    default: ''
0 _2 p: D4 T$ `: ?  },
- N$ ~3 I: E$ I8 F- I  useEasing: {
- w6 e6 u# N+ I; k2 c/ }    type: Boolean,
    required: false,
! k. {( ~: Q1 s+ s$ u    default: true
/ J- O3 ~- q% e1 j, c) A  },
% I" k4 j2 L9 y8 g  easingFn: {
5 Q' M2 A% j/ d/ o    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
2 U3 f  G* r3 K. [/ ]% u( I    }
  }
( j% i1 J% t% _  O( c8 J* w})
/ W! s, f# ?/ [% w
0 G) b9 i7 `- X2 Z0 ~
+ }: o3 T2 H/ g1
2
3
/ b& D! J! B1 k8 r8 O4
0 C: `) K+ @; s2 T5
6 K) r* M7 c0 C+ B( r5 [: V/ I6
7
4 L0 O! ~1 s1 Y8
% T- C- e- q9 \( P. O9
, z9 s9 ~. m  b1 s10
11
12
6 i4 p* l- v$ F' O1 Y13
8 F  G$ B/ T& I! p14
3 S) e+ J! v- |) R/ X: d( c' z* i9 Q15
16
& f0 ^! I" j# B/ e1 p2 i3 d: f2 v17
18
19
' ^) O( y8 }. {+ b20
21
22
5 h; N7 s5 D' B  t: T23
9 W6 k1 I& k- |. t/ c" L1 q24
/ O0 Q& b( H3 C6 z! F! K/ S: K25
26
7 v, R) F5 T4 |" z8 j; R: z27
  V0 g- f" B3 ~) @28
+ [' h, B' H. U( z29
4 x( m+ R6 J* C3 j30
31
32
33
34
35
36
37
38
& ]& E2 a! ]* P6 S' x$ Q0 A2 i- ]39
40
# d6 ]: [2 ?- v& `, m6 d  p1 D9 U& H41
9 d6 k  j( m4 l* Z6 ?42
% ?) t: H6 P. S! W9 j* d1 r43
44
  z$ s: ~; S5 c6 x45
6 {! n! t4 X8 B( t' o( }; ?46
47
+ C' L7 G% @) y48
4 M9 ~# L" H/ r8 \, r7 l49
! |$ c# B8 R2 T  h- K$ C50
# I% ?' D8 P% v# s5 v51
3 B. H- h5 H2 g; n52
53
) O: F  ]6 ^! T  k/ |54
2 d' g5 c: E$ p, [55
8 s3 ]7 h0 n. W6 s56
57
58
; U; U! k5 ]' C% Z  O1 v2 w59
60
61
6 B5 J& Y+ Q/ R7 E5 O# c8 ?62
启动数字动效

const startCount = () => {
1 u- {3 g9 Q3 R5 y- x! ^. a  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
0 Y* N( h+ a0 \9 q0 o7 i7 o  state.paused = false
) i2 ?; a; V( ~' N3 f2 j5 h  state.rAF = requestAnimationFrame(count)
" O" b1 ]! m) h) E/ Y9 d" X}
1
2
3
4
5
% l8 L8 f0 |) {. k6
) z$ O6 X9 J0 f2 L3 N9 }) O7
0 O  z' b1 n+ I1 `1 x% N核心函数，对数字进行转动

5 I" O3 w, \6 V  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
0 ^, G/ S- O0 T1 U3 ^  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
) h. ^; q7 V# t7 e) v  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
* p: m2 b" c- _# _& r" o/ v    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
! a8 @5 W& n% l; V( C# a% a    }
1 x; B$ h5 n: a  E: n5 V/ T  } else {
% J) x" w& R7 f: T# C  t' B' q7 c    if (stopCount.value) {
9 R2 R5 }  K- B5 D4 A* V      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

( R8 D3 `  c$ j6 B  state.displayValue = formatNumber(state.printVal)
2 c# G" I  X" z0 H3 v  if (progress < state.localDuration) {
9 M# y9 B; M3 j; L! o    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
* D" y' e9 h' ~% t& |  }
}


// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
+ A8 Y# ]& X$ }/ r9 V9 N5 a  val += ''
  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
9 D& R9 e0 I/ i0 S      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
$ K2 I2 D0 x; [+ z1 Z8 K    }
( q# s0 m& h; Q6 Z3 }  }
* R5 B4 N- F" h  p  return props.prefix + x1 + x2 + props.suffix
}
% ~: d% l1 ^4 F% V+ s
7 Q, V( _; ^' {+ p2 N6 R, f1
5 ~; U& h' o* w2
, Y4 S) S5 [* a" g/ l7 V3
: O, s) M# w% B& k! C4
2 V2 n( Q8 r2 p7 y2 m" P: C, C5
' O/ g; E' m$ y3 O$ _6
& P% B6 }0 [& T! [7
8
9
10
- v* `  ^0 i0 [# j0 c' ^11
  ~8 a! Z. s3 p% x  }& I& O12
! {4 ^  q% z6 }0 x' T- I6 A; t9 U13
14
! W; U( r! x- i0 \3 O. t4 b. P15
7 ^2 j+ M% `! V/ _; d16
17
18
19
" ?* e  o* E% B7 e/ \/ H6 d8 K( {. L20
21
6 S/ y/ \, y6 l& ~7 i4 z22
23
24
25
9 X5 W/ N0 V2 d+ J* P# |) ?$ M, r5 b26
27
28
/ E6 ?: W: t1 n4 Z% J: s29
: ]9 s: l! U) B0 n, U' ?30
31
# V, d* F; u2 X3 S32
3 C- ]& m, s, t0 G33
34
# a/ R3 j  s1 o! {6 @. A! y( n" X$ C35
36
37
38
39
* Z# W6 j: ~) l- q6 q/ K40
41
42
& L+ p& p( t  F  ^43
$ r" ^1 k2 a5 h' ^0 t44
45
9 a& Z# O# m5 T7 G( N46
) i1 I# j  i+ h4 r3 D47
48
取消动效
% X% S' s. w: M9 ?7 [
// 组件销毁时取消动画
0 A9 }: ?, S( X1 q: K  n5 W; ?+ ponUnmounted(() => {
: u- t( w0 U; G, w# w0 w  cancelAnimationFrame(state.rAF)
5 I7 O/ J: z9 a: ~3 l6 r4 Q) h})
1
& h" s1 ~& p- n- Y) G! ^2 l2
3
4
完整代码
5 f: {: w$ z  h- K% d1 @1 {
<template>
  {{ state.displayValue }}
$ [' G( i7 F& V</template>
/ f& d, _1 c4 [2 c8 }# d$ J  w: Z  Z; j
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
* O# B: m0 |+ a$ M( I; `6 X3 }import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
" j$ X9 z1 |- Z/ n2 h9 aimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
: K, v4 v4 j7 H8 b! m  Iconst props = defineProps({
2 Y* G' ]8 _, _! H. Y) i  start: {
# w- h% O) S! `6 a* C6 f! n    type: Number,
! U8 t: `$ n8 _  l0 E8 t* {    required: false,
    default: 0
1 T5 I: l+ U, q  },
6 J! e, @& v$ J6 d. ]  end: {
    type: Number,
7 A, A6 x+ K1 x( V    required: false,
3 e3 e( N/ s5 ]0 W    default: 0
: j2 Y' `) d( I4 R' u3 T( x  },
  duration: {
, Y8 v4 s9 j3 ^    type: Number,
! [& D2 f) \! p/ S! e    required: false,
) f2 ]7 w# y# b$ K    default: 5000
  },
$ ?0 ^$ N  O1 H, }' |" T  autoPlay: {
    type: Boolean,
    required: false,
3 g6 H% s) ~( c* h1 V' I    default: true
+ n- V6 r4 l* I3 S* B9 C* ~: k1 E3 \  },
4 q) \) a8 E9 n& P* D7 ^  decimals: {
# W& H' d* i1 h! t# y% A    type: Number,
( A* ]/ s- f0 [1 f3 G6 d    required: false,
    default: 0,
    validator (value) {
      return value >= 0
    }
  },
  decimal: {
- }$ {1 v* c1 {: S2 W    type: String,
* {, y# O8 p$ Y( u    required: false,
* E- U0 m) e2 U8 L! n+ P    default: '.'
  },
  separator: {
    type: String,
4 B6 G: |2 u# v- i+ {5 T3 w" m6 @" ?" |" q    required: false,
    default: ','
# Y5 e) e. r+ Y; n) Q  },
# _1 O; |/ u+ q) X  prefix: {
) \6 G6 u0 D! N( {8 G6 J    type: String,
8 M7 R  Z& S( c$ X) ~    required: false,
3 q7 u) Y7 w2 f9 o    default: ''
5 B8 o3 U' W( r8 D" f  },
; D9 ^. p5 h3 N, M- ^  suffix: {
! R% c3 _+ g$ P4 t  u+ W' \    type: String,
% a; k  _) Y3 Y0 S    required: false,
    default: ''
: b% l3 X  e5 c  },
  useEasing: {
( ?+ j0 a8 U7 L$ H) m    type: Boolean,
4 {4 u9 r2 I, a8 B9 J. T7 F    required: false,
    default: true
  },
  easingFn: {
) t3 {6 Z' y* A! h( e' w9 G    type: Function,
  f0 N% c* y' u8 |$ f* ~+ ?+ E6 v    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
3 B5 r# O$ B4 G# n: ^/ b6 O8 e})

) H$ B# D! N; A9 m0 sconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
% ^; ?! K7 \& o/ K6 U# O}
& z; i& i' X* _* P
// 格式化数据，返回想要展示的数据格式
% Z3 N6 d& C6 x- b9 oconst formatNumber = (val) => {
  val = val.toFixed(props.default)
6 F' H5 G- j( N+ u" D/ h  val += ''
  const x = val.split('.')
6 C( {+ S) M& g+ d  let x1 = x[0]
8 p3 I; l$ H8 z8 a# Z2 v  const x2 = x.length > 1 ? props.decimal + x[1] : ''
8 p* {3 w$ \0 V: l! J  const rgx = /(\d+)(\d{3})/
: n2 `  e2 i: z+ Y  if (props.separator && !isNumber(props.separator)) {
3 L' N+ I% z: Z    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
" ~. p3 m/ e. U& R8 h/ `    }
! j) \& Q5 P8 Z; P) u: `  }
  return props.prefix + x1 + x2 + props.suffix
}
; V: r8 x8 U0 Q
8 O+ M/ p# v* T& V# I4 t3 M3 n9 Q// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
7 `9 f! ]0 T5 m! n& {' x7 M& t  printVal: null,
  paused: false,
% t: {. h" `# [! Z# a  localDuration: props.duration,
  startTime: null,
% [* f3 R, n( b& M* r3 I% B  timestamp: null,
0 s$ @- S, q4 x9 _) P: Y0 l  remaining: null,
% a1 u: M2 Z% F: T+ s$ x  rAF: null
})

// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
' T  Q! s- H! P: a4 L, m6 o})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
- p) G1 K! U+ s: e: F5 T: z$ j5 zconst emits = defineEmits(['onMountedcallback', 'callback'])
' V5 d. O7 v8 S; e9 w1 |+ R
const startCount = () => {
) P0 K  v1 D$ s9 u" n7 _. X  state.localStart = props.start
+ ^: s) h4 o, }  state.startTime = null
; m( W  s3 {5 M1 ^! c9 G0 W  state.localDuration = props.duration
  state.paused = false
4 V( U6 L! J( x: v( t3 H  state.rAF = requestAnimationFrame(count)
}
8 N9 t8 G$ u# Z6 h6 `2 A0 W
watch(() => props.start, () => {
9 g% `. i* T. q' K" q  \$ s$ J  if (props.autoPlay) {
% Q2 p+ f0 W. F# e    startCount()
' R8 A! z7 @8 R7 D, i  H0 |% c  }
})
1 o0 x# s* ?) n' a
; K6 L. s* i7 ]' A( f! Qwatch(() => props.end, () => {
  if (props.autoPlay) {
    startCount()
  }
7 y8 s3 [/ F" |})
// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
- H3 J  A+ V5 [& a# S! O. t    startCount()
: B* [4 p+ n7 u( }) @; M  }
  emits('onMountedcallback')
: U5 T% |' w9 v9 U% m7 b. L})
8 u' N, d- p6 X2 E( y3 e2 R// 暂停计数
% o+ b% k# |# z8 W0 Aconst pause = () => {
  cancelAnimationFrame(state.rAF)
+ z2 d  {# q; C3 p}
: S- x8 h4 z2 P- u// 恢复计数
2 Z4 f1 J* ^& uconst resume = () => {
4 L. U  G6 ]4 J4 {! V3 m& n  state.startTime = null
2 f: K* {! `1 S7 Z: D5 X  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
1 C: [% f4 j: w5 n}
3 O7 `* e" Z& n7 W+ T
const pauseResume = () => {
  if (state.paused) {
; `' K9 \& {6 g    resume()
    state.paused = false
  } else {
3 U' j3 V' R( w5 Q) y6 J    pause()
    state.paused = true
% ^5 N$ i: s/ C$ \& \  }
* V' l' C: G6 l2 f- ~7 l" y: g}
& q- J- O4 d6 }! c) z7 m
const reset = () => {
3 g. S9 a7 k  L! ^+ G  state.startTime = null
  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
( @) A9 F' L& V}
; M- j/ i& ]% h6 t9 B3 y2 _
const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
3 Z8 F- E- }( |' D( _% Y  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
4 B' u+ ^; e" i& Y) ?$ t. A9 P1 N1 ?  // 是否使用速度变化曲线
1 R6 }9 H& D8 n% H% p  if (props.useEasing) {
    if (stopCount.value) {
, D1 D) l; o9 m7 ?4 y      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
  T3 U% Z9 o' x7 K: k% f  y7 j6 Q    } else {
6 ^' E. q5 R4 P- J- F      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
( G1 m9 @) G6 N# X    }
: G) P0 n: W! Q& @  } else {
3 E5 Q0 }/ R. n" q$ X    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
0 ]2 e' f5 p9 }6 j! w    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
5 k, k9 x1 q5 F6 L    }
1 U) Q3 H0 k+ P5 V9 u  }
* z$ W( |$ ^. \  if (stopCount.value) {
" T; R) d+ c# s1 E* L    state.printVal = state.printVal < props.end ? props.end : state.printVal
, ]! U( p+ N( o  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
, \- C4 ]) \. f; O- o4 {  }
9 Z9 Q, Y0 W" \% |7 U0 S0 j
2 n1 C5 |3 ~5 G7 T0 R; J7 G8 E( ?  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
' R( t# p3 `; Y- _$ Z    state.rAF = requestAnimationFrame(count)
6 h9 y) G6 q- i7 R; a9 a  } else {
2 E$ E. V% P  ~0 ~    emits('callback')
  }
}
3 m$ b% f! `% q* m6 t* s6 v- \: g// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
- b5 f7 I0 F* n) k5 D})
* j# }% U! ?) p: T</script>

1
2
3
4
+ {2 w9 o* O: I% ]$ ]3 Z% m8 v3 Y5
6
7
6 P, s6 R% I- y1 c8
2 |& P7 q$ a1 ?# P9 y9
10
# y( _" w% J5 a& z, b11
0 w' z6 N/ i9 }( S# t7 g8 S12
0 @) ]' [1 w5 l  B6 Y+ f! K13
1 e& v3 o& G1 @% \# H5 W' D0 h! |14
1 k4 l" R5 T2 y3 ~2 f15
16
17
18
, ^% y3 z& I3 m8 B9 b9 W, a19
20
21
22
23
24
25
1 |3 H5 E( T$ [" ]2 Z3 G5 \26
: M8 f0 g4 G) E& M: t- f/ W$ [27
' s0 ~5 L* U5 x+ A8 t28
7 b2 t% Y" k$ B3 f8 |9 H29
30
31
32
33
34
35
5 L5 W% R9 w( y9 P0 |" a% L$ z2 k36
/ ]- e. x# a. r8 T, D$ ?37
. K7 q3 `2 E) d& _38
0 G7 _+ P" n# q& o& G, c; w% K/ j39
40
4 Y/ s- V7 U) a0 F- \' f41
3 \. u, l! F) M9 T6 w6 p& g+ b42
6 I$ r3 P: y. p9 s. Z43
3 V7 j7 _- p( i6 ?0 E44
45
46
47
7 q# u$ O* \3 A; w48
49
$ ?& I7 T( p$ c/ x: k& P50
8 |9 }$ \% A3 w3 N51
52
53
54
55
56
57
58
: E4 |( n5 t& B59
/ P* K8 J4 `! n1 X/ ^3 o60
61
7 }; I1 _: e( u# B- v6 P62
. G% Y2 M0 _; @& w% G63
0 R' H) _  |# n0 h( J7 @# i64
: R9 ?+ c+ w. B" L65
66
4 ~+ r5 O, N! @3 O  L67
: k. L' O9 y& l68
2 O+ U/ |9 z3 M69
70
71
9 j9 G, I+ D6 u2 b$ ]) }72
* m; F6 u& C4 a/ `  k$ [- V73
. ~/ A% t# N# [! N9 w: ^74
75
76
3 M+ }7 r, }3 O% i77
78
* V4 ?8 J0 }2 _/ O3 }79
( j$ J' |2 f5 d  ?4 h. n0 P) |80
81
82
% F* `, ?( l* P5 P% u83
5 g& q* O, F# J' l: b& i. |/ N84
8 e2 Z, _& ]  z3 H85
$ ]  M5 J9 H2 j; E86
87
88
89
90
91
( G& m& z- n- d; e92
93
94
95
$ |% H% U7 X2 q3 [96
9 s5 p, o5 C+ y97
- [: ^+ @8 d* p. }98
99
  o* o( ?) B( a6 d# n100
6 W: ^6 D) m  M! R0 X+ {101
4 C# n" {7 F0 C  X; @102
9 Q. P! S7 @& q9 f  x; t; B103
2 x  n& t4 P( H. B9 K2 K2 \- s, z. E) y104
105
9 o% ?$ X/ Z5 v$ E$ {# o5 P! y: `1 V! t106
# k' P2 {  U( [0 q- E107
108
% k  L' t6 b) Q- X6 {109
110
+ o( A& t9 T: |. g111
& X4 a& _  r; \* c& C112
113
3 `! N  p4 s. W. U114
115
116
$ d! a8 F' R: ]' \9 R+ i9 S117
. q1 N7 g5 y  v7 m( n118
2 \( p) P/ F6 E119
; |2 c3 @$ }) V. _" {+ G; f% s4 j) [120
: J% {3 }: v8 E8 `" S) l- B121
/ x, S" s2 ~# A, a122
123
$ n) H- P1 g; r+ E$ ^8 w124
7 y7 u+ `' Q7 l; W) w125
- X' h  x+ |( M. O126
: O0 g. C& }1 l& S4 }) k127
128
129
130
131
132
: I  R$ u' f6 N0 k9 `133
, C1 b' q2 d' K% e2 @134
+ j" r2 T/ M" @. R: D+ j# T135
136
137
138
139
140
141
. ~+ h' z) Y' v. j8 @% ~1 o# O142
) M2 |; d6 ~7 s: n) ]1 D; Y143
144
145
146
147
148
# v8 A4 B1 n& `8 o) j149
150
151
152
) E% C' I0 j6 Z( m! d1 }153
154
+ X1 W" @0 H& w2 {155
156
3 }8 w" X7 J! n157
158
159
160
161
+ ^- @. R: x; T. r' K8 N! j( \162
# R$ J$ C$ b; G8 T. S163
164
( ?% y, E7 P3 S$ x+ \3 F, B165
& r. T0 u4 L3 X! f+ n* @) I, W$ R* `% J166
+ |: G9 J8 c4 l& c0 `167
8 C7 J5 T, K7 r- }  I168
169
) {9 J; V4 V/ I+ }. M/ H170
171
172
" g" V; W5 Q+ w  @173
174
175
176
; A+ d4 L# w! U% R5 \177
4 ]. p2 H1 r# d  B( b178
$ e& R# R9 P# A( W179
180
8 O1 ?9 f! q- r181
; T5 O( Q' h6 [. V1 {3 [182
7 Y1 w/ ^, g) m: h& N183
" x+ y- L& Z2 @4 C184
7 @6 Z# k$ X" v9 M7 K185
186
187
& R2 _& W& o6 }& @2 ]( y188
189
- q2 i7 S( C6 T) k/ x4 _5 |. K/ d190
  M8 V, \, {/ E; x, a$ p# @' |! _191
# M6 `9 e: x* {# l5 Z+ I192
' T" _2 |, O& A1 ]' M1 @, R193
& |2 `" Z# K- E  j! G) O& Y194
: ]5 o) c  A  `$ S195
; Q; b; a6 k$ c- Z* N. [196
197
9 u9 x" A6 J. Y3 p+ G) U198
199
200
201
202
总结
+ U0 A1 L: o: u3 X2 {5 ?自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
* }' G* b& M# d$ F! H5 A! f
% E4 S, }, |0 M& tdemo演示
后续的线上demo演示会放在
demo演示
完整代码会放在
9 [: s; _5 P# V( c# ?个人主页

. `# E7 R1 T- |希望对vue开发者有所帮助~
  v" C5 q2 O8 c* O* _
9 m0 ^- n: S  ?6 a  W6 h1 S个人简介：承吾
工作年限：5年前端
; l! u; m% }* a, w: B9 k2 a地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
" r4 {  s5 p& l  F

; L: o% Q4 p0 p5 S$ [4 Y" _

————————————————
: L4 v+ v8 B3 K! B  U1 I版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
0 p9 O0 f9 m5 p