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

杨利霞

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

2 ^) k% c( q# M$ \前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
* ^/ W3 T8 |2 }& [) t, L/ Q

思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

7 l% f  K( O! [( P! a文件目录


使用示例
: T2 I2 |4 c  ?* X<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
" v$ @3 y$ }0 d  N+ B :autoPlay="true" // 自动播放
" T) E8 ]9 z$ F( S4 F* p :duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
6 \8 _$ N, z/ v2 A0 F1
- G: K/ ~( l( \% G, L2
# D, D6 {$ C2 ^& e" g: L9 Z3
4
5
6
1 A6 \4 V" c( e4 U. t7
8
入口文件index.js
. ^- k9 S$ u  b! p! ]. A, Y9 w
8 I9 ]9 l8 _+ h, s6 sconst UILib = {
" L- }7 u: b% `( r  install(Vue) {
5 U' E" B2 l- d" G    Vue.component('CountTo', CountTo)
  }
& P& _2 Y( \# l, C5 L" P9 Y' h}

export default UILib
/ H& e( I. B# J$ k/ ?4 T
1
( c- E$ V, p  f) l9 d: Y' R2
" _7 Y2 X/ ?; S, b! x5 E) A3
4
5
6
- F5 N, `+ y% s+ B7
8
- Y% H7 d3 D3 B* n3 X1 B% ^0 O9
main.js使用
/ X: |2 W- O9 \! Mimport CountTo from './components/count-to/index';
* T5 M7 ^& g0 \+ B5 H- v3 Capp.use(CountTo)
' ]7 C6 ^- f2 X7 n! p- [1
4 c, ]; E, y* W/ }! Y2
requestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
3 T, ^( ?' a/ q% k1 r导出两个方法 requestAnimationFrame, cancelAnimationFrame
7 ~; N4 o9 T9 D1 f; e% F5 n各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
9 R8 x( {6 Z; w" H, L增加各个浏览器前缀：  
0 q. v* ^7 M2 h1 V! l( ?; blet prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
, G3 H7 t# }# H) a2 ^0 a: p    for (let i = 0; i < prefixes.length; i++) {
5 V3 t: z( [7 Y( S7 d        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
* z. w- ^5 k2 U5 `& {1 A3 Z& V        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

0 a' \. x- ~' z7 ^/ v! q/ i  //不支持使用setTimeout方式替换：模拟60帧的效果
' o2 E: a2 U% o/ p8 @7 \  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
9 B! }/ y+ f$ s7 B    if (!requestAnimationFrame || !cancelAnimationFrame) {
9 w, o, [5 u8 @$ q9 G' g# s        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
        }
7 ^! |2 }, C" t! z2 L
+ |, z0 D) O8 w( s$ m/ P' Z        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
" g5 s" v/ [2 K- a        }
7 W+ e7 a  v; l, l/ @* r    }

1
2
3
$ |# B7 z# s0 U. `# b4
/ H3 _- s2 C' r& m5 s$ s5
6
% @/ G/ B( w$ h. l+ A7
8
9
; M- v/ Y; a" I3 e; e10
11
# c0 Y" H: M8 ^; x12
13
$ K  o, b0 |; P- T# m7 o1 M; m14
15
16
1 j8 F* g# B9 X6 I6 o& _9 v17
18
  ]9 C4 g3 k, F1 [. K2 i19
0 l8 q, N7 @/ i/ M/ n# ~20
21
22
23
24
25
26
  M2 b+ b7 J4 A6 j+ N27
9 B7 Z0 ]; L; h28
* k% l" l2 E& t4 m; k! w$ n  Y29
30
5 l& E1 L, |3 z31
32
完整代码：
5 I% U3 N- z* |( \requestAnimationFrame.js
0 D7 h+ W5 @! B& ^
let lastTime = 0
( X# J% K& M; t" p8 B1 _" @const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
+ }" c# k# ?/ y6 v) N% @9 U% [
let requestAnimationFrame
let cancelAnimationFrame

// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
1 f* |; a2 e: M7 L: d+ s2 xif (isServer) {
" P7 c1 l3 i  I    requestAnimationFrame = function () {
7 Q; h7 M/ T+ t0 G* ^6 H        return
, t1 K; d3 `( d1 Y    }
    cancelAnimationFrame = function () {
7 W: L" V4 p. F) e5 s        return
    }
4 ~9 J6 d: ^& ]$ y" q/ j} else {
& C/ o5 w3 K, d    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
) c. _) n  X- J' k/ X' w- F    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
, ~5 ?' s! \3 I: `+ B; A        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
5 X6 b# a5 q0 m1 e        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
2 ?! @% @2 ]$ ?    }

; n1 I) m0 F( z! f    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
0 h( c- {/ E8 m6 X! u6 u; K+ \    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
7 y% R( [( a+ p- _& O$ c            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
! W+ Q8 c- R- @' d7 ]- `            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
& {0 ]  {+ B# N, K            }, timeToCall)
3 Q; x7 @% b# l; l            lastTime = currTime + timeToCall
            return id
        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
+ ]7 d1 N; \) J* B5 L( f& c6 q    }
}
% v1 V7 w5 S- k
export { requestAnimationFrame, cancelAnimationFrame }
0 U) @5 h& X  r3 T5 c& C
) X1 w. h1 ]2 \! X% }
" _- l* ?' ]3 b* \7 ~# L3 I! w1
6 l7 b: a1 W# k2 v$ Y2
3
4
5
6
7
3 Z; x$ C, |( `6 M# W8
9
) |9 \. z: f# i/ [10
11
0 s! A4 ~+ L$ L12
13
14
3 }2 O9 {- I  C8 F15
* f& R. `) Z1 v+ t, l16
17
" a- w& v6 Q/ i' C18
19
* I9 Z& @6 A- M8 [9 t20
21
! m  O; d5 k. h+ \/ q22
23
! |- [9 ]$ x- }24
25
26
, p* J( k1 L2 _4 q  m* a6 R% y27
28
29
30
31
1 n  q/ s9 [- W. K32
33
34
8 n% Y/ @! Y; b# L) P9 N$ ]35
36
37
3 @: t. |0 T3 G( V# x38
39
1 d0 ~7 m. |, z2 a+ @40
41
1 R; C* B  Z' e$ q, }  E+ H5 |2 m42
3 Q& [, @& Q" U9 q9 v* U# l9 T43
44
2 o" r8 \3 @4 v45
46
47
48
+ F, h& z5 M8 z3 z5 F2 ^$ ]4 |7 t" FCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
; j1 D+ |5 j+ v( F7 d1 f& }5 h
' ~4 ^2 p* K7 J5 q引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
+ z; r* X( H( t' W1
需要接受的参数：
4 Y1 a, v) q( a( L
const props = defineProps({
  start: {
2 L+ o8 q# b, r1 t  s% g* |4 `    type: Number,
    required: false,
% O1 A8 ]! ~4 Y4 y0 _  H9 {! A    default: 0
  },
  r0 w3 |" i* {" G2 ]/ A  end: {
    type: Number,
    required: false,
    default: 0
  },
  duration: {
    type: Number,
    required: false,
# s+ X1 Z  e) t" X9 e    default: 5000
  },
' E: R1 |, ]: {( ~% C8 t  autoPlay: {
* W% e  V8 z$ c& b- u6 Y8 `    type: Boolean,
* q2 k/ p, l8 Z! v    required: false,
1 z8 X; c! y  r$ p6 W, R    default: true
  },
! X: U) u5 H& @0 F2 _) `9 L1 L& m  decimals: {
/ {; ]; y7 D4 i$ @1 Y: B6 o    type: Number,
    required: false,
! M6 }) K" T$ O6 ]& s# J    default: 0,
    validator (value) {
7 q4 }- d. B4 t9 b      return value >= 0
    }
1 p4 m7 w  N5 O2 C4 M. c  },
  decimal: {
! M3 w# y" H( p4 d- t: v) I    type: String,
( ?* N5 o' [4 R, _" A: D    required: false,
    default: '.'
  },
6 g8 q, {1 n% t7 K% U8 U  separator: {
    type: String,
0 D0 N" {& G, H1 ^) P/ E    required: false,
    default: ','
0 ?# S. R& Y4 |+ [* A( o  },
7 K2 T( o- c) @  prefix: {
    type: String,
    required: false,
    default: ''
. |3 s, W: m) a$ q- E  },
) B' A0 ?7 d8 h/ p4 m3 u  suffix: {
    type: String,
    required: false,
    default: ''
  },
# ?1 W9 j- s, L, O) }  useEasing: {
) R5 H( `  \# ], X0 k    type: Boolean,
) R/ g# D$ M$ ~+ h8 k# N4 `" s& x6 |    required: false,
$ c1 L  c+ J. c3 Z) x" q6 o; d    default: true
  },
  easingFn: {
1 W( A- F) Z! x2 O) f  t+ ^3 d    type: Function,
# W( \/ m% x4 {7 e+ f    default(t, b, c, d) {
. V* m% ]! V. T3 y      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
. G% [* x# Z; q9 S* m  }
2 d6 c8 I9 P8 F3 {  W9 _})
* H2 i0 G2 `+ D/ R
5 }) b& Q; D0 Q) J( z
  E, Z! \( K- O; J  \( F2 |1
2
3
4
5
5 r3 ^* Z2 H( n. x5 x; a: b6
7 O/ V1 P. ]/ D; q* ~6 y; \" ?( ~7
8
9
6 O& c" `: g2 w10
( {( Q3 w6 S& X1 H9 X# c1 X11
3 R# Y' U9 `0 j; h$ n1 L9 _! |+ X12
13
1 n) C1 Z% f6 G  U5 ?, @1 h14
15
) B6 x/ G1 a# [  U+ T% E" N16
17
18
19
20
21
22
23
24
25
26
27
' H0 q. g$ M% S* X" i, k7 l& c28
$ u4 V- U% E/ Y29
7 _& G6 W- }/ w8 K; t30
0 T# i8 I1 Y4 |& y3 b! Z31
32
! k1 C4 X2 K! a1 t  G2 C5 d33
34
35
- P3 [% o7 r7 X4 D36
# j: K* Y, q$ O, R37
% u/ A* y) g+ ?6 @' `38
39
40
5 c( Y  X! s2 b- A& j6 w41
8 w2 j" ~+ \, F& i42
. j1 ]- _: w: j$ E4 n43
$ K0 r# x0 @( @9 \& @44
45
) }  y0 p* _6 \( J  _8 h46
47
# u" T+ Q+ s. L4 `+ O48
49
( S* _9 t! {6 P1 T9 W' ]2 |50
6 X! M- P* ~3 i- Q$ Z; p( e51
52
8 r8 k0 M9 f+ r6 z5 C% S53
54
% y& Y) Q  S3 H' j# u! ?% I, E/ u55
56
5 o/ V% M2 j  p# u' l& F57
58
59
60
% x; T) }) m  g) v) G* _9 y61
62
启动数字动效

% x; y. v% c5 p  Gconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
3 x& n. M- H: ^* ^2 b  state.rAF = requestAnimationFrame(count)
6 ]+ b  p- O2 }) \: o9 _: A4 M' Y6 Q, C}
1
2
8 y5 x, y; @  e& p! L3
; B- V2 \, b/ {7 Y4 _( R1 B. L3 c4
5
# D2 E5 K4 c+ |& X0 V. Z, [6
7
, y, @7 }+ }5 x' G( ^核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  A/ M! Z4 z' l1 l6 a# V  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
8 e+ [+ k; w# p* }7 [& e7 e. A    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
  V# V3 }  P( b1 l) S' a( H% J! u( |7 M    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
8 ~  X" R4 R0 ~! h    if (stopCount.value) {
+ @8 u/ A! o2 \; i. ^% m# ?$ v& S      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
+ X. h  v: Y% o    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
* N) h$ R) t+ f( C7 C4 t% Q3 ~    }
2 L" B5 ]4 X. f9 ~2 X! O, f: Y$ S  }
0 p0 M& |2 x  Z2 d! u  if (stopCount.value) {
# k& m4 B, ]1 U8 i( S: W) \; _2 c    state.printVal = state.printVal < props.end ? props.end : state.printVal
& |( A& w, |2 [/ L) [. q0 Q  } else {
6 L' f9 g# E9 p$ J/ b/ b    state.printVal = state.printVal > props.end ? props.end : state.printVal
6 `& [: |  w( b% P9 q7 v8 I  }

6 w1 g5 R+ f8 X( m# e8 T7 i  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
/ @5 m5 |3 I, k& M% L) x  } else {
    emits('callback')
- F( L9 e) t# h  P  }
}


// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
1 K! B8 ^$ i/ p9 P5 @. y' K* m7 R  val = val.toFixed(props.default)
; R% }0 Z6 S- d' Q7 @. M  val += ''
  const x = val.split('.')
7 }3 c# b9 R* K; s: Z' A  let x1 = x[0]
2 ~/ b3 H+ k. }' C/ ~& D0 S+ ?  const x2 = x.length > 1 ? props.decimal + x[1] : ''
& I: }3 R" C* S9 M' X  const rgx = /(\d+)(\d{3})/
9 z8 p" p( d# w  if (props.separator && !isNumber(props.separator)) {
; n( J* C! L- h- m    while (rgx.test(x1)) {
& R9 U2 ]# a& r& k- h      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
  return props.prefix + x1 + x2 + props.suffix
}
/ u( W- o. I7 I3 t- X- m  F
1
2 s5 h; A5 [8 a  x2
2 k# @: S( u# U3
3 H# f0 T, h) n1 x$ t& K/ w, ]4
5
6
  X6 P- L8 R' _8 a7
0 s! Q9 c* C# H; s& V( N' v! z8
9
/ S' o, Y6 D: X( V# N7 W10
* H% Z% M4 o5 x9 G11
12
1 |( V6 S3 W4 a+ Y8 \1 l7 e& l13
14
15
16
17
18
19
20
5 G- q$ T+ a" s; V! G) y21
0 d: K6 X; L6 v# `2 W2 `$ S22
% s7 {/ l  }+ B# [5 @; e! W23
( ?9 ?' Q' n; @  {1 p* b24
25
2 @* l; n  S% u% v26
- ^3 Q& _4 b5 @+ b27
28
- \: u; h* R  [9 e8 a4 j/ ~9 a29
+ A( q8 s0 t% e: c) m3 [30
31
32
4 b% s. |1 ?. W4 ^7 p33
34
1 _* l4 z8 H) u. E; L35
36
$ p& K1 E/ a/ i! [: g% ~37
38
. B$ H6 h) C4 }# X39
40
, i  {) ^3 u! b/ @41
42
$ T2 c4 j1 l( Q, Z# d9 r43
44
) o; }4 Y) {: L5 R0 h45
46
9 q- F& X. I/ I7 c4 Y7 L& H. k: y47
. A. G2 U, I1 R' U- i2 A, w3 F48
  G+ _; o+ W" \! _4 A取消动效
4 [' C6 u6 h4 C
2 b6 H: x; u' S2 H" }8 h8 t6 [// 组件销毁时取消动画
  p# {: N0 O: v8 Y, ronUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
* f7 P, Z# q4 m/ `0 [$ ?1
2
9 k) T/ p) M3 E' y& n3
8 s" _4 O! i. Q4
完整代码

; p# I% S0 J0 G0 Y1 h2 h<template>
  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
1 B# ?. q6 E# G2 y6 ximport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
3 N( N+ [2 `8 Jimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
const props = defineProps({
  start: {
( F+ v8 I% e( ^1 K2 Z4 n( ~  Z    type: Number,
    required: false,
: H" x! Z2 @) l% @" }2 p4 i    default: 0
  },
  end: {
    type: Number,
; h. [5 Q' g1 g    required: false,
    default: 0
  },
" A7 O2 W; W* S  y" s5 q  duration: {
) |( a* _0 f6 f6 `( `# f  ~1 m    type: Number,
* _# P0 E% z6 T' m; C5 A8 G9 S3 `    required: false,
8 {6 t5 {8 ~) A+ {# w5 g# {    default: 5000
. v/ o% g3 y! Z( }  },
2 O5 j' j/ t$ w* [# _+ y2 p  autoPlay: {
    type: Boolean,
    required: false,
% t" `2 L. _$ ~/ D" ]/ w5 W    default: true
  },
: h: K. Z  A4 {+ v" z9 u, S  decimals: {
    type: Number,
$ L$ Q: f4 n2 w: T! D) a- _, A! X    required: false,
0 f! D* u( S( o3 I/ F& f; e    default: 0,
    validator (value) {
/ n- L$ B2 C2 M+ ~& F      return value >= 0
    }
# B1 G# ?$ j1 _  },
$ F( ^1 r% E$ u: a  decimal: {
    type: String,
, X' X! y2 l  Y" b# v0 f. J0 Z    required: false,
    default: '.'
  },
  separator: {
8 \7 l% j" ]8 y8 }    type: String,
9 f2 t( i7 e: Y3 C- c  G    required: false,
* \( d0 Y0 b6 [2 E    default: ','
7 G; [& L. O) S8 O- m  },
5 l# Y) K6 I, V& Y4 N2 A  prefix: {
    type: String,
    required: false,
    default: ''
! s0 N7 P8 ^  E# g/ `' g  },
, w) |$ d2 l) e+ E: y  suffix: {
    type: String,
    required: false,
8 T% z' n" T5 w# w' `6 f    default: ''
  },
  useEasing: {
- s: ~% x; w2 }, \4 o0 x+ |9 ]7 S7 x    type: Boolean,
- ]" k9 f2 g8 P1 A    required: false,
    default: true
  },
  easingFn: {
) u* ^  v! c6 V4 z: U/ {4 _2 k6 S    type: Function,
0 F7 z3 y0 s/ V    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
7 h5 ?' ]. w4 ^& `" e' J  }
})
: R0 {3 E" v0 Q/ i1 s
const isNumber = (val) => {
9 H3 o7 b$ b7 K1 u3 P- n  return !isNaN(parseFloat(val))
3 @. C1 g' G4 t}
, `. {5 O2 Y* s8 h' D( y
6 ^6 K% m, v( K# d& T: Y, }% y// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
2 _+ z: M# ~  _4 T4 E# |  const x = val.split('.')
  let x1 = x[0]
3 P$ [  k: B4 i8 a# z% ?  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
4 \& m9 ?6 J1 @. B) M# b4 h  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
+ L+ F* T9 U2 _      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
  return props.prefix + x1 + x2 + props.suffix
1 i2 n, s9 M) C/ Y3 t' k& m5 z}
* v$ Y9 P) R6 L. u, Y2 w: c
) Y0 M) @6 Y2 i% P: O) b// 相当于vue2中的data中所定义的变量部分
. B( i2 E9 K* L0 |9 Uconst state = reactive({
  localStart: props.start,
5 x* X# O8 _; a3 b3 g. r5 r( r2 ]& n- h  displayValue: formatNumber(props.start),
* M. k4 F$ K" {! o  printVal: null,
  paused: false,
) @. O# l  a* ~  localDuration: props.duration,
- k" Y, X/ U7 N. L0 `. A  startTime: null,
  timestamp: null,
  remaining: null,
  rAF: null
})

// 定义一个计算属性，当开始数字大于结束数字时返回true
1 A! a7 i9 ^6 y# q+ p5 fconst stopCount = computed(() => {
  return props.start > props.end
0 N/ D  H% @8 D- u4 ?})
$ F" o* U# A1 j7 \7 T( r// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])

" H5 A* Y' c9 Z% Q. D. s1 {" D7 n1 J1 [const startCount = () => {
  state.localStart = props.start
/ N% u4 f# ~( x" r* P5 d& ^" k  state.startTime = null
  state.localDuration = props.duration
8 g; k6 A3 J/ w* |* y" S( m  state.paused = false
; V) e, A5 x* r" H( E0 T" I# z% z% ~  state.rAF = requestAnimationFrame(count)
* C4 K5 e/ a: ~}
3 e' z5 P' D/ q
watch(() => props.start, () => {
  if (props.autoPlay) {
- l0 u4 B% ?0 E% Z4 s    startCount()
  }
})

) s3 @2 ]! U) y: @0 ^* Y  O. rwatch(() => props.end, () => {
  if (props.autoPlay) {
    startCount()
  }
})
// dom挂在完成后执行一些操作
onMounted(() => {
+ b! m( U" X5 c. t  if (props.autoPlay) {
5 f& z) I5 g% |; s# Z' N" x+ u( W6 z+ H    startCount()
  }
  emits('onMountedcallback')
})
, k* W: S9 k! y& e// 暂停计数
0 d* _* J8 C+ X5 W8 g- t% wconst pause = () => {
; D% y3 k! ?7 _) k) V  cancelAnimationFrame(state.rAF)
}
// 恢复计数
const resume = () => {
4 g' Z1 G; L7 q+ \* F& K' C  state.startTime = null
- C, X" e6 s: J7 l# g  state.localDuration = +state.remaining
  k5 x9 T* C# K7 y5 m! H9 L  state.localStart = +state.printVal
  requestAnimationFrame(count)
}

) Q; B# e& [' F2 y7 v  Qconst pauseResume = () => {
  if (state.paused) {
, ^* _# T2 ?) @6 Q    resume()
    state.paused = false
  } else {
( n& j" X, l6 s- X- x    pause()
    state.paused = true
  }
}
% O/ @$ Q5 B( R
const reset = () => {
# Y0 t' _  }% u  state.startTime = null
  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
}
9 m! x2 e6 p4 O3 e* o. }3 u
const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
5 D" j/ X7 ^- Q" T7 d  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
+ L$ \3 r& l4 ~    }
  } else {
1 y+ Q: n  f& n" f+ T6 r    if (stopCount.value) {
& `  N) C/ w7 @; \# J' [; A9 Q5 e$ R      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
- ^7 t5 `  b: |0 _0 J' Q    }
' ]3 [" l( g1 F& p) `: G, C  }
  if (stopCount.value) {
; _/ u$ M0 T, P& a: m    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
* h; b3 r# V" U' X# D( T; S    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

  state.displayValue = formatNumber(state.printVal)
3 q. A" n% k. ^4 t  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
% n* }. \# z3 Z  } else {
    emits('callback')
  }
}
9 Z5 S' F: T7 ]7 T3 C# i" D2 L$ |// 组件销毁时取消动画
onUnmounted(() => {
  w2 {0 c- A  I, P- Y* M  cancelAnimationFrame(state.rAF)
' t) H" c- |  D})
! f$ J4 D* n  P( L! O</script>

1
2
. B0 Y4 x% G, |+ N# Q: ^: `3
' g) x7 [5 R5 e4
# T. _, C/ T( U0 V8 X7 V- e5
5 O' t2 d9 y* \6
7
8
9
+ B( ^% x0 F/ \8 y. Z10
9 {' \- d! g. W# c$ _11
12
13
- h6 K" Y: a& h0 r14
6 t) x1 f3 w8 f15
0 G1 F: Y) R8 _& k/ w* ?16
) T! q) T, q4 I17
' o0 _  ]$ r/ D" ^! }18
19
20
' ^. F; c. J2 y21
+ Z* [3 A1 y0 ^2 G" `* Z7 z  r22
% C! c; r  f0 m( _4 i6 y23
24
25
/ ^' i* Y! z4 f3 {1 z6 e& S1 h* Q26
  Q. \. A% d/ ?27
28
/ A$ N& C1 _  u5 m% x+ S# A$ K  z29
/ k: ?, i. g9 j) e- Q3 \30
' F/ X: K# D4 I/ l' F# k* e31
32
33
- X# t4 Z) ^, g2 ~6 ~" [34
' g2 V0 u9 a5 O9 Q35
; t# [/ }1 I- y; l& S/ {36
) T5 P6 F1 {/ ~/ y4 h: Z3 v37
  X$ d1 k" p- |4 i% m38
39
: d( C9 i" w$ R40
( O, r  e; V: p, S6 y2 Q* f41
$ l: ^1 i  v5 [$ O+ P" Z( w% P42
43
44
0 q1 F& W/ h- c5 e1 B45
/ ?' m3 P0 ?+ v! n' |46
6 T% P5 ~, [3 W0 E$ R47
48
7 Q5 ?: l5 w) a) H7 }2 O: M3 d1 |49
, B, u, `% A. R% a3 Z8 O& u' k50
( l/ d" Z; S2 x  U51
52
53
54
: @4 u6 u3 O0 I55
0 M/ M. l/ f2 X% {56
2 d; C6 u9 c% m5 `0 O2 H  \8 e57
0 {5 B! p2 e/ I6 ?, h58
59
. J2 M" f; e) _3 T9 D' ^; ?& d- @  M60
61
) F: J' `- C& g$ o, @0 Q62
) L. G  w7 H: e' C; w63
# m& K/ I/ u5 G$ z5 b; K) b64
65
. q- H4 {1 o) z* O- K8 R3 R6 W0 ?0 G66
67
1 O8 L. D( ~8 C8 t. e4 u68
69
) ^; F! c3 Q# U: @3 ^- x70
71
72
73
74
: e  J% S$ D  T9 f; T3 {6 N75
+ c' g$ g% F$ \$ |1 n/ _76
77
78
79
) W5 q" ^1 l5 F0 N80
81
: }$ R& U+ V5 j" K: C7 i82
9 n. \' e) T" O6 c5 O, x83
84
85
86
" G2 H# w, B- I! r6 F87
5 c- N( f% I9 q; n2 T/ p: I88
89
90
91
92
93
& @0 J. D4 R# E94
95
& [" d, A7 w5 C96
97
& P" f  ~! @+ n: C98
" T- _. X4 M' p1 {99
8 x; \7 s- J7 u* i$ f100
101
102
103
* W/ H! b4 t$ B* U- B9 h5 `& C104
105
106
  s4 b1 H' N4 T& A6 ]. f107
108
) Z5 n! _( ]  t1 G0 A9 m9 o109
# J7 I  e; V* [2 G110
111
112
113
9 o4 p; p8 E2 r$ D114
9 P4 m: x- S, q, e" c* L115
116
117
9 `/ M- P: T- G5 }" X# p118
- k/ Q# z) H2 |3 ]# ]5 p119
+ l3 x% @8 n& A120
8 `) G% D8 P; R2 X( n; C121
122
123
124
125
6 N! }* K1 ^) @5 u2 ?; r* A126
( }0 x8 T/ a& Z, g/ n127
9 y1 z+ {4 e! J0 g! d8 k128
129
130
131
132
133
134
135
0 |0 O0 u  w7 N136
137
138
9 l5 Z+ P# y1 p5 [139
140
141
142
) f6 _, y6 e% H! Q. @! R143
5 t; p) U) E4 r* \2 r  w( y144
, U/ ?3 |7 g: Z" d145
146
+ k2 S& g  i2 m147
148
149
150
7 p  ]% B" n3 q7 j# W4 _; |151
% k0 |# D& y& T* z: Z  g' H152
- y+ l' S% s% n4 S- w  `5 {5 J" @! |153
154
155
- x! j7 L+ f0 I1 y' m& |156
& Y! T7 E+ E5 V157
158
159
160
161
: m: I1 j, P7 p* f5 t, M162
. D9 H& r. y" b7 z163
164
165
9 z4 l% f% y4 \. c9 z6 k166
167
168
169
  N' K9 c% a1 r7 W& ?8 `" a7 E170
0 v4 s, m$ E$ B4 C171
: q+ _1 d1 K# I8 ]/ j# s6 m172
173
  L; [2 E" V8 K$ v3 ?1 [) Z0 l3 [174
* l2 S- U8 ?2 h  x& `9 X. L175
176
177
178
' n% [3 G3 t0 z1 `. Z& _179
2 ]! M, R7 M9 R+ |180
181
% w$ S2 j* a: i. T0 \3 R' P# B8 t182
% l, S( D! F7 X! Y$ c- t. Q183
) @# s; |1 z, Q/ s3 V184
185
, B; P1 A% M% Z. [2 k1 W3 r" G' c: w7 y186
% j9 w# y6 z, b  J' @( r: Y187
9 k! I% G, s. F8 }( T3 z) t; f188
189
190
191
& v! T* R0 z) s% g6 m192
& y% d0 K8 g5 M0 ~2 b$ U0 F193
194
195
196
' _7 ^  Y/ j$ S197
198
199
200
201
" R* W) {1 u7 _* O+ F2 S202
9 k; Y7 b* Q: U- I. K, J总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

3 L4 {4 p/ g- y7 a( idemo演示
后续的线上demo演示会放在
- }8 Z5 e4 f: Y" W& R2 n& h% {/ m* b' xdemo演示
3 }: }. g0 d6 U. S  q* v2 Z完整代码会放在
/ ^/ n% \; ~; H5 c1 I个人主页
& V0 F5 {- E+ n  B) H2 S
1 G; U" A; [0 F- z$ s) |8 s3 k& M希望对vue开发者有所帮助~
. ?3 e; P  a) X3 j& u. `
# p2 u, r/ d: L! q" ^; h" y' ?! }个人简介：承吾
工作年限：5年前端
# j% t$ |; [2 J- l0 ^地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
& P8 Y& ^9 H' R% z
4 B* [% f5 K- h
2 Y% m. S- N# \* r/ H9 T7 J

3 x) M% m$ j% j8 q& x( a2 V————————————————
1 `0 @- a' {1 c版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
0 a, s8 T1 h( R) k原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
$ w2 L4 g, T& G

) \) ~5 s4 V, m# c, l