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

杨利霞

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

前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
/ P( ^  q3 z# i, w* @- l; o: N% e
0 R: W$ t5 i- t! W
3 R5 ^7 P1 x* U# X' X思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

& N3 F% l* p/ ?7 i! Z  \文件目录
9 l/ W7 F6 h, r6 E; W4 B0 ?) V

+ `. W5 y* o/ v) ?- O7 {6 w) V使用示例
5 @9 P% a* g8 |7 |* q" o<CountTo
( g/ a0 B8 H1 B: G0 z' ~/ ]. r2 l :start="0" // 从数字多少开始
! B+ v  O$ `' S0 b8 s, B" F& \ :end="endCount" // 到数字多少结束
: N, U5 \5 F$ a :autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
6 [5 |( ~! x9 F6 h prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
. O& Y3 x5 }& t1
2
3
4
% r; c, A3 D  {% d- ~$ Z3 ^5
6
7
8
+ L9 [/ d/ b; S6 x9 d入口文件index.js
8 w: L# S+ v: `& f) `4 w- H
% X; f$ s3 M2 wconst UILib = {
  install(Vue) {
3 M0 N+ F4 X5 A* ^- _1 j    Vue.component('CountTo', CountTo)
  }
6 f, w8 \! m3 q* n; z% ?}
2 M2 a# Y) Y# x. O
$ i) L* Z9 w- D6 V6 u" u" p) d; ~export default UILib
4 `# d$ o1 F& f% v
* p/ S) [* Y  }& V: C. |1
1 b, |) N7 c/ D3 ~2
. f9 I1 }  c9 Y* M3
4
) o2 A# K: u* F7 d6 a/ Y3 h5
6
* z: e3 N+ ?3 z) m7 f7
. }8 ~; A; O' i8
9
* I5 p3 ?) l& m. }4 fmain.js使用
9 V9 U- }% P' @* @import CountTo from './components/count-to/index';
& }! I8 V" E% F1 Iapp.use(CountTo)
" I- k: `+ H6 z4 b' _1
2
requestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
# r9 A& _  Z' h) _如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
% x& F; `- d9 _% v6 blet cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
; f- O7 Z& x. L9 O    }
7 n: @/ i) U; n, W
  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
1 L' P1 H# L5 m- z/ A6 L        requestAnimationFrame = function (callback) {
8 S: a$ t0 N' t, I: b& H" F4 A            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
$ b% q  ~/ n/ F) g! D7 Q8 j+ `( q, a: j            const id = window.setTimeout(() => {
9 X  Z7 j3 o* Y- a! t7 L* p                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
8 p) N' j# c* {5 n* y8 B: |3 m. m        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
: c  w" V$ p" G6 Q  G; U    }
8 E: [. ]+ j- R0 @
1
$ M* A( j$ G5 ]; V) d& g- Z) r2
2 Y; G9 {: J7 V2 L, }4 G; G3
9 Z) n1 V* L3 S! X* B( i- t9 z4
5
* y& R* {0 \9 C0 K* F0 o6
7
  K& y& ^! E# h. j8 S2 Q8
' P# Y' C$ ?. E- i! D9
4 p' I# q7 c6 e1 S10
11
. k9 X4 Z& J! d" E4 M12
13
" G9 g# |1 M; w0 Z2 m/ \% p) l% L. _14
; E* r5 [  x, W1 k) j" a" t5 J" O# w15
7 l8 y; W* ?7 d5 U16
- `) b5 ~1 b. {9 `, F: y17
18
. a3 |& l' C/ @6 ?! W! |, ]( i19
9 X! B4 t: d* \% h) x. n4 \* E) y20
# B% P8 A8 K1 T% L21
22
23
2 T! k- u  @( @- v& |24
25
26
) M6 J* O  u2 _27
5 }% l& V: n1 S2 r6 F, U) Y28
29
2 |  Q& b' v$ R9 J, ]30
/ m2 _4 z2 u4 T5 L7 `! k' z31
32
完整代码：
5 N2 w" \! K1 e1 I* V, g* G/ w8 KrequestAnimationFrame.js
+ Y( c$ k7 P+ j, Q
/ R3 |. m! g/ D/ i) F$ Elet lastTime = 0
+ \+ |* _' c0 d; Zconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

let requestAnimationFrame
2 U8 S4 B$ u* ^- Qlet cancelAnimationFrame
/ |9 C+ G+ ?% b3 |
. \, q  z) s) G// 判断是否是服务器环境
4 R' h. p$ ]9 T5 _! Tconst isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
        return
. W7 H$ y* G/ H/ ]( _1 [3 P: w. n    }
! F3 {* c  s! p    cancelAnimationFrame = function () {
! v3 l/ \5 Y7 a$ E' \. m5 ^        return
    }
} else {
+ g, F5 A' g, d    requestAnimationFrame = window.requestAnimationFrame
0 ?! p* N& K9 g3 G+ u1 t3 y6 M* _. l    cancelAnimationFrame = window.cancelAnimationFrame
* n2 G. g1 B$ F: K    let prefix
# u$ R) \+ F: o! i( G  t    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
! Y+ O, u( L; I6 [& B, A    }

1 s" f3 D0 g0 I6 P: c( _9 ^! ]% L    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
& n5 t# ~3 I& S2 Q- w& E    if (!requestAnimationFrame || !cancelAnimationFrame) {
) E# ^. H$ H, R" @* }        requestAnimationFrame = function (callback) {
  M7 l  c7 R. [- Z  n            const currTime = new Date().getTime()
4 |: J! ~, B4 z' ?6 G            // 为了使setTimteout的尽可能的接近每秒60帧的效果
: b: r6 ?% K6 c            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
, ~0 n; @3 K4 e# O. l2 D                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
) f9 p, _* Z/ @4 [+ v1 |, T            return id
" ?0 y7 M+ S. ]! r        }
6 h5 `6 T' W" J( ]& B
. A  X: t8 F! E; w$ s( W        cancelAnimationFrame = function (id) {
) ]" W0 ^( V! ~; `* V3 i            window.clearTimeout(id)
        }
    }
}
5 z# d+ V: a# e# D  M* f2 b
7 I! i  D/ x6 eexport { requestAnimationFrame, cancelAnimationFrame }

' w- ^$ P" N1 U/ `' j& [
1
2
3
4
' x3 n8 U% r3 l" L4 p% a$ {% w5
/ o  D& ~- ?. H3 E# c  J; b6
2 N) w$ Y6 d" m7
8
) |4 v+ q& J# q. j3 c9
& Z* n8 G+ K" ]- ^/ H6 e10
11
6 M/ w" b; v! S12
13
- ^2 q0 q" M" e5 Y) k) r+ L) y14
5 t6 N9 V& p0 z0 X15
* ?+ ?- c! e+ v9 }  X16
17
/ U" E5 C3 e- N# k% K) V& n18
19
  ]- H8 d3 U  X20
21
22
23
* A& u$ M+ ~$ Z, L24
9 w; m$ U; X# [6 L( r/ t25
26
- C" `7 m5 c7 ]27
; s) ^1 o  t3 j1 O8 R( G7 |2 u28
1 M  P. W( S, v, H4 ?29
7 F. o# o  D+ ^( ~+ b5 [+ _* W30
31
32
4 @6 ~" q! _: `9 y$ {8 U; ], Z7 L6 J* q33
34
35
36
3 R# A, z$ c# S1 N/ Y8 X' i37
4 O) d4 L0 n/ V1 M3 O, @; ]38
39
40
8 L; a2 e& T+ O- r( L: O41
% x( b% D6 ?; c% t6 }$ \42
43
! M# H& E  R/ A& k* v44
0 I- H) t  V5 ]6 n45
46
- o9 t) e/ J2 B# N0 J47
48
  `8 z; o. x; G& {7 nCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
# u! V- @, d. n- I$ U4 m1
需要接受的参数：

const props = defineProps({
( [' S" a6 e& h6 x4 T; c  start: {
    type: Number,
% z) D0 |/ c* I9 E( M' O4 ]    required: false,
$ V: T1 ^) ~/ u+ g3 N2 {* N& J    default: 0
  },
  end: {
    type: Number,
' F6 T7 v* C. L( m( k$ K    required: false,
    default: 0
  },
  duration: {
/ h+ j7 l- S/ n  i4 y    type: Number,
: m7 k# U: b" U    required: false,
, c* m* }& h5 a. q5 S5 i8 y    default: 5000
  },
  autoPlay: {
6 m; b+ K- I4 f. s  c6 j1 E8 k    type: Boolean,
    required: false,
    default: true
  },
- S" R7 r2 B* D  decimals: {
    type: Number,
! G6 a( g- H" Z: k7 i    required: false,
    default: 0,
    validator (value) {
      return value >= 0
$ H3 ]- H5 U2 O$ l$ N' o+ G    }
$ k- B2 k# F8 i$ q( S  },
( Y+ q# |) D* f7 i) F1 [  decimal: {
    type: String,
    required: false,
1 Y; c' {6 ]1 N7 U    default: '.'
  },
  separator: {
    type: String,
    required: false,
    default: ','
- I( E. Y8 Y% L" g* p, I  },
7 h& ]( t  O$ V, o. z+ w  prefix: {
    type: String,
    required: false,
3 k; b' a  t8 X# O& a7 E- }/ c    default: ''
  },
9 A" [- v; N. e6 a3 M  suffix: {
    type: String,
    required: false,
! N: t0 B1 t/ g% n( ~+ M    default: ''
  },
' O2 I' Y% E( ]5 {& u3 a  useEasing: {
# y' \, f/ w: W6 D8 r    type: Boolean,
    required: false,
    default: true
  },
  easingFn: {
    type: Function,
    default(t, b, c, d) {
8 \1 X- W; u( R8 H      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
7 f2 x) C  l4 f# N})

( }; C! E- n, `# M% j
1
2
3
4
5
6
7
; H/ r1 V0 t0 }" u7 d; L8
9
6 }8 [/ L- X- s0 ^( ]6 g* q4 l; B10
. I9 }' i) V& ]  N, C3 ?11
12
9 Q/ l6 W6 }. r13
14
+ H% ?4 E* x1 e$ j15
16
17
18
* r  ~$ a9 ?& Z9 C; n8 {$ W19
20
21
& H! G/ H9 W& j" T22
23
0 `2 O5 a$ U7 R8 q. y24
$ p+ v# N% `$ h0 s0 [25
26
27
4 I: \. P/ t5 h6 ]0 _' d/ j3 s28
$ q- N0 E4 D7 x( q29
30
31
32
33
$ R3 W& T  Z' y. b5 a34
6 f: p6 \, L! p* I3 R8 C" a35
. ]8 S1 h& L0 p* F7 S36
37
38
39
40
41
) H5 C0 a, H( z+ O: h42
6 }9 W, f" r; o# J) E! |2 n+ b: @43
/ k0 E; H* f/ L/ d) f1 m44
1 X* R3 C+ u" `( v/ ?* M1 H45
4 R# c. e' w8 }' V' [! `; f46
47
9 X- @( Z. x* }8 V  P& |( o$ x48
* [4 c# L  i0 [49
. J" a6 n* N/ F50
51
0 C7 x6 \0 o; c$ c+ V5 \7 ~  Q9 A52
53
: D' {9 @: W6 R  c1 Z9 ], l- `$ L54
) k" c1 h8 S% w7 Y% |7 O55
56
57
1 c5 L4 }4 {) ^$ D58
59
60
1 Z6 P8 d2 R/ n: B3 b2 Q" F) N( N61
62
启动数字动效
% U- F2 I4 M) t; g5 U5 w: r
3 r5 K: }6 D# [+ Pconst startCount = () => {
  state.localStart = props.start
% y( ?! J6 z; l  s/ m  state.startTime = null
, l0 Q1 I2 M2 {. Q/ s  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
) h7 e3 A: d0 r}
! J6 I8 d3 ~7 S1 Y; ?1
7 W/ z% H5 D% _7 r1 a, {2
3
4
5
6
, O5 C0 r( u2 j5 t8 n6 i2 |7
核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
; G4 t  i" e: x6 F* H4 T  if (props.useEasing) {
    if (stopCount.value) {
# V( F, X1 d8 _; I      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)
    }
  } 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)
    }
  }
* f. b/ S. t  |1 V" O  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
" L- r1 O' i* f% n3 z    state.printVal = state.printVal > props.end ? props.end : state.printVal
0 c5 L; N6 f+ S; T  }

, Q+ o& Y! A5 j/ W3 l# s. A/ q  state.displayValue = formatNumber(state.printVal)
6 h7 M1 p0 p& D* D# s4 b  if (progress < state.localDuration) {
) d- O; X0 }: w1 E8 U1 \  [    state.rAF = requestAnimationFrame(count)
+ R! i  i9 [# @) j  } else {
! f. Z5 D: w- _$ }5 g/ x    emits('callback')
& y, V, a. l; w) A. _  }
}


// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
( F0 v" p6 B/ [- C" x1 q5 y! }  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
5 b4 y5 C1 X) N+ x+ T; Z5 o( |8 Y4 s  if (props.separator && !isNumber(props.separator)) {
7 b& f7 k9 y. u$ j' \1 _& }3 ?' @    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
  return props.prefix + x1 + x2 + props.suffix
}
* I8 o% x' J/ a; }/ G  n
1
; K: z0 a  r2 C7 l  L% |2 C1 r! l/ ~2
3
4
5
6
7
8
9
10
- T) f5 a! K* P- `' f& I) s11
' U& Q8 V+ T7 J12
1 G0 I8 z1 R0 f, w4 [/ Z8 r13
14
- k: l. Z: a: Z$ ]& w. n& }& V. w15
$ x9 s; L& c9 f" o. V: o0 }2 S% d16
17
18
9 g5 J/ h/ o4 v2 j2 I" X7 R- T19
20
21
22
23
; J# q3 \  G4 Q; \24
25
26
/ X. l5 X; H6 p: S6 q27
) l/ x& a$ k% V0 N$ V28
29
30
9 w9 _. w* D. e31
32
33
" O9 r2 g( R+ N. F6 q1 R( w34
. h" ~0 Z0 g) f6 e2 u35
$ \# c# T  ^: {. o36
; V! u% D  v" p* A37
38
/ b) a9 v) O: @2 l39
40
41
42
) I6 l. |- G4 S+ |$ D43
44
: e' P, Z5 z5 t) v; `7 M45
" e1 o# x& S. \46
47
48
" }& s- t' T( J取消动效

% {+ [/ p0 b7 `  l// 组件销毁时取消动画
onUnmounted(() => {
4 j: Q; Q$ J2 G' @# T& h  cancelAnimationFrame(state.rAF)
})
5 ]  G' R. A0 q$ q% b1
2
. L# n2 B) U/ t8 ^3
- j) ?1 d8 S, ]! d- l4
完整代码
# h; S# h. o! n
<template>
  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
& t2 V' W! w6 Q+ I7 b3 I) f$ @( @import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
" X- f0 }& c- k2 ?import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
# [; N' v3 K! }const props = defineProps({
  start: {
" P( G4 f6 U! D+ w    type: Number,
    required: false,
5 B( P/ C7 F9 c9 L, w2 a* ]    default: 0
  },
6 d3 W" c* r0 Y1 C: }  [  end: {
    type: Number,
  f0 y8 k# N% g1 Y: k    required: false,
: @' g: f* J, U    default: 0
  },
  duration: {
! [' l2 l# N) Z5 C5 f, i    type: Number,
% O" }- I) x  n3 Z/ V5 u    required: false,
$ x, h+ S& l  {+ W' W    default: 5000
5 o' E5 h  c3 \6 A" b' `  },
; h1 h6 H7 p. ~# Z9 R  autoPlay: {
% T& _# n# @+ G/ W7 B' E5 o1 m    type: Boolean,
% K' {$ o7 O3 @: ]! l    required: false,
    default: true
8 P* R5 G6 W. h; x  z  },
" K: u) |7 E1 d. L8 ~; A  decimals: {
    type: Number,
2 q9 P& I- }* j  `/ C! j  d    required: false,
    default: 0,
5 Y9 z* w# \) b9 v    validator (value) {
# `3 e$ u! {2 Q) s! Q2 i' D. y      return value >= 0
1 Y; h0 C7 R) o# {3 C3 r. ]    }
1 q( F( q6 V4 ~2 r4 g- J7 _  },
2 D: g* W' h1 F6 K  decimal: {
; i6 \$ a. h- Z" g; w    type: String,
    required: false,
    default: '.'
6 v: G) {8 ~! I6 x4 B6 h! V  },
5 f8 T* M6 R- \  separator: {
    type: String,
* p% ~; W$ t; _# s) L. a5 @+ X    required: false,
. S8 C0 y1 p! d& F% w% y7 [    default: ','
( P5 G& Q& u4 }) O0 w2 A" `  },
  prefix: {
- Z/ U. b9 I0 \  x+ x, x    type: String,
) r7 \2 D) H: Q# T( U$ U    required: false,
& A- M/ W) J) X( p    default: ''
8 g) P! i6 B2 @6 R) P: @8 {+ |2 b  },
/ T: D2 d: d' P- b2 J- r1 h7 Y  suffix: {
    type: String,
, z! A8 m  }% x" j. x    required: false,
    default: ''
1 E/ A5 o9 Y1 c& r9 V5 u; a  },
  useEasing: {
  x' x7 m7 o5 z    type: Boolean,
7 K/ t  z5 ?7 L1 \1 l! \9 O! d    required: false,
    default: true
, W8 {( i' {9 U$ G, U, \1 n  },
* V; O2 k) x0 I' U8 G, A, B9 a# R  easingFn: {
    type: Function,
% L, P, b( Z7 }6 ^) r; O/ T, p    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
3 G+ A" T4 d2 R) f& y3 w0 X* K    }
  }
: R& S8 J' U) u" Y1 b) ^})

const isNumber = (val) => {
  return !isNaN(parseFloat(val))
0 v, ?) _& {$ G8 g' V& d}

, N2 a  s/ O& h& w# d  a6 e// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
9 i- \: U) a( B) [0 M8 ?$ h  val += ''
/ [$ |' E! r3 k% f  const x = val.split('.')
: l1 O6 E7 ?' O; {7 \  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
0 A! m: J6 m2 M* }+ e" `, [4 g  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
. |( @& l, X$ ]! e- ?: ]) G4 \    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
; t% _  T( X# S8 a, W* v- Y( z$ z# |    }
  }
) J8 r2 P: m. m- R0 w3 i: x8 G% V  return props.prefix + x1 + x2 + props.suffix
}
  K  k1 U3 I0 j4 ~) ]( v
// 相当于vue2中的data中所定义的变量部分
5 ~% D! Q+ z. x# l6 ?const state = reactive({
$ m/ t, U# H$ B- h" n$ n* p  localStart: props.start,
  displayValue: formatNumber(props.start),
, |' {4 N6 a3 q& L  printVal: null,
  paused: false,
  localDuration: props.duration,
  startTime: null,
  timestamp: null,
$ ~  S8 B- Q0 I6 Z! a6 h' s/ Q* ?  remaining: null,
  rAF: null
})
" X6 e& [+ W" x- N
2 {  s; p# ?6 d" F0 v) V// 定义一个计算属性，当开始数字大于结束数字时返回true
# v/ ], K% b2 Jconst stopCount = computed(() => {
  return props.start > props.end
! q. k( p2 i& X$ Y/ [% S0 ?* x})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
  state.localStart = props.start
  state.startTime = null
4 H& N( Y) d) @& i  |  state.localDuration = props.duration
8 `5 B% ^6 M' ~" D! _2 t  state.paused = false
( I$ m, u9 x' y3 y  state.rAF = requestAnimationFrame(count)
8 Q) _6 D% a3 k7 k" N}
/ u9 h% E4 T% p0 X! P' T' W& p
watch(() => props.start, () => {
  if (props.autoPlay) {
  q) O$ ?8 d( g: N    startCount()
  }
9 t0 k$ X: }' d* h1 e})

" l8 x% a" f3 i6 k: O- B1 H' S* B, lwatch(() => props.end, () => {
: E1 Z# p& X6 w* f  if (props.autoPlay) {
' G! Y9 {3 \3 {    startCount()
9 w, L' J. h" S# n! j  }
' O; y- h  j& q  }5 r& t  i})
( ?/ H; e5 m1 @$ _5 |' T// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
    startCount()
  }
6 Q( M, Q9 e5 A! y9 ~# k  emits('onMountedcallback')
})
// 暂停计数
const pause = () => {
9 M2 y' z/ b$ L& ~; l. W' L  cancelAnimationFrame(state.rAF)
& e: T4 q7 W* g0 i. b7 K, W+ I}
- Q* T# H" v% x5 n// 恢复计数
const resume = () => {
+ P- F2 x9 F1 E8 C  state.startTime = null
. ]6 e% z) T5 L% m! T) Q  state.localDuration = +state.remaining
' w4 V. v( t+ N6 I( x  state.localStart = +state.printVal
  requestAnimationFrame(count)
}

! x# s' @# L" g1 M6 mconst pauseResume = () => {
" j6 S. u4 v" r  if (state.paused) {
    resume()
    state.paused = false
  } else {
0 [  {4 d4 b8 J! c, u5 _8 Y    pause()
    state.paused = true
" o! Z9 u3 f! K' o- Q  }
. `- k$ H& s" i: Y* {; M& j}
; s0 ?" S" h: Y' A6 C" O0 a3 G" Y5 _
const reset = () => {
3 g- K  h1 f- i+ }8 m( o, X  state.startTime = null
4 O4 L8 t% w7 k9 F0 M6 Z& g  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
}

6 n8 I4 }/ F3 \# Y6 g' _% gconst count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
9 g  Z9 h* Y, ^( r  state.timestamp = timestamp
  const progress = timestamp - state.startTime
+ M, w. o) G9 ~8 y  A$ W  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
8 y# X& O# V7 u4 T% k  x    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
) N# v6 Q- s1 B1 W( a$ y      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
9 c+ C8 D5 S! n6 B0 G    }
% j, H1 Z/ I" O  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
' X8 W; C4 n  ^* o  P5 K0 Q# @8 K7 }    } else {
# J' j0 x6 Z' ?# k! g& q0 {      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
0 o5 \2 i% w  g" h  }
  if (stopCount.value) {
. k9 R) \3 l* l  g/ c    state.printVal = state.printVal < props.end ? props.end : state.printVal
" [; |; E. j  c! Z( k  } else {
5 @& @: L2 B( @8 h    state.printVal = state.printVal > props.end ? props.end : state.printVal
3 b8 l$ ]1 `0 S3 J( f  }
+ `. I: l6 ~' j/ {/ P
  state.displayValue = formatNumber(state.printVal)
8 V( O8 f$ `$ D: Y4 ?' J  if (progress < state.localDuration) {
& m& N1 w* G3 t. }8 T6 }4 Z    state.rAF = requestAnimationFrame(count)
7 K( K4 C$ }$ z; @- o  } else {
    emits('callback')
8 l# r! g* p6 N" ^8 s, d& Z. J  }
}
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
7 v  L! |- [' R+ F0 N</script>

( d1 a3 q5 s3 H8 F1
3 N. d( H. t! t5 d2 K2
3
; u( E1 \' v  B" g" t4
% \5 Q! S) _. {+ \& L! p. T5
6
7
9 k9 t, P+ ~9 B! y8
9 {. \8 H8 u3 |* G, H9
10
11
12
  c: R$ f5 F$ u. W1 C13
14
15
" W% T+ m9 y5 ^. b7 T) J16
17
/ i( g- E& i' B+ d* W0 c18
$ [: S6 E- w  ~9 N" Q/ q19
3 r3 V, b1 |1 s* _; G5 m5 i20
21
22
, x3 n" l( p8 s) d23
24
25
26
4 ^1 w) I6 e, o( j27
5 x" s+ H+ ]" j4 B28
29
30
1 b% {: z& o+ u, p; ]9 c% ?  @% m3 B6 |2 C31
32
33
34
) p" c& l, f) g$ `2 _35
36
37
38
8 G: N8 U, N% T' @5 Q- A39
+ V7 }6 l( J& O2 B40
41
42
43
44
7 v  V+ x; n1 M6 [/ z45
9 U* j1 p& b# \! Z+ {46
6 B4 p" E' `4 K1 I, v# s( [. }9 X47
$ M6 X4 `* }; m7 h% J48
49
50
- i! z. _4 S2 u5 F1 Y9 D- @7 \51
. X( i0 C3 s- L, J52
53
54
55
- ]+ m- m5 m6 x% G. w5 [8 M56
57
58
59
60
61
$ a. [; w# G' v6 p* k+ Q62
6 y$ G3 p2 B( Y  E4 ]63
5 J: U! H) D8 a! U9 E64
65
' o$ s, ^1 ?- w2 C! `& ]66
67
68
69
1 C& P+ m; D" ?6 h# Y; ]9 j" z1 v70
* W# r9 ?) H! O& Y. e71
72
73
74
* ?# z( P$ A% _% k2 W6 z& l75
6 M' W/ E  Z+ t+ K4 S76
2 O2 L7 H' M) U* U( \1 l77
& ~6 i9 v* d8 u5 Q: t- L. N78
79
80
- {% Z4 B- R. B# B/ Q81
) X& o" t1 h/ ^+ c& e& l82
$ _  W. B. [5 @: ?83
84
85
' M4 D% X, l' r/ d9 p86
9 p. u$ j; I  X87
, L3 g9 R7 x* X, y8 h88
  ^# T! j( k  c. \, ~89
90
91
0 m$ p: L: R6 E+ H92
2 [8 W8 m# N$ v4 M93
94
95
9 Z; r0 }$ v. n4 @5 Y9 ], }: T96
% |& }1 N* u. q: o* ?97
1 d& _3 [4 P2 x$ ]98
99
; H& Q7 K- a, K. n/ Z+ n- ?1 ?% k100
101
102
1 R6 ?, y$ d$ u/ e1 `5 F103
5 E$ K* c" d* a1 L" L$ {104
7 u* Z4 v; F. ?" N105
106
! _) l% @( B- B107
) b8 H( Z' c) p108
109
4 j* C7 a; I1 j8 _4 }110
; P9 J$ p7 E. X$ j$ G8 p111
112
, h' @. t4 g% r+ R113
7 m, G& }" [% A114
" c; P9 l6 N! a7 f# ^# R' c% R4 Z) {115
  M7 ~  W% c2 w# V# D4 V" k" _7 m116
+ t  c' ?. f  ~" W3 h2 x  O7 U+ H: P* _117
118
119
120
$ {/ t$ Z# B4 N, Y: z* C121
! g6 s( q. C* b/ l! l: o1 v& R122
123
124
  I% H: I' a: E: l125
126
7 b/ c' E9 b  ?0 j* [127
128
4 K& H0 k, L1 i129
4 L1 }& a: Y8 i" c( Q130
/ C. @  [# E0 L3 D, g: c( a131
132
133
8 B+ z: ~7 u7 n5 L. a# ~, C134
8 z. X" ]3 T( M9 H4 A' A135
136
8 U! U2 ^9 b9 h* B137
9 l/ |* }$ X! \1 g: @' Y138
139
140
, }" A* y1 X% b$ s# X141
/ {- G' H& j1 U- |142
143
144
$ w" l4 f* \, Z; ^9 d7 m145
146
# m. ^) O- ^: L1 q, N9 Q' l$ A" O147
+ q3 X. a  M! b, C) s4 Y0 N# w148
+ }1 j8 h$ q7 q4 `- s5 ?% [  Y+ n149
- G5 k4 {6 l* S( Y. l150
  Z4 w1 [+ }* Z9 h151
152
153
: u$ O7 o2 j% j: M. P154
* _: b/ K6 R+ i& x/ q5 S+ J- Y155
/ A7 Z1 x: t8 @7 h9 p156
157
158
159
160
161
162
163
2 [" g" ?  t9 ^- [* u' y164
+ K4 O: l2 ^1 S) G165
166
; ^8 A% H' Y$ J2 k8 ^, h; {167
168
169
170
/ ^  l- l  p& S- l) p171
' h0 I, o2 R; C172
) B! Y3 t5 N; Z, l2 B) W173
' Y$ a2 K! J& r, e0 O9 G. y' a6 e174
175
) c! F$ j1 f) x, x* z: m, B( I0 D" W176
177
178
$ e" ]5 s. S9 W$ Z1 ^179
180
9 \$ c% `2 l6 t- A' \# L3 ?181
7 ]; Q0 A5 X( n' O! J182
183
184
: @9 I( D: }1 e* u; E% a+ m* U/ ?185
186
0 l& \4 k* P8 i5 S187
  @! u% P2 f" @+ s. `) h188
189
190
191
* M0 w' A/ ]7 m192
0 b( N6 l8 b* k$ i5 k193
) d4 E; C5 d4 u. L* c7 i194
195
196
197
. ?% V( x7 ]3 l+ o( |  k/ {198
199
200
201
& U! F$ X/ _8 V) C; U202
总结
6 \' o& r# R5 n* c- c; F0 a. w9 Q自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
' W9 q8 l: J0 ~6 j  u
4 N3 d4 ?9 }2 r' `$ w$ [demo演示
  |' l/ C0 c; |) }& O% [, v后续的线上demo演示会放在
4 a5 H! s+ O5 g& F  }- x; Ademo演示
完整代码会放在
1 e: Z! C. \- u% H+ A# L1 `个人主页
' v% g) g+ |- m! R
希望对vue开发者有所帮助~
7 t2 |& v, w+ {( q; Y5 f. \
个人简介：承吾
工作年限：5年前端
地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
5 K2 n1 K7 y  S: a; x& r


  D9 E7 c" s/ H1 c1 V
$ f9 B' x, O0 x- Y& Z+ n9 b————————————————
6 g. o' B) [6 T  ]( s版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
% O! W, A4 O+ C3 J6 k原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847

# m( i3 _% T, N* \) t