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

杨利霞

vue3 | 数据可视化实现数字滚动特效
4 C( H2 j% I0 [" z; k
前言
, c/ R% q9 i; Y' V/ n2 k/ lvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
8 q. \1 s( G) O  R  Y的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


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

文件目录


5 C# v6 Y" u' Q, _+ n使用示例
4 R0 T+ s/ F, Y6 s2 Q/ H6 a5 F, e<CountTo
+ z6 u( B5 Z3 A5 i :start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
$ [3 t5 H+ ^" I2 C6 w- o' @1
. }+ {  G; `( J$ h4 W( Y2
- C9 Z7 _6 [2 d' E1 n$ k3
4
5
  m- ?4 L7 a% b* n! ~# D- v6
& R6 E) z* R9 S7 o, S7
. E+ U" J% X7 D6 Z: V8
8 w0 Z- T; C) R% y- c, ?5 N- q' y入口文件index.js
6 ^, I& a: t  {% b4 y
! t* f5 ~# s5 O# Q: ?const UILib = {
  install(Vue) {
# \6 {, r6 V6 H) o( [& P9 J( J    Vue.component('CountTo', CountTo)
# @' B$ {, k/ |9 w  }
}
" O. j) _% z% J# K, X
export default UILib
7 P7 C5 w' S* l+ v( x* ^
$ z( {* F% q. y: `! ]0 u! l1
3 p1 Z2 P/ @4 j. @- S9 P) h5 \2
$ y9 K3 k6 P, j$ Z3
4
* h' w3 G: [7 }5
6
* U5 }7 s( S# }. z$ `2 W6 U7
5 y" Q" e5 ?4 W% L8
9
1 t) r0 t3 l4 u; H9 Zmain.js使用
/ \& X  j0 v( S# d! v) iimport CountTo from './components/count-to/index';
app.use(CountTo)
1
2
requestAnimationFrame.js思路
% r- G2 S: \7 A6 A" f先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
$ p) k( {. x4 d0 C& z& `" h如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
+ u, T' U% {, ^5 n导出两个方法 requestAnimationFrame, cancelAnimationFrame
6 ^# g" {. t: J, h, a: g: e各个浏览器前缀：let prefixes =  'webkit moz ms o';
4 G. J& a" ]! T$ y' o判断是不是浏览器：let isServe = typeof window == 'undefined';
1 T: q2 J+ x/ A9 Q: W8 g2 l: e增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
4 y  b8 `! y* }let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
# e; n9 S) Y9 q1 x3 r2 Q8 `" G+ V# ~    for (let i = 0; i < prefixes.length; i++) {
7 O& u6 F' m" {' V        if (requestAnimationFrame && cancelAnimationFrame) { break }
, L- o: r5 t' H/ e3 G" ~2 G        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
& d2 @5 c" n+ O. S    }

1 p% N- I8 G% b- e  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
/ M; y9 W% F) A/ G. B- Z& F            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
" w/ f$ l% ^$ t$ j. [* m; z            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
. H* a9 t* |# E5 _/ a* O            lastTime = currTime + timeToCall
$ B3 O: ?! F' x            return id
  t: f+ r3 Z  l% q; }0 O        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
8 Y) z. c8 I5 U8 k! O$ {" ^: S        }
  W  \# B9 J+ P8 L0 d    }

, N: h/ B  a1 X7 g* k4 T; L$ r* j1
2 G+ u" p7 @" n6 W! R: S2
3
4
( C% D7 o) T; H( b5
  G8 s: ]  N; s3 o2 \: E6
5 ?- C* W1 q2 g6 v" R7
+ m5 a9 h1 {9 h5 {8
9
10
11
12
13
% P6 u0 N3 j& q' @2 V14
" v: N& {8 O% O( ]# g  I$ z15
. F4 ^; @- d* B16
17
7 a, @+ c/ U5 ]  S18
19
20
: [+ \/ F; H3 ^21
! `8 ]7 u% N% e( S$ r" c22
: _+ N" z( W' E+ b7 T23
24
25
; j- l0 S1 k  ?4 R& G26
2 W( k" K" m0 Q! P27
28
  z; b- ~) N- m* j29
8 ?) I- U9 P' r, g, Z30
8 V! r3 Z3 \+ a! [! U31
0 [/ n6 A1 Y. V5 I( d32
完整代码：
; n! P) D7 v* D' q; K" S  ~# PrequestAnimationFrame.js

let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
  m; x  U/ X/ J1 x6 Z8 S
. L$ ~( S: S2 W, U$ G6 P( y: Blet requestAnimationFrame
let cancelAnimationFrame

// 判断是否是服务器环境
* o. R( T) R$ K+ Y" b" u# tconst isServer = typeof window === 'undefined'
' s6 W7 ?) K6 y1 p  \6 nif (isServer) {
# S5 Q* X( b! X( O+ E$ K# ?    requestAnimationFrame = function () {
" D$ r' H: N0 b% \        return
9 \, P4 r( i! ]3 w7 \    }
    cancelAnimationFrame = function () {
9 h8 X& U+ G! t" e0 P        return
" i9 x* K" ]- w9 X3 |" B    }
} else {
) g. E% w0 N) g4 |- j% A2 L  }* D    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
8 G7 i/ I; j6 [% C, X/ e    let prefix
! U; j( S0 Y. i- {& [; i    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
+ W/ x' V, A: @8 M) W$ H        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
% R, _7 c$ z- [    }
: T3 {2 N3 H+ q6 Y: H0 }
2 S7 O$ B% y- e, S) }' {7 H5 u    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
2 v# {9 D8 z, P4 S1 |) L    if (!requestAnimationFrame || !cancelAnimationFrame) {
% {6 [4 E8 S9 ?6 L5 E7 W5 f" ]        requestAnimationFrame = function (callback) {
4 b9 {+ R! A) u            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
& B( t' B+ s$ `1 t            const id = window.setTimeout(() => {
! u& i1 K) B  B6 d# K                callback(currTime + timeToCall)
8 \, v: e- R2 G0 K            }, timeToCall)
1 E* G8 O, n) X; [$ ~) }            lastTime = currTime + timeToCall
            return id
) x8 R$ o5 N; }  |        }

        cancelAnimationFrame = function (id) {
$ ?  T4 {6 e; H8 v) b            window.clearTimeout(id)
        }
; a7 ]0 H( H5 o# C4 X+ A$ y; L) z    }
' _3 X0 q$ T/ s3 z}
3 p: v5 g7 d1 O2 ^$ S% M
export { requestAnimationFrame, cancelAnimationFrame }


, R  `' |/ S+ J6 _( r" f- N' U1
2
3
4
' ?5 u$ l5 g0 K# W4 }5
6 Q7 [+ d. F; J, _6
# S# N4 g) q) V1 c7
8
. Y. W) b! e% u/ ~9 B( I( i9
10
4 j" O/ u  ^4 [11
12
; M- q, r* H4 n3 A$ k7 [13
- i) {# K8 F8 d3 n  T+ X( g$ F$ D9 ]4 f14
15
- J# }% Q' k' c" Z; X16
: r# Z$ n! T2 z17
4 W& T" n, |  K* H18
19
20
) A4 N9 C" E( g2 B: a; E! h21
% m) _) M+ X: l. q5 N- Q22
23
1 |. p2 @8 D' _0 W24
25
9 x, Z" c% w! x6 g' P26
$ `; X) x6 S, a6 ^! Z* `. b27
5 I; f- B- Y& l: P28
7 e8 r7 @3 x7 D1 k1 U" J" {29
30
31
32
33
34
3 i. ~; P; ], C35
36
37
1 R% `5 A6 @9 n. G  d, ]" k% H38
! \' [5 c2 `1 t& H( V+ ~" G5 ^; u39
40
9 J- ]% O# x; E3 v+ S) G6 N41
8 a* d) s# [5 m. e2 `42
43
) |' {+ N6 J, ^6 m. G. Y3 C6 p44
45
5 K) b6 f+ t8 L* |( M46
, X  p  i' J+ S6 C: {47
$ [1 G0 Q# R/ @/ d+ Z( H: {( n48
CountTo.vue组件思路
1 |0 h9 v+ ?# K7 N/ Y首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
. `& M1 E# w5 W$ u+ _
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
% C2 g8 @* R* ~( ^3 {1
9 u% X9 `/ V" H. @( @. [需要接受的参数：

, k1 J3 o/ j/ ^const props = defineProps({
  start: {
    type: Number,
. W2 Q! H+ O% E7 _    required: false,
7 [0 {+ J# t; A7 g9 X: x- V- v$ q6 ?    default: 0
  },
/ ~# q" ~7 o# W2 E+ [$ d  end: {
    type: Number,
+ M7 n2 e6 g. L9 O4 Z7 v9 O; C" T    required: false,
8 I( [1 T/ r; |* I) I    default: 0
  },
3 I2 |8 D. ?) e' E  duration: {
    type: Number,
    required: false,
8 t5 p+ h# [8 z, F) s! h0 `4 n8 |    default: 5000
  },
- C. R( E! a' N/ n* m4 Z# I  autoPlay: {
9 |/ _- P6 S' J# ~1 r0 W4 j    type: Boolean,
    required: false,
    default: true
% A" g7 }2 d3 r" \8 m2 ^  },
  decimals: {
$ \$ K# i) v" Y  z    type: Number,
    required: false,
    default: 0,
3 {2 [* S0 ]$ h6 a) `    validator (value) {
      return value >= 0
    }
  },
  decimal: {
# H, x9 Q* }, ~" I    type: String,
; |% n0 _1 K' a    required: false,
    default: '.'
  },
  separator: {
    type: String,
    required: false,
    default: ','
- |5 G" C6 }- d; y) \, e  },
* B8 P3 A8 a4 D/ J  prefix: {
' y' i# H  N* X9 N9 |    type: String,
5 w& r! ^) F, t+ A# b. v+ {/ ]% l    required: false,
& p  s, ~; G& m* c; Z    default: ''
  },
; Z. q. ]8 O* x) ?6 P& S$ Y  suffix: {
) C# n; k+ Q" j' |# C1 d/ {3 f) J    type: String,
# G( g6 X0 o, I( y5 f0 f  G    required: false,
    default: ''
. e/ k. ]2 h1 W% Y% ~  _1 g  },
% r7 O& _& c3 m! ^% q0 s  useEasing: {
    type: Boolean,
1 T5 h. ?! X# T& O! Y9 v    required: false,
    default: true
  },
' h' f2 V; v5 N8 G6 D/ {9 L  easingFn: {
    type: Function,
8 x7 d0 a1 K( C4 w# v    default(t, b, c, d) {
& v' y4 s/ F* n) g* [9 g$ m. y      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+ j8 h8 O$ C; K2 s9 e3 h    }
  g5 }8 Q4 W. `6 ]/ `! n1 |  }
% A# A+ _; b2 k( e})


1
1 M+ |1 n! n. h1 {3 _2
/ {1 N" S2 p6 _2 T3
4
- g7 `; R9 O8 y" ]* g; n% [5
( T+ P: J3 N& n5 s1 s2 a2 R7 t3 V2 N6
7
8
9
10
9 J8 y4 D6 n  ]/ p1 {11
12
' a4 O, {# x+ w* O13
! X6 w' a  A* [% F14
15
2 q9 ]9 [( f- x9 i16
17
18
19
20
21
22
23
24
8 C! R5 [# c" M' r) ~/ |  o4 K1 C25
26
27
28
' E2 n6 t5 J- [: B$ q29
30
, w6 z0 R' U" o; ^! r- c31
- j" H4 |/ x* q32
33
3 u/ e2 h1 d+ }9 I, Z; D34
35
36
37
38
4 {9 [! H, b) e% V4 x' c39
! ]1 D2 M4 `% L3 x  Z1 Z40
( F2 ^5 {: R# K* C9 \41
7 w# O% E6 u- }" O# g: [! c, y: ], Y42
43
* R/ i& \. U( Y8 F& L7 i! h9 A44
( C4 ~3 j& C) r' g45
46
9 D" ^% S) K( A! \# C47
( d8 W8 `: d. n48
49
50
51
$ s! O- d% N4 v1 r: M52
8 ?  M4 W, E/ N6 U4 M53
% N& L" h0 G. [+ z54
55
- t9 U4 L: E  j! ~) h. ^. C" k56
57
( m8 L* R! \0 m) K/ A. P) _58
( J8 Y. q8 _# F+ ~59
; |5 J2 D2 d$ ^' f# N/ k( _60
, I! B+ J; p; @8 Y61
62
8 @8 D* C& {* F8 y' ]" ~4 H启动数字动效
/ ]6 q% T( h" N8 F9 R
; i" ]3 r; c. Y( R. L$ Iconst startCount = () => {
  state.localStart = props.start
2 f( a4 d* Q! c5 i  state.startTime = null
  state.localDuration = props.duration
" m" w$ Q% ]& g1 h0 c. |! i  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
1
2
3
4
, n3 p6 \2 y) ?$ F6 [5
/ I+ Z$ l6 @- l! {! S# P( ]6 m+ K6
- w' m  ?8 y+ g( _4 E  I1 Q5 e7
& b8 q% O! K4 M2 H! L! G" ]核心函数，对数字进行转动
# S, F1 s8 C9 M) @' {4 [: k
8 k+ q; h- O/ w" o" [  if (!state.startTime) state.startTime = timestamp
6 V0 Z6 J* j: ?3 U3 N  state.timestamp = timestamp
- v+ [9 b: W% f. }- B7 D  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
: L2 l9 x* i6 `  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
" X- y: H2 _& R    } else {
3 W# G, R" X  ?0 R7 t      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
) Q+ q* w: Z- c! p/ ~  } else {
    if (stopCount.value) {
  r8 B, \; u6 x7 q& n      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
- Z  s$ K4 r$ A3 p$ t& t5 C' q    } else {
( y) o% t" R; X/ ?* W' f' F      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
6 x! C* X% u& n( [# M9 @  }
  if (stopCount.value) {
6 m, l" P0 p7 M$ k$ Q    state.printVal = state.printVal < props.end ? props.end : state.printVal
0 i  `  J, D3 u+ q  ^9 C3 L  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

* _! f& d7 {7 r5 ?  state.displayValue = formatNumber(state.printVal)
1 t; H. e4 H" z% x2 Y" M2 V, h) d  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
7 G% L/ c2 s: {# W& t  } else {
    emits('callback')
  }
}
$ d* K: `8 J* w/ `$ Y! t8 r0 @, C/ }

8 i3 c( T* P7 I; W- ?// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
! C9 |+ q( y* X( Y8 T) }1 n  const x = val.split('.')
  let x1 = x[0]
4 v( n# x% `' Y5 w6 V0 ]; G# q  Q( b  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
1 m6 F5 b. I% S! M' H9 u: _0 J9 d  if (props.separator && !isNumber(props.separator)) {
# F- h) K2 _/ |$ D& t    while (rgx.test(x1)) {
& T8 P% D- Y4 e      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
8 C8 [1 {5 r6 i& n    }
* H5 c& M0 B3 A/ }  }
5 ^9 h) A6 M. E& t) x  return props.prefix + x1 + x2 + props.suffix
1 Q8 K; R7 i  q4 U  Q+ q}
" w$ F% X; X" i2 g% V+ d( q5 Z  ]
1
2
1 ~, K# F3 `* p# m- \  r$ x3
4
& [5 G: H; W5 _! v; V, X4 Y5
6
+ O4 _( W9 X5 p7
8
2 t  E# T! t0 S/ B+ O8 y9
: u* `* c+ R3 c+ N) p/ j10
. z+ R' d% M  }& Q* O8 V11
12
13
+ \$ a3 B4 ~3 v* M3 c14
9 ^' K# ^" t- x8 R15
' I) y4 K8 w4 C- O" P( A7 s16
17
18
. O& b2 m/ x5 B( h$ H19
20
21
22
: N. a2 |# k$ V* e8 T23
2 p: L, e2 Q3 M; b+ A; W: y24
25
6 a  Y; z+ L5 w% y/ }26
27
28
29
30
31
32
33
34
7 }: z; }) g# K5 |1 {0 b+ G/ p35
" Q& e& R4 u: g2 S( e6 C1 J36
& E; ?7 c3 z4 b6 q9 g0 W& {37
, W6 E; ~) K& C38
39
40
41
42
, y5 T" A& g$ C& i+ w43
44
45
0 R1 T9 F+ U# R) S& E$ b46
  {7 J  [1 {8 j; d% \47
48
; s( i; D9 v  F& y取消动效
# ]) [  |& a/ ^( u, g4 O! j
// 组件销毁时取消动画
: _9 V! d8 ?( f' T8 {3 C2 conUnmounted(() => {
: y& V4 R3 \# K) Y5 o7 _6 [$ L  cancelAnimationFrame(state.rAF)
! G; ~; t3 z; Y4 G. N& [" S: r})
1
7 u& v' ~4 Q" x) g/ [( F2
/ s/ ]/ L& U( |3 n) C6 K1 G+ Y3
; r5 y1 |7 l% b9 q# n4
完整代码
" z( v9 D% M9 o& c/ V: \
& a6 P1 J( E' ?, {1 i% I<template>
  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
( Z% ~. E( x! M0 ]5 X( [+ D, Y8 aimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
& e& ^* W9 ^% E( z6 ~4 U, Simport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
const props = defineProps({
  start: {
    type: Number,
. s! V" E/ ^- U, c# d3 ]5 T    required: false,
    default: 0
  },
  end: {
    type: Number,
. |& [% q6 \, J    required: false,
& r1 o- t: [3 Z% ~" S/ }: M, F    default: 0
  },
  duration: {
    type: Number,
5 a) W2 K. W3 ^1 S0 i: Z9 ]) R+ N    required: false,
: G( b! Q0 P4 }- l' o; v    default: 5000
  },
  autoPlay: {
/ R. K6 ]& ^' l& J    type: Boolean,
3 `) y' k3 g+ ^3 ]3 Q    required: false,
8 B6 b% t  q; K) t1 M    default: true
  },
  decimals: {
    type: Number,
+ ]" Y" w+ w: p7 S    required: false,
1 A  j1 [( O- V9 N8 i    default: 0,
7 X$ R' s3 z' d; I8 G8 h, g' F9 w    validator (value) {
      return value >= 0
    }
: s) k* N; n* M# U  },
9 R3 S8 `0 B& X  decimal: {
1 n; O0 G' C+ M% `    type: String,
    required: false,
    default: '.'
  },
  separator: {
    type: String,
) g8 j' K$ p$ r$ x    required: false,
    default: ','
  },
  prefix: {
    type: String,
    required: false,
    default: ''
  Q* _$ E  Z+ }% k  },
* N' x" X3 K! C6 c" S# W  suffix: {
    type: String,
    required: false,
    default: ''
  },
  useEasing: {
    type: Boolean,
    required: false,
; o4 V; b/ b: r1 u9 ~& K5 H4 ?( l    default: true
  },
/ E2 Z( o. ~7 {: P  f$ B9 n: w/ t/ \1 o  easingFn: {
# r* z) }$ ?! }  m5 h. @. r7 p; H+ E+ O7 w    type: Function,
  v, Y5 |+ ^; B    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  @3 B0 Y+ A! U2 ^  }
})
9 f6 I$ U  o& Z" Q7 U7 n
const isNumber = (val) => {
  return !isNaN(parseFloat(val))
}

// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
( s( J/ ]& u! b* N% n  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  ^2 @& M0 ?3 Q4 e  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
' t% |/ Q* s7 c. q) @5 q  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
! K! H& H# G1 x- Y  }
  \- ?2 F% D; q! w2 U; e  return props.prefix + x1 + x2 + props.suffix
}
) p7 F7 `- _4 J7 H  c/ X
// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
( b$ ~  W5 |) O' x5 p- E  n4 k  printVal: null,
1 n: j4 L! b1 @/ J' [  paused: false,
  localDuration: props.duration,
, Y0 P) P: k7 r  startTime: null,
1 C# |4 ~9 T: I! Q  timestamp: null,
+ D" b* s; l3 H. q( v  remaining: null,
0 r( k; a& i) V  rAF: null
1 E+ J9 ]7 ~! q0 q# p  e! t9 Y) W})

// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
})
- z( x* B) T* t# ~; e: i2 v// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
" c% V1 \5 n2 |/ P( C" xconst emits = defineEmits(['onMountedcallback', 'callback'])

6 [/ x' L2 \5 ~1 |+ }" C: |8 L2 p0 Tconst startCount = () => {
" ]+ Z5 U& v  N1 y4 T( i1 R0 S' Q  state.localStart = props.start
: d6 t' p( Q" ~+ y% o( I4 ~  state.startTime = null
' T# p" P5 j5 G# R: g9 k) {  state.localDuration = props.duration
/ P* S7 W1 u$ z  state.paused = false
  state.rAF = requestAnimationFrame(count)
" O% f; n% f* ~' e' B}
) u. [# U/ @+ n2 |' a5 X4 ]; H
watch(() => props.start, () => {
' q$ }1 g3 A; K' M) }, [! H/ d& [  if (props.autoPlay) {
    startCount()
1 y9 ]- f  Q" D; M  }
})
+ u2 Z# V) r1 u7 Q( H
watch(() => props.end, () => {
  if (props.autoPlay) {
    startCount()
  }
})
// dom挂在完成后执行一些操作
9 ~  }, L) H, N4 f" d, donMounted(() => {
  if (props.autoPlay) {
. g' t* @3 O' a) y    startCount()
  }
( @* X* d' e: F" n- {4 @! w  a  emits('onMountedcallback')
})
// 暂停计数
0 E% z9 k2 Q9 g0 Pconst pause = () => {
  cancelAnimationFrame(state.rAF)
- V. K, {* P, Y5 ~# q! d6 D5 y5 \2 P}
// 恢复计数
/ t, n: T: R0 U- n' Yconst resume = () => {
& G+ n. L8 w& Y! p3 n: Y# G! Y' W  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
}

const pauseResume = () => {
  if (state.paused) {
  {, J% ~$ `5 y% I# H6 z8 F    resume()
: O; @4 d; }3 D& k    state.paused = false
  b7 M# Y1 g5 @& e2 _  } else {
    pause()
    state.paused = true
  }
}
6 o* Q6 A0 C2 S# F! U  {
const reset = () => {
8 v# `5 D" B4 y: ^! a- b  state.startTime = null
! `( U6 }  `) Y  cancelAnimationFrame(state.rAF)
7 n8 b5 X8 A  g) ]6 Q  state.displayValue = formatNumber(props.start)
}
5 L1 T7 v. ^; M8 J7 v) }
const count = (timestamp) => {
$ }: h0 K% B( Z( M! K! f2 W* U) o, f  if (!state.startTime) state.startTime = timestamp
+ B! B8 }- h" k# g* o  state.timestamp = timestamp
2 u/ c- W) k& n/ q  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
1 g9 t! W5 l) S  // 是否使用速度变化曲线
2 K2 B0 I$ e0 u1 m! T  if (props.useEasing) {
    if (stopCount.value) {
5 d2 t% {& M; g6 v& Z      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
  x% ?8 z; K; u" p7 C    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
! h5 I8 q, w2 F" A  } else {
/ m3 v. D5 k( x8 p- y7 p2 `! M    if (stopCount.value) {
. M: U& y8 B' R1 ?' B" B/ U) c7 I      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
* J# R) W$ P; g+ ~  if (stopCount.value) {
# L7 U& Z0 j% D/ z; ~8 s: t    state.printVal = state.printVal < props.end ? props.end : state.printVal
# h8 j/ S7 {2 n  } else {
; V7 ]4 q% [2 {. n; t' |    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
" @% }2 _, n/ y# O0 Z
( }% B1 I7 K4 B" R  state.displayValue = formatNumber(state.printVal)
0 W  C/ n, o; C3 U- n  B! O) E( O  if (progress < state.localDuration) {
. R" J- A6 @5 z9 R5 d    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
& S5 \3 E% M' k8 z/ l3 \" |}
9 I+ j( D( I+ o3 @4 `/ ?// 组件销毁时取消动画
; Z& @; P( ^$ n9 }: o$ donUnmounted(() => {
  cancelAnimationFrame(state.rAF)
3 M' _( a7 u$ x! M% A- {1 W})
</script>
, P( l% F! P- J" \0 F0 @* k
9 R8 E, T6 L$ s. O, B# d1
2
3
4
( h) c- G  t3 o. W5
+ J$ B" {0 \& n- J- f/ v6
7
5 D. {. }/ {! r" J0 c( N! a$ @7 p8
9
10
" H/ q; |1 U% }6 i# W* R/ n11
12
  ?: U# N5 F6 n8 [7 c7 i$ B5 w% u! H7 I13
14
15
16
4 B* b0 |$ R% r9 d8 D17
18
. x8 M4 [/ l+ T4 g; `2 q19
/ l( C6 m' R8 Y0 `0 S9 V20
21
( {/ H& N0 S# G& L) r/ H: [22
23
24
0 @) J! V8 l& U7 T1 D# V- _25
26
) v6 b8 h4 j+ _27
28
29
- J& w; Q, a# g7 f; t( @30
' l) s. o7 B/ @! O31
3 _8 e$ l0 v' b) ?+ K* \7 v32
33
34
35
. s  {  ]4 O7 C( ^( s36
37
38
( \/ N  s; F- M39
/ L. G$ K$ H" M$ U- u- \- J* o40
$ A2 O: ^/ L- u( h' |; l  q41
42
" T$ p3 U) \4 `" ]% _, R7 e43
44
+ X1 h' E: _0 g45
46
3 e" a: k0 C1 n7 v' c& Z0 K5 m! C3 e47
48
# t1 I6 `1 `* J! j' P49
50
51
52
53
54
55
56
+ |; p1 Q& a6 Q/ @; K57
; m& L7 ~( D" @  W58
59
60
+ o- ^* D8 p2 b  A' l61
8 L' Y8 f2 E- u62
/ t7 n, [- G) Z/ |  U) m$ m$ C1 J$ D, e63
( }, N, t& c9 C" j64
7 @2 t* n5 }# x  F4 M' h* T65
66
/ j; g; F: W, @6 i7 ^( f$ {/ Q& m67
7 T, I0 f7 O  x68
3 G$ s* K0 h+ h* z69
. Y. \9 f& N- [70
71
  t4 _) ~  X1 j72
1 M" J9 }' `, G1 M7 W73
74
75
3 Z; p5 P2 K1 L& W76
77
78
; [* q" e' x9 x4 b2 X# `79
( k7 a1 b/ K  y80
81
82
83
3 k7 D1 ?' a/ p( `0 F  e8 P9 |6 P84
85
- i5 m3 K" I- }) c( }, _; r86
87
3 h: ~: n) J8 P# [% h, K) r) \88
89
90
91
92
93
94
95
  f$ [' `+ i# l( }: d3 }& i9 p96
97
98
99
100
0 {" b+ F- Q/ {* @8 T# l1 m* F101
102
103
104
. ~0 _3 p7 |4 t5 @! Z+ T" C/ H3 E105
0 E* S6 F5 N: x" `106
9 r& j& y' m: o  ]- |8 ]107
" r! b- |! m* `6 O# \  [' L108
* {' S0 ^+ j# d. c7 M5 k6 J/ }7 Y109
110
111
112
! O% n5 J. s7 k' n& |$ g' [4 f( M! Y0 F113
114
115
116
/ h5 B( c5 F8 q0 `+ f117
118
, ?' c$ |' u4 J. a. z5 i119
120
121
! z) u2 B& X" `; r1 u122
- k( p, w4 V3 C: V! r123
124
( d0 K/ `1 O. z0 \/ ?! n- e125
126
127
128
129
) N; U. w4 ^/ e130
131
132
133
134
135
136
! o+ X" r' f0 E2 P- o. j% B' L137
138
, ]# V" |8 E5 I; P139
. R  w9 {$ G% A& ~140
" c4 a4 ?3 x. u6 u7 T141
" `( O' l, d: o; I- F8 P( D( d142
* g; X* x  d) I2 {5 t143
144
2 {. C) C+ Q( P0 g8 F145
146
147
148
149
7 w' ^. Z* U$ D( r/ L+ o& E150
2 s4 m% F" U0 G0 a  q151
152
0 R5 P+ F( s) c7 R" R+ ]% B153
154
. X) `0 h. o! o, ]& X" z  ~155
156
157
158
: F8 p/ ^; ^9 j& I, _! [/ Q159
) L: V1 L: Q( ?' A7 N$ m160
161
162
163
; f2 v' i1 i) f/ K* N164
165
166
0 `7 O5 o9 Y1 W, y9 }7 y9 G167
168
169
. s* C0 V1 k( f7 A7 Q5 A170
& y' K) V- ]$ S* \2 c$ g$ J171
3 y+ L; T& w; y" q( K; |172
173
174
175
7 ^5 |1 p4 y" A2 s8 J176
177
178
179
180
' V7 }! A4 Q3 {; a0 F181
7 L" L/ g* ]$ u7 Z182
183
184
185
" _$ x! l- @8 x  L* @2 w, L186
6 `. ?$ \9 F+ B& Y" o187
188
189
190
191
! N2 J! z5 E+ R192
" s0 `" }+ M+ \, d3 G6 g$ X' T193
  a  l8 g, e: G1 P( y, m9 z9 N' t194
195
1 S  I; ~7 U7 }$ V8 E7 a196
197
198
6 M7 d9 R4 d) v199
200
& D' n& }5 g/ ?, f7 Z201
2 C& I) `0 ^7 a  q) z2 [' v+ N202
3 v: v+ }, J/ L( `  V总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
: U- a% h/ X& H
( b6 w3 ~9 V( f7 _8 p& l& Ddemo演示
6 w# z3 W7 j/ H3 c后续的线上demo演示会放在
demo演示
/ D, _1 [7 E  o, \8 ]/ h  A! s6 Z% O完整代码会放在
% D( ^- _7 K* d& W  x9 v& a个人主页
' b% f- ?0 C0 R$ F- ]
; H  q- c/ [( g# L希望对vue开发者有所帮助~
( C- b! n! n# y- r# h
: S8 J5 `) E) d, j" ?个人简介：承吾
工作年限：5年前端
地区：上海
' b' x/ j2 g. G$ _" b8 `个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！


9 k4 f# O  o  l! {: c7 A# y. `

————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
# l1 p& Z; g* @1 j原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847


8 F" y5 [3 ~2 e3 H