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

杨利霞

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

前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
0 r' T4 g1 g( e! F
# l" Q4 G+ R; x文件目录

/ H+ t5 K; u  B( b0 e; l0 \
使用示例
<CountTo
; i5 L" s5 {. \ :start="0" // 从数字多少开始
+ R8 P$ `( E- K. R6 F3 B :end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
6 e( ?% V5 X( u$ A1 [0 N1 E :duration="3000" // 过渡时间
6 `/ Y2 ], a/ W  W prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
1
& k& S# C: k6 |2
3
% C6 q6 S: X7 R8 I' E) y  K1 ?4
5
, Z3 E" y1 ~+ X0 C6
7
8
; C' n) |( X6 o  `$ q. `2 g3 }; @+ B入口文件index.js
& j& H( W0 o' m4 ]. x% S3 L
const UILib = {
  install(Vue) {
    Vue.component('CountTo', CountTo)
  }
. G3 }% b( n$ z7 `2 m3 [5 j" ]4 K( W}

export default UILib

1
2
3
4
* O8 I5 I' L" G) C5 T5
6
, ~% e1 P. j7 I# \7 x4 ]& o7
1 G) O9 o1 C9 z4 ]% `! K8
* ?% T7 i! V6 U  S) Y/ P) X9
! ]3 Y1 n. X  X% G% \# R* vmain.js使用
import CountTo from './components/count-to/index';
% C# d, W6 D0 ?app.use(CountTo)
1
2
requestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
' `2 k$ v6 q/ \3 m如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
# i+ p, z6 r& D; n7 R各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
7 \% k) A8 r- w& D6 klet prefix;
! x9 I: c$ Z3 U- l/ A" t  Flet requestAnimationFrame;
# N" R9 C3 Y* P4 P, qlet cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
5 u: M, Z1 ], E7 t9 s$ G0 u. T( L        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

  //不支持使用setTimeout方式替换：模拟60帧的效果
$ R$ ]1 K& S0 ~" g4 J* v+ t2 v; ^4 p  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
. v- b$ o2 y7 m+ T4 {# _2 p( T: i# n        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
+ `, i4 q1 c' J& n# F7 X5 e            // 为了使setTimteout的尽可能的接近每秒60帧的效果
; M3 ]; p% P. Z# q9 [" l+ }            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
( b  i: x% h2 h" x                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
3 w, d5 E: W. A2 U            return id
        }

        cancelAnimationFrame = function (id) {
/ ]& ?5 F- S' L+ e6 `            window.clearTimeout(id)
        }
& K4 |2 H3 r( V9 |% W5 F- F    }

1
2
) o! ]0 O( c0 }" S3
" _4 t2 ?  Q" i4
5
; r3 O0 c( h, u  }, A6
7
0 b& z( Z3 c7 S) X5 I7 z8
9
10
( i* x* c; M' O11
12
13
14
15
16
17
18
& ]2 d7 m2 V! F1 H, W  f" J9 B5 K19
20
21
22
23
24
" D9 m3 B) o" L+ G25
26
" y+ ^0 D! A3 R0 d  Y27
8 k3 [: t7 i% o! @3 W% n% h: \28
  C( R1 Z7 a0 d/ d# ~29
# `" l* k5 }) Q0 q# s4 l30
31
/ [4 Z9 a! M5 Y4 w" o/ ?! C# i1 X; m32
" G1 d. L+ s5 d; S完整代码：
requestAnimationFrame.js
+ O+ S* T/ A: X& \" z" L( K/ ]5 l
let lastTime = 0
0 \8 h  z3 t) R' @  @9 `) tconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
0 q" `8 |  D9 u; B. x, V9 J: i2 Y
let requestAnimationFrame
let cancelAnimationFrame

9 @, k( u5 D9 Z9 k, e7 b& o// 判断是否是服务器环境
0 _9 R3 _/ ~( n6 p0 H6 q+ p& L2 X) Q1 [const isServer = typeof window === 'undefined'
; z" ^, s. S, Wif (isServer) {
" S% D1 ?. r  \) k! I1 X    requestAnimationFrame = function () {
        return
1 P3 G& }* B, ?1 b: D: r4 w    }
    cancelAnimationFrame = function () {
- B. u1 F  N; b, q9 N        return
    }
} else {
    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
4 z; L; [! C8 n    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
5 ^7 z; F+ l: l: a        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
1 ?; c' ]/ }# J7 M* J4 Y/ x% V* U/ U        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
. n  r' H" Y: t. _    }
6 x8 S+ u6 O* U3 P2 M& q1 q8 a
    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
& n8 A* r& F* O( \' p    if (!requestAnimationFrame || !cancelAnimationFrame) {
' @$ y  f# y/ w6 z& K        requestAnimationFrame = function (callback) {
: `, l4 t4 S: C            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
* U( t8 ~! v5 Y            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
: V, c/ _5 a- F1 u* b4 N* G            }, timeToCall)
6 e% i: Z# R9 n            lastTime = currTime + timeToCall
) S1 _* ~* K0 q& [3 y8 U            return id
* d: a- Q3 R6 l        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
  t$ j7 H- q( o2 G- D, I        }
    }
1 b# D- c% K& m, \! i/ T}

' M' ^% h3 g8 Y* }export { requestAnimationFrame, cancelAnimationFrame }


# r- D3 o" U: \1 e% `' Q1
2
3
- m& z2 B  Y3 ?+ G. E" }) R4 h) E4
4 L9 n) C& h, |9 Y3 \+ e9 y$ b5
0 ?$ c8 X3 N9 K0 m8 @1 _2 U6
4 H/ z8 W' f1 N* S( `- ~' v2 p7
& C" B0 A8 `9 `5 R3 x8
9
% }' b& E/ {  y( G, o$ m10
; U. f' E2 U5 s  ~/ u! Z11
12
13
* d/ e. Y: L) x3 p; e) E14
7 B+ g% Q; N$ j1 ?% d15
1 ]* M4 d5 N" B  Y4 Y16
17
18
19
1 B) S+ d) D  d+ x' O6 m3 G20
0 U9 z: H! x, u6 O0 D21
4 ~) k7 L% D% q3 |' S. z22
# e9 Z" ~' e9 ^& z" `23
24
- P  c6 I% X8 a2 r( S25
3 t0 i; f2 {' b7 e' S* y26
27
28
29
- x) I" ]+ D0 ~( d& j30
31
2 t( s9 v$ N+ r7 E0 x# j. I, p- p32
33
/ A9 c- V3 F: m7 z( h6 i" f) [( R" U34
35
36
37
) F# b! ?8 k" [+ k: ?- z# s4 G$ ]38
2 c9 j# r+ J5 g9 H: M7 N  w39
40
41
4 L9 p  m/ {2 J, l1 h: H1 @3 j/ e42
43
2 }: p% M6 m0 B1 P44
45
46
0 D; h" ]  O& b+ m47
4 y# {+ W# W" J. A5 |6 h% K48
CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
; Y1 z- c4 f  g需要接受的参数：

const props = defineProps({
  start: {
% ~( O/ P' [$ d  F3 s& I# e    type: Number,
6 C/ q9 d$ ]5 `6 J) L$ o    required: false,
    default: 0
+ z# V, n7 S4 c5 v/ u! w5 h  },
8 [" D! k! z8 a2 M! J) w  end: {
: R2 P! t& `( f' F    type: Number,
    required: false,
    default: 0
7 R4 t, x1 w9 S# ]: E3 q& P  },
  duration: {
  w8 I: i4 Y7 O5 `* A    type: Number,
    required: false,
* B  }& T( L3 h2 `& I    default: 5000
4 {) H2 A8 E/ d( ~# n3 [1 k  },
  autoPlay: {
1 i2 D" y( d- n    type: Boolean,
    required: false,
    default: true
: p$ y& O& [4 T: G9 L! R8 A0 r  },
  decimals: {
    type: Number,
    required: false,
1 R+ S: }8 I) b0 ]7 f% G    default: 0,
/ G% x* I. E+ J. V$ I, y+ b( K) w    validator (value) {
      return value >= 0
    }
* y! o' ^9 O% _" p3 |  },
  decimal: {
    type: String,
    required: false,
% n( h% [8 K+ j7 y    default: '.'
  },
  separator: {
    type: String,
& S* ]! _( _1 o/ K5 j" O5 ]& B8 L    required: false,
3 B$ J# ]' ?% R    default: ','
  },
' ~5 g" h8 t! _- v0 l/ O  prefix: {
    type: String,
8 K" [  q* V& o" B8 j    required: false,
    default: ''
  },
  suffix: {
    type: String,
1 u0 c& @3 a# H" s/ N# _    required: false,
0 t, S" e& `7 A  f2 \; o) V    default: ''
  },
  useEasing: {
    type: Boolean,
    required: false,
    default: true
  },
. q8 S* ^% d7 Z8 Z  easingFn: {
* P1 w3 `1 F0 J2 F    type: Function,
    default(t, b, c, d) {
1 o: @4 p1 v; ?3 D      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
})
& Q, K8 Y5 `( n5 W
, @) I0 {! c) A
1
2
! n/ {9 ]: O" u7 S4 b3
3 B6 e& Y3 y- M6 K4
5
8 |4 D- t$ m/ ]0 Q6
7
$ \. u# n4 u' a+ Y+ j! O. w8
# x! E. G3 U" Y3 M' ~8 G9 ?9
10
11
12
13
14
15
16
17
5 z; R0 k4 }. A1 V/ }  j, @( Y18
19
20
5 `' Z* W5 M- _# h$ T' Z2 _  T21
/ L1 V8 H* [" k! t0 k! R* j) A22
23
24
25
26
27
28
29
30
31
32
33
; O% Y) j9 v- t2 O7 ?* l34
35
; W& J) }: v! w" U$ V36
1 |& J8 Q! c- N& B/ Q, P" f37
- M3 N2 }4 [) I38
39
40
# y% G- N5 l  C4 ~  M41
! y* D0 K5 y& D+ |0 t  L2 K) C42
43
1 t* T: T. z! l2 a! |44
+ G9 ~+ y7 V, u0 M( ~# `45
  y" y; D* u2 i  P46
47
48
49
2 U4 C: c3 Z! B$ w, I& F9 F0 U50
51
52
53
! j/ n& |& ]) e: K$ d54
55
56
57
58
1 t; ~! a- |( Z; g59
60
# B4 K9 ^# m0 }8 ?. M' y6 e61
62
) f  U0 Q; l/ {% ?; |% M启动数字动效

4 u$ d2 ~0 x, E' f* I' wconst startCount = () => {
  state.localStart = props.start
3 m2 z. }- R6 \: A: M  state.startTime = null
  state.localDuration = props.duration
& {6 A* Z; d0 e: y# x" O  state.paused = false
$ ]8 p6 y4 d+ j  state.rAF = requestAnimationFrame(count)
$ D! L+ G$ Q7 k* R/ l* S- P}
' p1 N( l, h2 P$ i. l1
2
3
4
4 d$ h2 I  Y' I% h* y/ e, v: m5
- J; h. G3 U4 C6
7
核心函数，对数字进行转动
3 M# j2 O0 ]' {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
1 h. u3 o4 l' I! ^- |- K4 b  state.remaining = state.localDuration - progress
/ G5 N5 Y0 _  V: C/ e, O  // 是否使用速度变化曲线
3 t4 y, `9 i& G3 W  if (props.useEasing) {
    if (stopCount.value) {
( v  L# s2 f* l$ j      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
* M: u* {) S5 }: [% Q    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
: T: |" X4 ]7 v% I0 O* D6 U    }
  } else {
  H8 K$ Q! o/ _( B/ m$ M    if (stopCount.value) {
9 ^% p9 m* u1 e: O8 M$ g* U      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
; [/ G, y0 @: H# p8 b. \    }
8 P* N8 T4 C' s# s4 h0 w1 {  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
7 c$ s8 u1 {: s5 f3 d1 R  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

) c2 ?1 ]( ^4 O5 v9 f) B* u" N, j  state.displayValue = formatNumber(state.printVal)
( g; G$ C# N. r5 E& u; A8 }4 d* l  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
9 @  ]0 x( Q+ U  } else {
/ K2 e# l$ O' b+ t5 U2 e+ L    emits('callback')
  }
/ L7 q5 ^5 P+ |8 S3 U7 H9 k  M! K}
* f: S  x/ }- i

// 格式化数据，返回想要展示的数据格式
) _8 R2 M. r( sconst formatNumber = (val) => {
! c3 S, p' k" \& m! I  val = val.toFixed(props.default)
2 K) T: e; J+ u* j& u3 A& C  val += ''
  const x = val.split('.')
7 N6 |# ^6 I) R  Y$ Z  let x1 = x[0]
  s  H4 @6 P1 s  K8 K  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
: ~0 }  J6 o( j: S    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
: W2 e" k1 a  S/ F5 ?& K( o7 V    }
5 j% E8 x) g/ Y# P  b  }
  return props.prefix + x1 + x2 + props.suffix
}

1
7 y' H( ?# z" y2
3
5 l, ?+ n6 F/ T; S% W: N- e4
5
1 {2 E/ i* u$ f0 j6 h6
! Z# d0 i$ A) f# Y! p5 I* o) E7
8
9
6 J2 l2 ^- Z  E# T- {10
11
12
13
2 W  ?# J2 J$ r' p: d14
15
+ O. C0 g" X$ X& ?16
17
18
7 y1 O2 @. d5 ^) _' I8 P, g+ S19
20
21
$ U8 ^) B5 m' Z2 n$ A22
7 q/ l$ w9 G; g0 O8 W0 Q* o# {5 L23
9 `9 x& c/ Z# N) B6 m+ T2 g: e24
& ?2 X% f+ I$ A4 A: E0 P. D25
; Q" T0 c: q7 C1 O% K26
. L* o' H0 }2 H2 g/ _27
! T! {, Z; I# \+ v3 B1 _' Q28
4 y$ ], t( m0 |) f29
30
31
32
: T" O, X- K( [" }$ l$ b33
3 w6 w: }8 d4 P) T34
) `2 J- D7 g/ H  ^35
36
37
38
39
+ P2 ~) C+ u4 V9 J  [40
; H; e: P+ ^3 K4 c' z: G2 h9 Z41
42
43
3 @6 }. h4 F9 O' I9 }; y44
* Z' Z# |# r5 d0 Z( l, v45
; M* `2 E% j* Q- p3 f46
0 s' w, i, l; s8 q& p47
48
0 l- v, f0 A" u% r6 D2 y# c取消动效
( d( A" |: S+ _$ E! a
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
% a+ |. ]/ o* L: [  X0 W( |8 B! F})
" q0 {+ }! |* y( r1
2 X5 |$ t0 n5 _! F& [0 n+ T! \7 T2
3
4
) D. O9 ]6 X$ W  l5 ^2 F, r完整代码
# N* ?! J. A7 t" @/ h6 C0 y$ m
; \7 P/ G2 U% U6 {3 [<template>
+ _9 A% h4 r  O% b# D9 r  {{ state.displayValue }}
</template>

1 u; r1 b$ V1 e/ t<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
1 E1 P+ |. b8 }2 l0 ~1 {0 Vimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
2 f" `9 N3 E" J% |" N/ rimport { watch, computed } from 'vue';
) ?8 x8 ~5 x, e5 H8 A3 dimport { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
! D7 _$ y8 ?% i( v. J/ H# s// 定义父组件传递的参数
+ O* G5 f$ B: Mconst props = defineProps({
  start: {
    type: Number,
7 }& B0 N( U* Y. F    required: false,
- _: Z2 j# p  o, \) {  |    default: 0
  },
5 E4 I! v2 [) {( J# D+ R$ L7 j  end: {
1 m3 G+ d8 w* d3 l    type: Number,
. Y) s$ ]4 w5 Z3 w( {& i    required: false,
    default: 0
  },
/ g7 V3 K5 p  j, U( R  duration: {
7 r* x( a! Y) b, [5 S( m4 Z    type: Number,
    required: false,
    default: 5000
  },
  g: B! W9 l3 l3 S% d0 Q# M- t6 \  autoPlay: {
    type: Boolean,
    required: false,
- U7 f$ V! d+ l- d, g* K    default: true
9 ?# h8 @/ C+ Y8 A6 b, _- z  },
  decimals: {
    type: Number,
    required: false,
$ n6 P# g6 J2 Z$ X! i  |& Z. h4 S    default: 0,
    validator (value) {
3 p; ^: w+ E/ `* A4 w) h8 h      return value >= 0
    }
1 O' e% c. p' Y/ m6 s! @- r/ w3 Y# i, E  },
  decimal: {
! S2 k+ r$ t: V    type: String,
- x# g. o5 d( l. u6 r    required: false,
    default: '.'
  },
  separator: {
    type: String,
3 u4 u* E6 ]0 h! v4 A/ L7 [# g    required: false,
+ Y9 T: U: n3 F! o; N    default: ','
" c  `4 P8 ^( m+ t6 t; }  },
  prefix: {
    type: String,
    required: false,
) X- |# {( Y/ s7 n8 Q- P; q5 I+ c    default: ''
5 c1 p8 H1 Y) Y6 P  \9 M  },
  suffix: {
    type: String,
1 c5 ~" Q, C6 p- U4 q: y! a    required: false,
4 K" ?' H# m" ?/ S2 a    default: ''
4 h  O% Q4 Y1 {0 B; X& r  },
  useEasing: {
4 }3 A+ e* Z: U    type: Boolean,
5 F- O+ A0 ^5 J" {/ `* N    required: false,
    default: true
: ^5 _, i9 D1 d8 O/ x/ ^  },
  easingFn: {
    type: Function,
    default(t, b, c, d) {
, A, _6 Z8 t& M; T      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
1 g4 i# H. |0 z% r  N& ?8 {  }
+ v3 b; C# w$ i})
- B' L0 E# _9 W
8 C: z# l* r' M0 mconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
}
1 Q- T/ x, O5 s0 Y
// 格式化数据，返回想要展示的数据格式
$ @  S* H. m% h/ tconst formatNumber = (val) => {
  val = val.toFixed(props.default)
. J. i  E$ ?3 q9 o  val += ''
  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
7 y$ R; a9 V. g1 \8 h% y& F  if (props.separator && !isNumber(props.separator)) {
5 S' P( c+ {  J* v2 m* ~9 z$ x    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
  x" C" O7 W$ |8 e0 A4 O3 \    }
# F  n1 f  v, q# R9 C" K. Y  }
' x8 E% o. L2 D/ O* M7 F" C  return props.prefix + x1 + x2 + props.suffix
# y+ q% O! E# L! s}
* x( l. q0 ?) v2 m: L9 S  Y
* g9 ?9 {2 T# l: ~% C3 F9 p// 相当于vue2中的data中所定义的变量部分
, f% l' \* ]" e- |6 yconst state = reactive({
2 j4 f3 y$ Y2 j) n1 B. E- W  localStart: props.start,
  displayValue: formatNumber(props.start),
; K. `+ H) i4 g, P  printVal: null,
  paused: false,
- E3 W0 Y4 t9 _. [2 j* B  localDuration: props.duration,
  _( L( `1 R& ?# [  startTime: null,
9 x+ R# o! f8 v: D+ f* }$ t  timestamp: null,
, t; f2 O  v/ d' ]" q$ W  remaining: null,
  rAF: null
4 f( V7 ^& Z& p; g})

// 定义一个计算属性，当开始数字大于结束数字时返回true
9 D. J# e) |! u) {const stopCount = computed(() => {
  return props.start > props.end
2 k& C1 R0 _" R  a  |. j0 |/ |})
% v6 ^: }# }2 N7 A// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
, A9 Q1 l# m9 c0 c! P: i3 Oconst emits = defineEmits(['onMountedcallback', 'callback'])

3 N/ W1 r: N% x! n  Fconst startCount = () => {
/ J7 j5 x  ?7 C. j6 `1 u. ^+ P% j  state.localStart = props.start
9 V: D6 _# d- Z. \  state.startTime = null
, L9 H; m0 F8 d0 F  @5 Z9 g  state.localDuration = props.duration
1 A  }3 i; H+ W& N; |( y4 O  state.paused = false
  state.rAF = requestAnimationFrame(count)
}

# W& F9 d/ ~1 a& _( }* i$ d. uwatch(() => props.start, () => {
  if (props.autoPlay) {
    startCount()
  }
# n- ~" f: x' R  K3 V' W})

watch(() => props.end, () => {
  if (props.autoPlay) {
, }* E, D+ Y! A8 `: f1 l    startCount()
  }
8 F" j8 M2 {' x1 A5 r})
7 t4 q7 D- H8 d7 e/ d) _' I2 u: X$ M// dom挂在完成后执行一些操作
onMounted(() => {
$ V, G" I& m! n  if (props.autoPlay) {
    startCount()
; L# s/ o% z' g, c7 S2 t9 J6 ]  }
* r( |: c" K$ h( Z8 ^. K% A  emits('onMountedcallback')
})
: k8 w- A. z/ B- [0 M; @5 y, t# P+ J// 暂停计数
const pause = () => {
# ?6 }7 w# b4 Q2 l4 b) [+ D  cancelAnimationFrame(state.rAF)
* Z" o9 H2 m2 X}
1 S5 y! g. B4 k( f5 u// 恢复计数
const resume = () => {
  state.startTime = null
7 C1 y0 N# p& r2 j  state.localDuration = +state.remaining
  g9 C! O) B: g6 s( O. F  state.localStart = +state.printVal
6 y( U4 O& i5 N9 Q: g, b1 T  requestAnimationFrame(count)
}
, h$ E( G- d/ g! [9 c2 B
const pauseResume = () => {
  if (state.paused) {
    resume()
6 _. L& }, Y( t; e% j& j* m  i- Q    state.paused = false
. |4 ?/ O4 u  `  ]  } else {
/ f6 D" p: P7 f, k. L, J    pause()
    state.paused = true
) B, F  u6 ?: S. n3 v, l3 P( s; n  }
}
+ ~' T8 I9 O, [% }
const reset = () => {
* e# c: f) b+ a6 [  state.startTime = null
/ A! n! i3 j! [, x1 D' X$ m  cancelAnimationFrame(state.rAF)
6 x9 q+ ?  A% X  state.displayValue = formatNumber(props.start)
}

4 P* H& M4 k- {5 ~9 w. Fconst count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
, P3 g' K" l8 n6 ~  n  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
1 V8 W- e. `: |) R, R: B  U7 x  // 是否使用速度变化曲线
  if (props.useEasing) {
/ l0 S- q7 R3 \% v9 J    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
3 k" c5 w7 I0 N5 K* p      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
3 S' R, c7 V, H    }
  v6 s$ F" R3 a3 [  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
8 }1 u" h! [+ N" M  if (stopCount.value) {
+ G' l* }5 {; v* V    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
2 w2 v" ^/ \1 S6 o; X' B  }

6 J, o. P/ A4 F9 V- P  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
8 D" r, l2 m" |7 D9 s% Z! Z" u    state.rAF = requestAnimationFrame(count)
, ~% N- x; l. N/ a! T. ?* c  } else {
    emits('callback')
  }
) g1 y7 f0 U2 k* S. I, W$ b}
// 组件销毁时取消动画
! }' E  w7 p7 }. }8 R4 ponUnmounted(() => {
, \% j1 F* U" V0 L, ]  cancelAnimationFrame(state.rAF)
})
</script>
" T* H- ~9 n0 d/ w' r! R+ x! y
0 E! _% [: B2 M' U1 d1
/ J" A  `3 S/ [1 a5 I2
3
5 x1 }& [. _4 I, d; r4 E# U! L4
5
6
7
( j2 A9 c3 @6 N8
9
10
4 A: c  K9 S- r2 @0 V% G11
0 l0 a2 K- r, C12
8 ?$ w, c" }4 ^4 ^! V3 w3 Y13
14
15
16
; s: Y2 Z2 V3 ^6 e" k8 P3 N; `17
18
. P8 c3 z; c1 W; d9 i19
20
21
" O7 q1 z& z" T8 u  r6 Y6 p22
% v% z6 U1 m8 \$ E23
24
1 N* I% F4 d, y, ^2 |25
7 C8 V: \% p2 R& c: f5 O/ H26
( Q2 e5 A6 A: O27
28
, h' W6 N, {9 L4 g! t0 K3 {6 N29
+ J  x( f7 t6 m" Q/ P& y30
31
8 R9 l& S" r6 E+ ^32
33
34
/ r8 `7 o0 n. V. x. T( p35
; |. y  t0 F" B  p$ S& h0 z' S36
: m' T: s1 s' g: P9 a; Y1 n37
, a( N- y0 g, w2 ~38
# ^# g7 ~5 x2 p, ~, @. n5 v8 M/ ]39
/ {5 N5 |. t$ q1 [4 T& Q40
; q& _, d. ^1 `& a# ?. z) T/ X41
42
43
3 j2 e$ V- [: n+ |44
45
46
47
  E/ Z! J3 ^, }4 @2 O# e% ]48
49
% b& C1 D3 e* S9 r8 l( J50
, g0 x2 B" V4 [6 `( e6 z: q4 E2 W51
52
53
9 M* @8 A- n# S% U54
55
; C, h0 r4 N3 b6 [0 T56
57
58
59
* @1 s0 Q, F/ E4 k2 p  G. R60
61
62
; C' ~) v. P- Y2 j" w& r& D63
' |& g' Z' C& S+ P8 Y/ L64
7 C3 P7 D- z1 P, U65
66
67
68
, u+ K$ O- F6 P5 r6 ~69
1 Z; X/ @# @" @70
71
5 J( M- J3 ~3 Z( ?- m8 U3 d72
73
74
75
7 I$ G. X8 |! K: w# ^6 x76
77
78
' h4 X' c, A) s: @# ^' w79
80
81
82
83
84
1 u0 @. v) Q* m$ U8 D. D85
. c; Q& p, ^- s) J86
, Y  p& v: U) C/ U5 H% U87
- {8 e( a; M1 |6 R) Y88
. h- P# H) T$ j8 ?$ N89
, y' j% t/ z1 R3 P" Z8 f5 N1 [90
91
4 m1 [3 L+ [% @8 i$ q. B92
) e9 m5 o5 T8 O8 b93
' T5 d0 |/ ?& e3 v8 @94
95
96
97
98
3 c  F! l( f6 Q+ v3 [( m( c; r99
100
101
102
103
104
105
106
  l" T) p* N' t: @$ b7 M107
; E' C( i+ o5 d+ Y) o! p108
109
" m: P6 W/ V* X4 V" \) O7 @9 d110
5 C+ r) C! Z( k9 ?0 [111
# K/ ?/ f! H+ j4 D2 q; V112
113
! v1 u# ^& }, }1 \" n0 G  h2 T' \4 J114
115
116
117
118
; D& E3 m5 v5 q" ~  ?! D9 b: Y$ x119
120
* {" ^2 |, c/ K. g1 N8 _121
122
/ ?# m( [3 J5 H123
124
: k: I; K) H, P# F' |' W9 P* L+ F125
% i2 h' u5 @" }2 X7 s% p- S126
127
' N5 U0 @$ j2 }! K0 s# K- W* o, O128
' ]0 \. p/ H$ H8 u1 z129
* Q7 b+ L2 H1 m) u! [! U# ]130
131
132
( J- B4 \/ w0 E3 p( p, n& x- j3 H133
) m* ~% m, R. c$ c134
135
7 a6 F+ }! I) B! B136
$ z% }9 x! F, \- o6 Q137
138
! P  W+ S& [1 {0 }139
0 z  O# |* C8 A% G( x+ G/ I140
141
142
9 l' [! j9 Y; ]. f) R/ c143
144
145
146
' `2 n# Y6 n, W4 U2 ]" ]147
, d# q. s+ f# U# I148
149
150
151
152
: o% Y$ r: r( ~  Z  J- I153
  L, W( v4 e" F; I) \, B" G154
0 d9 r! I! T" z; c8 h155
2 p6 x- E% y. n0 t+ l, p156
5 P! P) H* M  V& Y# \9 v4 Q! k1 ^# b157
7 g5 S0 d$ P: i$ a158
159
160
161
& _# G4 t$ S  {: {1 q6 K162
' D/ w& d5 F1 ]& k" t3 A163
+ G6 E  B  d  ?4 _7 J( Z164
165
166
167
168
2 B1 m$ d" M! n( g* x3 O169
170
; Y  z& r# P9 e& ]1 T' Y171
172
( c3 N% H. ?! n; L) |173
174
: X" L2 X0 q1 J7 J' @; ^7 |175
9 f$ x# n) T+ h, Y7 X176
2 K% }2 W4 F/ {  C177
178
: _! x6 E: D& C4 V2 D179
. J0 S+ D  z) A( q180
1 F1 p' M/ r7 K- Z181
/ N9 w& B  Z% K; y, `. A182
+ D$ A9 o2 {( c2 X3 ], ]8 a2 Y1 l183
% {% n  T2 f  V$ r2 }184
: R, Z- W8 e/ y( v6 t# h6 D$ R185
186
187
4 R' F5 E- g+ k188
189
190
191
192
1 P4 T8 Q$ i* R! y- L193
4 F0 P8 q2 M. f* i: Y4 _$ Y0 ?  B194
( a* ~! K8 P# C& B" x' g; X+ {195
8 n# k8 K- @/ F196
197
. Q' Q/ A! |6 m# K  O198
199
% {1 K7 q( A  m8 q+ u200
201
202
- R( K# l& X) t" @; \* d总结
8 H, h5 ~/ e5 S/ t6 I% a( ?1 U自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
! Q" E+ P* X/ @) l9 H+ B
demo演示
" X* l/ P1 F3 I后续的线上demo演示会放在
: R9 d& w* m) t  s6 v8 ldemo演示
完整代码会放在
6 D  Y" O5 L5 [8 x, K# [个人主页
! j" G7 R) f: M! v
希望对vue开发者有所帮助~

个人简介：承吾
& y7 @; g$ z9 \: t工作年限：5年前端
" {+ u; [% ^6 m2 w# c地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
" J* D6 L( z# f

+ s5 S. a# m, P  i5 J# ^
! }( y4 G* j" B, C% s4 `
————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
4 y! \. C5 m6 A2 z1 \- O2 ~# {原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847


% w6 I) c) n- g# x, N$ }