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

杨利霞

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

前言
/ S$ A( y8 w  L3 [2 A( bvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
) h% T' X. I0 a2 B/ R$ c1 N0 }TypeError: Cannot read properties of undefined (reading '_c')
. K) O8 u1 q8 U* o/ V+ k' R的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:

' U$ G; m) g3 j$ w) r- ~7 P' M
思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

文件目录

5 I8 ?8 S7 B- T. \/ U
$ l, K* \3 E8 r# G2 v) m$ t使用示例
<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
8 N7 Q1 B5 p& g3 M$ q( O :duration="3000" // 过渡时间
9 O) q8 y. j& l* Q  Z' D  q0 P prefix="￥"   // 前缀符号
* b/ U4 ?! H$ Z: W7 C5 F& k suffix="rmb" // 后缀符号
/>
1
2
- ]) g! Z* H  |1 N' m3
4
5
6 Z0 y& b" Y" o4 b6
7
, b9 E( T( [3 z; K/ Z0 o. \8
入口文件index.js
! ?+ q: O; b- C
" d2 c, f: Z% l, l$ Cconst UILib = {
1 `2 X$ q# Z  m9 t# }$ b# E# }! A  install(Vue) {
/ `4 P2 Z& F4 e6 A. |2 k7 F    Vue.component('CountTo', CountTo)
& ?- y4 d8 ]' Q! F  }
}
. u' m! E" n7 Y8 v4 Q
6 x' E& N+ o  b3 h, ^  Rexport default UILib

  A+ S( p7 F  l: p1
2
3
9 {. i! N4 F; j- g" U4
5
3 \9 A% c% }. H0 M7 G, y! Y6
$ ~. R! ~& }8 s7
% E) J/ X5 ?+ h$ L/ i8 L! I8
0 P% h. j  r. r' u8 N5 [0 F0 [+ `9
( S6 i5 ?( U, A( Wmain.js使用
# M/ r8 S' V" d. `import CountTo from './components/count-to/index';
app.use(CountTo)
1
7 M! }- I7 v* H6 N- [* y, @- t2
requestAnimationFrame.js思路
; U: d+ p  J% h& m; n* I5 T8 C先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
) L3 `8 O  z' h- c$ i" n" I! i如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
8 ~9 p+ T4 Q) ]9 y导出两个方法 requestAnimationFrame, cancelAnimationFrame
- f- D7 H1 z' U+ a各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
: y' i6 K: S# Q: j$ C1 Q增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
5 N. R# p) f  a; w  ?7 p9 {5 t4 p// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
7 P6 U$ F$ \2 O4 T& f9 O        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
5 e9 M0 M2 f; a* D. u& A        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
: @( d6 ]+ f4 S# [' c0 X
) [2 H! y" _; _+ T$ Q( t! m2 O  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
# D$ i5 Y: {7 I( L) Q- L    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
( S( k6 Q6 k% I1 g/ i" Y            const currTime = new Date().getTime()
$ R) z3 F5 h( b            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
" L, T  I$ C9 v" X            lastTime = currTime + timeToCall
            return id
        }

        cancelAnimationFrame = function (id) {
' w1 x& Z5 C/ U: f3 W1 b* J3 y            window.clearTimeout(id)
        }
    }

1
2
' E( J/ O8 O% w% o5 |3
4
5
  l. p" `& ?. w6
7
1 S7 q+ @' @! ~8 u  b; R8
$ t2 J) b5 E; o% r9
* y9 y' g* J( m( Q% h$ H. r10
11
( J$ ^& F+ l0 t3 z12
4 ?# _% X% }& r/ o- i" ~% T13
14
' P; i( L2 O7 K1 ?. U% q$ K' w( O15
. a0 e# Q2 H1 H. _0 x16
% l5 O0 X  Z& N& B' J' X17
( U. M5 M1 n( w18
19
20
* u2 w+ Q  Q: A+ W% n21
22
23
3 {0 p8 h4 G3 c& r% y24
* o3 F& Y3 t% F# K25
26
7 j  n: i/ p% k8 o# x" L0 I27
28
29
30
31
32
完整代码：
* H/ z8 K6 V1 g  E0 ZrequestAnimationFrame.js
4 e: I0 k: Z' J
let lastTime = 0
) j; T4 C; M6 e& {% h& s6 vconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
/ P, X! O$ L( }
let requestAnimationFrame
7 ]. g3 L9 Y  V2 n+ clet cancelAnimationFrame
* Q, M4 s' I0 L
+ H8 S0 R' `& b5 r, D. j/ h// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
( b5 w! [: b' T1 R1 Z* `! B" Q    requestAnimationFrame = function () {
        return
    }
- u. L* ~( [( u    cancelAnimationFrame = function () {
, d2 F7 l  r4 h, S+ z        return
    }
} else {
; U8 \$ u: E% ~& \( [# P7 @    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
: B& F  k& `+ E) ^3 x2 m' O- E! Q3 R3 ]    let prefix
  _8 Y2 p: k$ |* v+ b* _    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
; l9 z/ M8 q' I$ ^    for (let i = 0; i < prefixes.length; i++) {
& n5 k9 q; t- I+ m  p        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
# g* D" ]" j. V- x5 C4 B        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
8 ~& ?8 ~- G, O9 x9 x# i) d  t
9 G& D+ u! y: ^1 |    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
# I' [% C. G" C% c0 F" X    if (!requestAnimationFrame || !cancelAnimationFrame) {
3 Q, S$ Q: i, D- Z1 I# t( A, r        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
* m, ?1 M7 q0 Z3 s1 L: F            // 为了使setTimteout的尽可能的接近每秒60帧的效果
; P/ W% Q# A  U* \, [            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
7 o9 m2 l3 Y! O5 J                callback(currTime + timeToCall)
            }, timeToCall)
5 Y  f+ f5 c( u2 A8 F3 E. R            lastTime = currTime + timeToCall
! p4 m$ r- F2 g% Z9 z            return id
9 I# h+ n/ I! |* R# t0 Y( w        }
* w0 G0 I) x) U1 y; r1 K+ F
# M* z/ j' P8 i; |. m+ r        cancelAnimationFrame = function (id) {
- F. S; J( J% |8 Z            window.clearTimeout(id)
: ^0 g( k6 n: G6 |        }
: {" C& z7 ~: d8 f, h+ g$ e/ X    }
, T! ]# h6 d  j* x}
8 n8 L! _4 i( P' Z+ a
export { requestAnimationFrame, cancelAnimationFrame }

% a3 f# l* K: j" d5 n
1
2
+ H, H9 x4 s4 _$ Q  o9 F0 m9 l3
4
5
6
, e0 s' }6 ?( H) `, Z* j" h7
8
9
" ~; s! t6 _: _1 i- l( |10
11
12
13
& N+ U$ @# u8 |14
; t( B* k  m9 i/ y. O: i15
16
17
18
: E' H$ q2 v( n+ A+ h19
( Y  z- {9 x; {& k! _20
21
22
23
24
1 b9 \( u: K" F0 P  G+ q- E25
26
27
28
29
30
4 H& |$ N. w7 T8 \31
32
33
- g5 N1 M) P/ q) ~34
35
36
37
2 w1 {8 D4 _6 p8 ]* s% F( M38
0 |/ W) t  |( y" Z5 I3 e% U39
40
% x& Q; h& U" V$ w6 w7 W% k$ L41
42
43
44
! `, D7 a1 w9 i# J# Y# h5 G7 C45
# g! V6 l# U7 V; F46
+ b- p# C! O1 e% l) n47
: S/ A/ D. u6 \; V3 k% S' h  H3 r48
CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
! M' q8 L/ u( i3 G1
需要接受的参数：

1 b( i+ [8 R+ p& ~# y9 t% W6 `const props = defineProps({
  start: {
    type: Number,
2 ~7 ~" I- p2 t2 L- `    required: false,
) J! p: [% `8 O: e    default: 0
  },
  end: {
& x+ Y* f1 m6 |* q0 b( D8 F    type: Number,
    required: false,
    default: 0
  },
3 s: t- t* Q6 B2 h  ^, t9 f$ p4 r" ]( N  duration: {
1 ?5 i+ c" ^8 L1 g! d( g, \    type: Number,
    required: false,
    default: 5000
  },
  autoPlay: {
0 B" t! z$ z& q; D' e    type: Boolean,
    required: false,
: v8 r3 v, p5 k! ~4 ]7 m    default: true
  F6 Z9 m  L7 x6 W( L& A  },
  decimals: {
- a2 o7 m. P5 t* W) O, v& d    type: Number,
    required: false,
    default: 0,
5 i" b" ~0 @5 @9 D( E* t7 c: [* Q  g( e    validator (value) {
9 L% ?1 C5 @$ s' P. Y" W0 y& @/ f# ?      return value >= 0
    }
  },
+ C! ]7 u8 j" n5 |  b  decimal: {
2 ~9 G9 ^4 `' `! B% o$ L6 I    type: String,
3 o$ p" X9 r$ e8 C) h7 V5 Q6 U    required: false,
    default: '.'
3 g4 A; N. W! V* G; D  },
7 A; {: x$ G' K  separator: {
    type: String,
    required: false,
* Y8 r: ?1 q: L. {    default: ','
0 z* G2 N* n& i7 [5 @! k  },
  prefix: {
    type: String,
    required: false,
    default: ''
  },
  j+ @# g- i+ d6 [  suffix: {
  q' k; V$ L) Y1 |    type: String,
2 X1 N- E$ j5 W7 I& m) w3 k    required: false,
7 W- a* }* P. [: S$ J; A    default: ''
( z7 m: [7 k! Y0 L' [3 a7 F  },
  useEasing: {
    type: Boolean,
* }: V/ ^  N, ~6 O+ ~; c    required: false,
    default: true
  },
  easingFn: {
  u4 J" M& `) ?+ ~  a) n    type: Function,
    default(t, b, c, d) {
$ _( _# c3 k5 K5 B1 O% N5 v      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
})


1
/ i/ ^& o$ U. p( g2
! L+ D( C# s$ P+ G$ p3
7 K# ]! w( U+ ]) j; z8 F4
5
6
: x0 y/ r: E4 N6 d# ^3 U0 a7
4 R6 g  j! T  [9 |8 j8
9
" h* K4 Y, U6 E4 a9 ~5 m4 Z10
11
12
13
14
15
8 V& M* u2 L! e+ w$ w/ s/ z% k16
4 n1 j# w+ q$ f" N) d$ l, u0 I17
2 @$ \$ g; q# H! ?18
9 u* g$ N) E1 ]2 k; l/ F: r19
20
5 h$ W& n- j* |( {7 ]4 u! ]21
22
23
) ?- ?- C* I+ |. L1 m: |24
25
26
27
28
29
30
1 |2 {, F9 _# N! D' J31
32
: D, [. W) N* G6 w6 X* o" N& H33
34
35
36
. s8 g9 J% R0 Z- S) ?. [4 v37
38
4 b  z7 l3 U8 s* Y, a! I4 y% l39
8 v) g; F. n5 }& C8 ?) S0 t( m40
41
42
8 `6 A; Y0 k! S0 p43
44
* D" O; z* {$ D0 @: L45
/ I$ @9 Y" C; O" ^5 `2 U46
' k8 F" z% U3 R47
. n7 ]- B! E9 v% d& v48
* \5 _4 Q: N. G9 C# S+ G49
50
51
52
53
. l2 ]" O) y& }& d54
6 R( A" u+ ?0 L8 \* D. W55
0 r. R! X( {4 o0 Z# n56
9 D: B6 B6 D  ~: I# d) a- ^57
* b& X. ^- J' a9 ^58
, ^, W! r0 i* |59
' N/ R8 }- a; ~* g! N( }  u60
61
& k  ?' p. b# ]0 s0 J62
启动数字动效
9 B- D8 m) ?# \
const startCount = () => {
  state.localStart = props.start
' n5 L$ r, d7 t$ L) {  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
: V. ^( M/ G6 d6 W}
1
  I4 n5 N0 O+ C- C: C* f* n2
3
& J% d6 o1 f4 o# f$ X. W4 `4
. `1 ?2 g  w& \& A2 t: c, |: j5
6
; W4 A; H  n# \7 m7 ]0 p! x7
7 A1 Z) t2 Y, e- L0 Q+ Z0 S核心函数，对数字进行转动
7 m% Q' K7 H* ]' T! m" w5 X
  if (!state.startTime) state.startTime = timestamp
* B5 Q2 ~; Z; Z  state.timestamp = timestamp
; ^$ h; i( T, ~  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
8 D9 a3 U( b. {1 [3 p0 T: c  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
7 m' J: G# `* H/ h      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
! S  O6 L1 z, C: m& R6 F* y    }
+ j: O: T- z' X5 z9 A  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
! x3 A- g" h  H( V8 L5 G3 Y      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
& @$ b# Z& {( u0 c    }
. F$ |4 `# K0 l) i. S  }
  if (stopCount.value) {
3 V2 a* R+ m- @* f/ ?- _8 p' e, Z    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
3 G6 [& E2 C! d5 `5 C& k    state.printVal = state.printVal > props.end ? props.end : state.printVal
, W' r/ f+ k8 U( ]! U  }

  state.displayValue = formatNumber(state.printVal)
$ N# W. K# F8 f  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
/ Y1 \2 ]( g$ S0 Q    emits('callback')
0 c! {! ~: B0 y, ^9 u& S  }
* i5 }: I' U2 V7 ?( G+ M3 U2 `}
& X: l6 b5 H( T. [4 `7 l

// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
" j1 u7 W: w1 x% N1 `6 ^5 j  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
% P8 [2 H( H" a: [  const x2 = x.length > 1 ? props.decimal + x[1] : ''
( a5 L5 S* K/ W9 v  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
8 Z* R9 b+ j  w8 s9 ^/ s& _# U      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
  return props.prefix + x1 + x2 + props.suffix
; B& n2 W+ `; `* K9 N}

1
2
3
4
5
6
' n0 m* {* F8 ?8 X1 W! N7
2 s+ s! C0 e: L* {5 F8
9
  _' A/ g) C# V" W1 B( S* J7 D10
11
! X& b% ^4 c# y12
' E$ D$ h) r" z' o13
' w$ {" Y# X3 R: \  G8 V/ y14
15
16
17
18
' c) j' f7 T1 s2 V19
# ]0 _& C3 b6 ~20
. H1 l. }5 f, A6 q( W21
22
- m4 m* u8 e2 P6 o23
24
25
5 J- m% S6 a* B5 x6 H0 B26
; T( D# t6 w+ H- U27
) T$ w3 B. X1 r28
29
- K$ X' {; G3 m! o3 E' n30
! G  {7 N) h& X& k0 u) T* j31
32
33
( {/ x" v: r" x  i2 T34
35
36
37
' ], y% v; P( d* a: M38
$ `# q' A& O' j2 U: f& z3 H& I39
40
41
42
43
44
45
7 {, e' A1 X9 ]% {$ A( A8 q46
$ {2 d5 N5 ^" k3 o# f6 H5 G47
& ]+ x+ F- V' k2 R, x3 S5 X8 u! x% O48
$ J5 P3 M/ A3 p: N8 B) B' s4 ]取消动效
3 S8 i! p) d+ W) g0 K/ R& ]4 q
// 组件销毁时取消动画
6 o$ E; j% a  o" O2 ~onUnmounted(() => {
# _( Z) U. \# c  cancelAnimationFrame(state.rAF)
- J8 t+ ?* y" ?! I9 C})
$ f$ k  q- D# @6 ?! X# h1
) D9 Q. O8 b' P8 _2
0 C- @: ]0 N) K0 W( d+ d3
* @( [5 k$ w' R. L% I( w" D4
完整代码

" i( t/ R1 C/ C, I. H6 y$ V) v. R3 T' q<template>
5 P; s& ?) j9 C' J2 M8 c# e  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
! N( \) V4 L' ximport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
1 p0 C9 p5 \+ ?- z( U! Z) _import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
& O7 ?/ f% w2 s  sconst props = defineProps({
  start: {
: L: V% _* o0 O9 @: K    type: Number,
    required: false,
    default: 0
7 t0 G6 v% \! q% s$ x3 v  },
5 j6 c* A6 D6 o8 s- o  B$ a  end: {
; G# @- M4 y4 ^  Z' M4 I    type: Number,
    required: false,
    default: 0
3 l1 N) T! E3 Z/ C; q+ s# A  },
) x9 O  m0 @' r  `% E! W2 H% j: g  duration: {
! [' m; e: [. E/ U- o" V    type: Number,
. T1 @$ i3 u! [    required: false,
    default: 5000
. c2 y: a/ ]# Q9 ^- }  },
  autoPlay: {
/ Q2 P) u+ j9 J' ]  a$ F    type: Boolean,
    required: false,
: N/ k0 s5 g0 l8 ]    default: true
  },
  decimals: {
    type: Number,
! @( E' [+ t1 O4 B0 d- I& M    required: false,
' u" [& E4 X5 q  M' d& ^+ c    default: 0,
1 |6 U" |; b) C4 M& ^    validator (value) {
      return value >= 0
. B( V0 A* ~; _3 P4 e    }
  },
  decimal: {
    type: String,
3 S* N2 y0 z- h/ [) }4 M1 r; t    required: false,
    default: '.'
, H; P& d: v6 D1 S% P4 O. C  },
* d5 E  T( B6 ^0 @! ?0 r  separator: {
    type: String,
# @) K" Q2 V  Z0 S  N    required: false,
% v5 q, _- W5 h# Q9 i( j    default: ','
  },
  prefix: {
    type: String,
    required: false,
    default: ''
. i/ |% W  `3 J( v8 G+ U  },
  suffix: {
    type: String,
    required: false,
4 `$ t) E7 l8 p: [: H9 T: P    default: ''
+ l0 S' r8 A0 K" g" Y; e  },
* D; Y8 ~* M" N6 q" P  useEasing: {
    type: Boolean,
    required: false,
    default: true
) B6 A2 M7 Q* B  },
* ]2 v" d/ x5 h  @/ ?0 I  easingFn: {
    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
})

const isNumber = (val) => {
  return !isNaN(parseFloat(val))
}

- l" a- |5 s( y// 格式化数据，返回想要展示的数据格式
8 e( ]6 Y& z9 k* N* |+ b' |+ n7 Tconst formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
! P( t5 W/ i/ J6 l) T  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
" e7 r8 q8 e6 Q/ ?9 R0 S3 m- w( U7 T  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
5 l& l% w: I( Z. N9 ]% ^    while (rgx.test(x1)) {
2 y  H9 V' m4 {2 l) K      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
3 e% }7 L1 W1 |/ q0 d2 W# X    }
. j: l* g* A  ?( e& ~2 w  }
2 v( G8 m) v7 i* P8 O( t  return props.prefix + x1 + x2 + props.suffix
+ u* L/ Z  }* _2 l2 x- X9 j( ?* c}

5 O" ^! r" |* N1 b, d4 ]+ v// 相当于vue2中的data中所定义的变量部分
const state = reactive({
4 ]8 j( Q! F4 T/ ?0 n$ f" z  c  localStart: props.start,
  displayValue: formatNumber(props.start),
" [- Y; T2 y( i+ T  printVal: null,
  paused: false,
* l+ K3 }' r- v% G, B% c3 W  localDuration: props.duration,
1 ]+ W2 S5 i: N  startTime: null,
2 ]+ E4 t5 I! r) I  timestamp: null,
  A. B* T' ?4 K# D' Y9 u  remaining: null,
! F, q+ b0 q$ Q: p( _7 @  rAF: null
})

// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
* L. Z" s: F# H  Q7 X  return props.start > props.end
2 f- B: `* i+ S4 k2 s})
9 K5 P( [7 }' h4 c% A; H4 Z// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
- V( D3 {2 w8 E5 g3 u8 q4 T% E2 Econst emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
' i" A! [* T. n9 V( ^  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
- {2 `+ m4 d8 z. S! M7 m  state.rAF = requestAnimationFrame(count)
9 P; T! h/ W8 [, ]( C$ S}
7 V- w  T: {# d* x
watch(() => props.start, () => {
  if (props.autoPlay) {
+ N; i* f# ~* u    startCount()
% o( ]. }$ n; B: ?  }
$ Z- o. q! v# r3 v2 [9 R7 x: W' [6 b})

watch(() => props.end, () => {
  if (props.autoPlay) {
8 u- D- G* D4 ?) J( u; p( `7 L& ?    startCount()
  }
})
( ?: x1 l! |: h# ]" I. M( a  Y// dom挂在完成后执行一些操作
! w4 l3 y% F1 V  ?onMounted(() => {
, G0 R2 e) U. J7 }- m9 Z9 Z) v9 J  if (props.autoPlay) {
3 Y( d- c0 A8 o, h# E. J    startCount()
* k2 X7 O$ E! b$ V  }
7 v6 q! X: d$ E; V* E$ L  emits('onMountedcallback')
})
2 b3 G6 M$ b! {3 R' T2 b% k9 c// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
) m+ q% u& K  S3 w: T, g- [}
// 恢复计数
. t" G9 h1 q% B5 X8 |8 f- Q) n  zconst resume = () => {
& j6 i( Z& h# S* k3 T/ k) d. p  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
; A# Y8 P! S6 E2 Y+ w, V! A5 ]# n}
; c# x/ m; |, D; X. \" h. i9 J3 o6 ~
& l1 T9 x" x/ e  e% cconst pauseResume = () => {
  if (state.paused) {
0 Y2 S& }+ C5 d$ _/ W! E6 T+ @    resume()
  ~. n* A* A' {; ^* O/ t& m    state.paused = false
  } else {
( B- B- y" ~0 j1 P$ S& m    pause()
    state.paused = true
  }
}
9 ^- N, ]1 y; t. {- }9 L& w
const reset = () => {
5 I, y: ?2 h5 V; d+ L  _  state.startTime = null
  cancelAnimationFrame(state.rAF)
6 ?: ~2 j. y0 p) \" ]% z! X1 d  state.displayValue = formatNumber(props.start)
( y' V) e. l9 Y* R) p0 J4 P}
7 b5 b5 a  C* e% P8 D! J1 W6 f
) b- N3 \3 j6 c7 l9 nconst count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
8 q3 n2 I0 }% m  U% s  state.timestamp = timestamp
' E3 J1 ]# x  g( V. ]5 m$ U  const progress = timestamp - state.startTime
) R5 ~' E8 T$ @! X7 d  _. M  state.remaining = state.localDuration - progress
+ I3 e! ?1 p2 y* X) Z% C; q! h  // 是否使用速度变化曲线
6 N* v# @; L! C+ @  if (props.useEasing) {
    if (stopCount.value) {
" W, M# k! B/ @3 |      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
6 V9 P  H5 p: z3 _' W' }" Y    } else {
: o+ s& ~% |6 K2 y      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
) q: f0 T) `0 D/ [/ O! V" ^6 f  } 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)
5 @- Q* q3 H- t# T4 R# |. k    }
  }
% o# ^! g; f8 _' a  y  if (stopCount.value) {
4 ]8 }* p* o3 _- g! H, f    state.printVal = state.printVal < props.end ? props.end : state.printVal
4 m( U& b$ `. ~: A  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
! V) R6 _1 m9 N4 H; i  }

% u' p! d% V+ G* B- A& O7 w- ^5 @  C  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
4 Z( x+ ~1 w% R6 I" {    state.rAF = requestAnimationFrame(count)
! h* s9 _  ?2 ^1 B9 c) J, h$ R  } else {
/ y* r( y& G7 \# k: c    emits('callback')
5 a  I. w0 Y- `/ `  }
# ^9 N$ @% h' p}
; o$ ^# W0 {4 ?4 n. m$ t, T// 组件销毁时取消动画
& j" V! a# T- D) {$ EonUnmounted(() => {
, k* A+ w% W, c  cancelAnimationFrame(state.rAF)
})
</script>
$ i, `* c5 N5 |8 m! C0 w2 }4 Q6 }* X
, R" e* h0 o% E1 n1
2
. H, w* E2 r& a1 J# E3
4
, J) V3 }* `* l8 }% V( \5
6
7
! _/ R9 C" i4 P; _8
' [5 b+ X* L7 u2 I# _3 A3 X8 ^' ]9
10
11
12
7 ?0 f, Q  y8 ]1 @13
9 K8 t3 }( Z+ H! s14
) [+ E- ^: [' \! F3 z( |; h15
16
17
18
19
6 s6 N7 s1 }2 |% |) w0 y( Z20
21
. c% t& `5 F, T# I22
23
24
* t! Y! L5 C! {8 c" M25
0 {- a% S) W5 p26
27
6 Y( y! i3 I  u' I0 }! }28
29
30
% f0 y5 n* x. V, i0 G; @31
# n* Z6 O9 G6 ~" {) n32
33
4 n9 r6 U* V; G0 D/ |: S2 `0 H4 [1 n7 e34
; ?* r6 S3 A6 J35
36
37
1 b( |+ T; l) N2 L5 a9 H% i% \38
$ D9 d1 x  s. [39
40
+ Z- R: [  ?1 p& {) y, C: }41
42
, O% Z: x3 u1 w- j43
' p7 W: Q/ R. {  i9 X1 O44
0 z; }3 E5 m4 J2 \0 T45
  h# [0 [$ _" P( Z- d  X6 U46
. s( l% q9 b) o2 W. }# ]4 v47
48
49
3 c, b+ A' {/ {% U2 p' E50
51
' t2 C) W" d; N5 }9 v( ^, M52
53
) @& m+ l6 O- @. O" m54
55
. j, V" \- B2 u8 T+ |4 w56
% f, M, n/ ]$ \7 H1 I: G57
+ e- E7 h6 ]# j6 j2 j: K/ D58
3 b* e' v9 r, q" B: \! X2 _3 K59
60
61
62
63
64
65
66
67
68
7 E! }6 c+ Y( u! h2 }69
70
71
0 x5 _" t1 {, P  w4 W" L6 N72
73
/ T3 k8 B8 z. A1 F* ~3 f# f0 S74
75
0 P7 r4 H) o% F3 l: l76
77
, E$ T0 s. G5 k; D. I$ ^78
79
7 }% }8 K4 V7 k: h80
: W. M9 v8 A/ ]% E81
82
83
84
85
86
) C5 p/ C7 P8 R/ h( u2 t, W8 X) ]87
, L0 k! R4 a1 ^- a6 G% |8 y$ N88
89
) h% Z. n! y. V1 y: Q' b, l- v90
91
92
$ u+ a; T1 r4 `, Y7 R) T93
94
3 F5 b& k( x( J/ C* p95
96
8 s/ [7 a+ O3 j97
  c& j1 S' f* J2 C+ r2 ?! H% X98
99
  m1 f, d9 ?/ `7 p! l) x100
101
102
, O5 g, ?' m- r# |& E2 S103
9 v" P" m- [5 q+ M7 C2 Q5 z7 Z, Y104
8 L3 O5 ~! o5 P6 P105
+ i" H9 W  m7 g* H9 d' J, B106
8 B7 H6 s- ?$ E! d" J% P# M107
108
109
, T* K2 h: w& x- A) c( w110
111
( r! o5 M# Q, c, Q8 z" l, `112
5 n' q0 y+ Q6 P( [113
114
$ x# i* d& j3 C! V# i+ H* u) x8 @115
, Z, d; n' O+ t) m3 L' `116
117
118
# t, K% \  g2 }: w8 n119
. d+ n0 a/ t3 `% G2 s120
121
122
123
0 d  L) E& G% s124
: G1 i4 }' n4 ]4 o125
* w5 Z# V$ D! I+ Y( `# I2 V. v126
127
0 ^6 A+ k- F. W: H2 M128
129
130
$ r- T+ j1 m. |5 l: _131
# X& ^! }% Y& a  i* A1 Y132
133
( L! N  o! D- B0 a134
135
136
137
138
# a5 q0 r8 h$ i; J7 D139
/ y7 |3 n4 d2 l140
141
142
143
$ h  B  m( @2 G$ f) {/ D" k144
7 c: o& i9 w- Q( b7 x+ Q& G4 e145
146
# M$ P% b: m) {) t; u147
148
, ~) ^" A6 ~+ s" L149
150
- l2 I& @8 J+ z5 g6 O) m/ {151
' {2 Y2 }1 e# g8 {9 m  e" s) C152
153
) y8 c" D+ Z3 W% L8 Y154
155
4 T. }( P& c* F156
157
2 o8 k/ m; j6 D7 S7 M! {158
159
6 J" p* H, r* i7 p7 Q160
- \6 n* t) d  f: H161
# D  j0 B, t7 Y5 D! [* ~162
7 N+ F6 ^8 `, p0 ^  W% r% z163
8 h- t2 X( j& q  V' B: k" D0 n3 N, R164
$ i% i9 x% a. y2 q2 F5 ~165
166
7 Q; K) l" R' b# f+ K167
) H5 S( S6 f, R2 {7 @+ F" I8 L) j168
  l% m( ~& d9 q( {169
170
( q: k! c  R6 e0 E0 m: ?' y0 [171
172
8 G; B+ T8 B& P173
174
/ d, n: m4 G0 w7 |! R& Z  W' i) X175
176
177
178
+ H! g) I7 |4 @% B179
* z! ~4 V; E1 o8 E180
$ K( h$ E9 }! E181
182
183
6 \+ ~% Q; _1 K2 j4 J1 M184
185
186
/ R/ Y7 w4 X: H: p# p' y187
7 v+ o$ w3 q& S) b6 p8 S0 j5 \188
+ n7 s$ O( a* V3 F% e5 ^5 ?189
190
191
192
193
194
195
$ C, }( `0 g3 @+ \$ g. |- m: N# d" q/ g196
197
. E8 J! E9 P, i1 J1 f/ J198
199
200
201
1 T, @& e) U5 X8 H, Z6 _202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
* m7 p6 k9 S% h1 [后续的线上demo演示会放在
demo演示
完整代码会放在
个人主页

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

个人简介：承吾
$ v5 r& O2 L7 h, a; J2 Y工作年限：5年前端
地区：上海
8 c( s8 y% M6 W) Q0 C" n' m3 o" A个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
9 i( g( O3 V% |" V8 z
2 i8 v9 f0 m2 @9 }, a2 ~

. t: S/ Z* r' q0 i4 X5 \
————————————————
% J' f4 R0 g$ A  n. |版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
7 g+ n% C8 Y6 `& \& v

9 e6 C! M- ~* s