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

杨利霞

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

* a6 j. C+ j& S+ B. z- a1 U, `前言
8 K; ?) h! |+ ]; Y$ c: D9 w8 [0 {9 bvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
1 U& H" B( k1 [# o% p! t2 bTypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:

% J$ h" ]( V) a, z9 K& f# Q: W5 s
思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
! M0 Q" H# w* ?0 F- N
2 ]0 \! g8 x4 r; Z文件目录

& W8 V  w+ Q$ k4 O- @: S7 A
" E; p6 _( Y* x1 j( U% z' z: Y使用示例
4 U, z( Z5 v+ ?& g* R, u<CountTo
) A% y- C  b& q( F  R5 Y :start="0" // 从数字多少开始
7 ^7 z4 @$ h: m1 @; P :end="endCount" // 到数字多少结束
+ s* `. p) o" G' s; |6 t :autoPlay="true" // 自动播放
$ z1 J& E7 C" [% w) B9 ` :duration="3000" // 过渡时间
' {0 d$ M6 u: D2 Q* C4 t9 j prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
1
1 {8 }3 j# _& D: `% }, g# r2
3
4
5
6
7
; ^9 D  m5 W9 d, Z: W8
4 \; n* [' W) h+ E9 h% g入口文件index.js
; b$ A8 Q( i3 O  ^' G( a
const UILib = {
  install(Vue) {
    Vue.component('CountTo', CountTo)
1 }  T2 {5 z4 I0 K  }
}

9 j0 x( F/ p) ?$ {export default UILib

5 P( j' U$ ^" [, |2 G6 \, V1
2
3
/ A) u: S" Z5 z6 F3 q; a3 w5 r. b4
; z, l9 _: u3 r; u5
1 N5 u, y3 L5 k0 k) g6
8 c1 x$ }0 O7 e% W7 D7
' _/ f5 F1 z* N5 P) r: n8
9
0 X6 U% u' f- g0 nmain.js使用
9 x6 G, z/ W1 a/ vimport CountTo from './components/count-to/index';
app.use(CountTo)
1
2
requestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
  C# e' }9 j4 {导出两个方法 requestAnimationFrame, cancelAnimationFrame
( ]" \: g3 @8 S5 G各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
( w& ^# h8 b6 h% a+ D/ L* }0 F增加各个浏览器前缀：  
let prefix;
/ D! Y8 I9 W1 U& O! Elet requestAnimationFrame;
) Q$ u" W3 a2 E3 g- P. ?8 {2 @9 K: I# |let cancelAnimationFrame;
6 R; t" b, `. v! T" _  R6 l// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
7 N+ O$ ]% S# ^5 C5 Y/ P        if (requestAnimationFrame && cancelAnimationFrame) { break }
. g7 @, {/ S. v. ]        prefix = prefixes
8 [( a. z1 n. U* i) {' T* ]* r# o7 {        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
* S( F( K& d% Z2 J" T2 G8 q        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

  //不支持使用setTimeout方式替换：模拟60帧的效果
0 u* @3 C4 R. V5 y$ s+ S+ w  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
/ ~  U/ O6 V9 `        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
( z; u8 _% i( j5 r9 s: M            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
2 N9 c6 x# a( [$ v5 `8 M) K            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
) u; A. G1 x9 X6 S3 [, b            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
0 G) `: n5 d9 T3 {3 i& Y        }
1 Q8 M7 r. x' S. a6 L* d, c( G
        cancelAnimationFrame = function (id) {
0 N5 k& Z) Z4 |$ s) `  f            window.clearTimeout(id)
5 E0 i9 m! U/ B' ]% q* p        }
( b8 m1 @8 t; \0 o    }
1 n4 `: m5 p$ x$ h! H& _
' j: m/ |3 J; e1 O1
2
3
4
5
. r% }/ g$ L1 J6
7
$ `8 p, u# Y4 @8
( y. a3 g; {7 n* ]' N' x# ^9
10
+ k9 ~7 n+ S# G9 n11
12
13
14
15
8 _! J. E# H) u- B4 B% D; ]. |16
17
18
5 B5 N. G* y. Z/ V. `  g6 K19
& e% I$ R4 Z( v: V9 n9 f20
21
22
23
6 l( p2 b/ O% L; H, A, p2 N0 U24
25
26
27
28
29
30
& Y4 u  @/ w, G& v( y31
2 J4 [% v3 o9 g0 P5 U( G32
/ {$ N. B3 p* i% B9 f  T; P完整代码：
* T% k( T- F1 U6 J/ b5 SrequestAnimationFrame.js

4 L7 G" Y% K1 K; K- `; mlet lastTime = 0
1 @* J2 M2 H( ?. i1 J$ `, N9 _0 ^const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
! ^( H' {' }) L" \
let requestAnimationFrame
let cancelAnimationFrame

9 V4 p1 L6 m4 i// 判断是否是服务器环境
1 [: o6 {2 e3 q$ I  Econst isServer = typeof window === 'undefined'
if (isServer) {
- D% e2 B$ e5 S& X$ j( L6 b- x4 R    requestAnimationFrame = function () {
& \) i% f, F6 U! V" G# T5 D) f5 ?        return
    }
& t9 o" h3 G2 w    cancelAnimationFrame = function () {
        return
' M9 O' N. @0 K' t1 z/ k3 `' d+ q    }
9 h# p( s, B* L' V1 L0 F6 u} else {
5 I( T$ ]  y" m' i- ]9 @& Y    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
' R' M; G0 l: O    let prefix
: ^  _3 M/ w4 I5 `    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
% [- `9 O+ L2 g. H    for (let i = 0; i < prefixes.length; i++) {
" [# e1 Z9 i7 Y% S. x        if (requestAnimationFrame && cancelAnimationFrame) { break }
% t$ }( j5 ~4 _        prefix = prefixes
% z' N: Y- p% Q3 F  ~# K, i        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
+ b# l% b) Y  {9 ]4 K9 S- r        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
4 b9 g( E5 x" q6 v4 j* W    }

5 w2 N7 u( q% d- W6 c+ z    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
  [& I! \; q& \# I/ E! }$ Q    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
) l# J/ @) W0 l3 j4 c" K8 h- _            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
; c" P" S: i; ]$ e            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
    }
, r$ N2 I+ q2 m$ e}
2 V5 T! l- B) f" s
export { requestAnimationFrame, cancelAnimationFrame }
" m- U' E; H* n/ Q

+ C% Q+ R# m, j: E- v0 ?1
2
3
4
8 d4 ^/ \" R! V6 H; p! w5
6
7
) f; T9 s4 Z& C/ }1 U- n8
/ Q" k# H5 L. B8 T9 }& R* T1 g0 ^9
10
# C5 |" T# n, A8 O11
# A2 U- g, |! B; R12
! c# W+ F9 Y! g* G% u# Z( s* y13
14
15
16
17
18
19
! J& P2 C4 x7 r! |9 k20
0 z. i4 D  o8 l8 y. C' [+ }* _( ]21
22
" I6 z, G$ t9 [* F; v( {0 W23
# V6 d( s/ ~+ `$ F& z24
25
; ~0 V: c% o6 l- m! n9 a2 Q; R$ J26
1 U3 X6 T8 }) V2 `& N' S3 P27
3 i2 Z+ w; K+ ~$ c3 @1 G28
6 \; w* ]; Z0 P% [6 i8 w29
6 O+ h5 h$ w: m0 k30
1 i* R# E( L' z1 k4 m. u31
  P) g' f# {) J/ T% t# G" Q$ J32
7 |- x3 X3 f# X! |  T) j) A33
34
2 R4 k4 @: X( O35
$ t  c/ a* `3 `- z36
37
38
; H4 u1 _' w7 l* @39
40
3 S) K$ s8 o* ?4 d7 ]2 z41
42
43
/ f1 g- R" n! c; y. G3 m- H44
45
46
6 G! G- s$ o5 B) P7 x$ Q, S' I8 S47
- f, R7 f; K6 Z1 D5 {, _48
CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
! m. N2 _1 U1 I* Y* _* P4 S1 E* B
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
8 ]$ k2 b: Z% R3 a* i5 O需要接受的参数：

const props = defineProps({
  start: {
    type: Number,
3 z9 v, a' ~# D- v! I. L    required: false,
    default: 0
  },
  end: {
    type: Number,
    required: false,
    default: 0
6 J" f7 V3 l3 B: }1 R+ [  F% d  },
  duration: {
5 z9 N6 ^9 v9 f% }4 s; r6 _    type: Number,
    required: false,
    default: 5000
  },
  autoPlay: {
! c& M/ b) x" y    type: Boolean,
/ s- D/ P3 e# k0 |5 H    required: false,
- ?+ W' a8 l' p7 b$ }    default: true
  },
  decimals: {
% z3 ?5 V5 e0 O/ s3 {    type: Number,
    required: false,
0 [2 y" ?7 M+ ?) n    default: 0,
  ^* G% C9 I0 Z) P' B    validator (value) {
6 I* R5 x% T' t/ F5 S5 T8 W      return value >= 0
    }
  },
  decimal: {
" z' P( `& s3 [( n, M/ z    type: String,
    required: false,
7 p+ ~- t# Y5 Q, F+ [" T    default: '.'
- F1 ?, `; G' k& U7 e' o# V# ?  },
  separator: {
! z4 g, {. ]( d( S% h0 z: `# k    type: String,
    required: false,
" n7 L( u  _9 W& v$ c8 ^# K2 I7 |    default: ','
- ~3 G( `9 `) ^; P7 _  },
  prefix: {
    type: String,
' y7 q( y6 l. k5 V4 B    required: false,
    default: ''
2 o& @7 }" s9 @3 q+ P  },
1 i5 @% t6 ~" E: p- C# p  suffix: {
4 R: G5 o' q) u! Y# L    type: String,
% T$ \# N+ _/ c% z& ?' Z    required: false,
    default: ''
( F6 @0 [6 A' L$ f& {" M; H# j+ m  },
' e8 I& |: A9 g' P: E  useEasing: {
    type: Boolean,
2 g( E% j5 A1 h8 E5 A0 G  F! ~4 U    required: false,
1 ?- b" L7 V3 A    default: true
$ q& i+ C0 n  H  },
5 r% Y* M/ K+ R+ o% R  easingFn: {
/ |! ]9 u& T: K" X* R8 E# x# e* v" h1 l+ y4 s    type: Function,
    default(t, b, c, d) {
3 ~* t+ `' C$ D! Q( s6 j      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
! t5 q; {) h. T  }
})


: W, O" d7 A3 F3 H1
2
+ @1 {% i2 D; V- V& p9 v- _3
+ F' ]5 J3 z$ U5 d+ a4
5
) X# f  \& p2 j' o; V; y# N6
3 C, G8 J1 G7 D6 ^. B( M7
- Q% _. ?! {. R& i4 G3 Y2 O8
. @( N6 [5 W0 Q) [& G9 V" |9
10
11
% w  F+ \2 q2 ^' p" W/ r/ A8 r12
2 R1 C, p  u# Q; y" r13
14
15
/ i) `: {" e1 o$ _7 ^- ]. N# C( S" b1 U16
17
+ h  J. I: [) ?/ s+ V18
19
$ V& M* t+ {& e" f$ [; n& C1 D8 y) ~20
21
22
4 t; j" `) l9 b2 h23
24
25
26
. _+ w. l4 U& Y6 f2 B27
28
29
/ e& Y3 s, m4 L, L" g& a30
31
32
33
6 `0 L9 g$ W8 a% w34
35
. w: \5 r' k, N0 C5 ]' R36
. A6 A# d( [7 n0 s37
38
39
+ f( r' x- m# J( X2 `3 _) S40
41
7 n" u. e  l' R. g42
43
44
; p+ g1 ~5 F) E) X* H; ^2 @45
46
47
48
49
50
51
52
( \! y( h; o/ [8 H: y53
54
55
/ a1 O" G' s7 k7 ?56
8 c7 u* x; M' N. D( I57
58
1 d& j7 @: }0 l! I) S59
60
5 q4 F4 \# t7 N  c" r61
62
. \$ w6 S8 s) _& [启动数字动效

const startCount = () => {
' ^& ~$ |. g6 m: Q% W  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
+ y; i9 I6 J+ N! U% o}
1
2
3
; R( k9 `6 w8 P; Q- R4
5
6
( L5 W8 s% q& L' D+ ^7
5 f9 T8 W3 l; B0 N! `$ `+ p/ \核心函数，对数字进行转动
0 R: m4 C8 o' @! K+ B
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  W: t) J+ C0 g3 L+ F; T4 i  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
# n8 D0 \, I( C  if (props.useEasing) {
* {+ z5 F3 p, Y    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
! X- h/ y8 i* T4 }& n    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
0 X% R7 E4 X2 V! p, W1 ]    }
  } else {
, U$ m5 N, z5 H    if (stopCount.value) {
6 l' r1 e4 M, O( q# K      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
# a2 |) z1 S: W2 u' S    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
1 H( q% \2 Q- f) w    }
: P/ a* M3 [; V- S  }
, D/ P4 O$ o  u- H. s  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
, R7 n/ i5 j  b# z    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

  state.displayValue = formatNumber(state.printVal)
7 P5 B" `+ Z; u/ n- z% p( K! s  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
; L& B3 ?  A5 d/ p+ v  }
}


( b3 C' a5 i( C: \' k: M: x' L$ ~! Q9 h// 格式化数据，返回想要展示的数据格式
  o! y, B2 X! Iconst formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
& M8 j3 z% |, D! x7 ~3 {* w  const x2 = x.length > 1 ? props.decimal + x[1] : ''
6 o! @+ v9 r' U. Y7 ~  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
/ M7 Z% K* m7 ?& e; T& z; c+ T      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
- N( L' \) ]! p0 g    }
/ [% W0 s- G' a7 {' R6 g  }  }
  return props.prefix + x1 + x2 + props.suffix
}

2 ~- ]: g/ e! S0 ?1
2
3
4
5
6
7
) V: Z7 r) P1 j  r# W, V" L# b8
: V, ?# f  B8 L! r7 |0 V9
2 g$ L) a' T$ g/ L2 g3 J% m9 I10
11
  y5 i- u) _2 d( Z. M5 N4 i, d12
13
14
15
16
1 N! ?# G) {* p) @17
18
& J8 b+ p" X4 Z* _/ r6 g3 \; x19
20
# L" @9 g. s+ x* A  T: W21
22
* _6 K* _! u- h6 ?  D! Y1 R0 s5 j- T23
24
+ x( N; y- |- Y" G25
/ F' o! _4 ^0 ?/ [' H26
27
28
29
3 U3 Q5 Y7 B9 U/ x30
31
32
33
( Y, i  W  }- W; w) D9 I8 w* o# h1 O34
35
36
7 Q" S2 M0 _6 S  }& Z: b4 x37
5 ?" A. y( f( N: B: @38
; s6 |# ?9 J# U- Q4 }39
4 I" {+ K( a2 ~( Q40
8 E8 I7 S; o9 B41
+ y. ]/ h; T+ g5 e42
43
44
45
46
% |% H  W1 J7 G) H# G47
2 \6 ?* }) K' o% @, ~( t) P$ R  Q48
& @& q. l, A3 h1 u( h7 d取消动效
& ^' o4 w. i8 J. ?
; c! R7 }' x. s// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
" d$ c+ Y2 f: g/ Q+ S: r1
  D7 C9 T& k7 L  s. {0 a2
3
/ {# h; m) C. T# ~# }% n4
完整代码

, K; E0 O  J. C3 B! x; M4 }: k<template>
. P" [- J3 N+ e0 `; O3 O  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
# `) h) e$ u2 _. v$ J& G! j6 ^  Gimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
* j2 C7 f! Y( Ximport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
const props = defineProps({
+ G) M5 p* R. Q/ x, q& b! o) ~  start: {
    type: Number,
% j  L6 {0 f! ?6 u5 K, t3 n8 D2 }- D    required: false,
( X* J4 z! @7 K% E7 |    default: 0
  },
1 Y# f8 p9 R0 _/ p2 f: |  end: {
    type: Number,
    required: false,
    default: 0
4 ?7 W" u+ h$ j* p5 M  },
  duration: {
! [( e- b# B( G# j* D    type: Number,
) Y! w9 U  r' Z/ _/ N/ P! p    required: false,
    default: 5000
  },
  autoPlay: {
7 t1 u" ^# Z) ^5 s# J+ c/ x    type: Boolean,
    required: false,
2 b0 f2 D, \8 n7 ~# z    default: true
, ~# Y9 q: g+ C5 s; `! i& [9 P$ f  },
  decimals: {
    type: Number,
    required: false,
    default: 0,
    validator (value) {
      return value >= 0
    }
  },
) w9 X7 p4 f# d8 z5 q  decimal: {
2 g2 ?% a7 e" ~, z$ o    type: String,
    required: false,
    default: '.'
+ H# d* U8 S" q3 Q+ D+ C4 I  },
  separator: {
1 Q; _2 C2 H& C    type: String,
. {' g, t3 c4 K    required: false,
    default: ','
1 c  Q$ K& y, Z6 e  },
  prefix: {
    type: String,
4 y+ ^/ X- @7 |+ O4 n    required: false,
+ {3 H# x- C7 ^2 M  \* |# ?+ ], ~    default: ''
  },
  suffix: {
! H* J/ Q& H& G8 G+ l! L7 O    type: String,
2 Q/ k1 \; y! g6 v# F  ?9 C3 T    required: false,
    default: ''
, z2 N4 c0 w3 J  },
' q( C; `$ y+ j  useEasing: {
; _: u  y' a) j+ l, W    type: Boolean,
7 k* @# |) x: z1 ~* B    required: false,
$ l6 A( |" R0 M3 K* o1 x    default: true
  },
  easingFn: {
) B% X$ C: A' H0 v& x. O8 M    type: Function,
: u5 u5 i9 a# f* f3 K' \    default(t, b, c, d) {
9 z" W/ u& a+ l1 S$ L+ |. e      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
8 S6 i8 |- i/ c7 ^( a5 Y  }
) P! Z* f. G0 T. Q})

5 H% V+ z* M. l$ |& H! D" cconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
}

// 格式化数据，返回想要展示的数据格式
. c% m% A( I! [0 P0 G6 ?const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
" r5 }' o) B) p    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
5 x, w0 Y$ f' |+ r/ l    }
" [% K6 G" k' z  }
  return props.prefix + x1 + x2 + props.suffix
3 p/ M! i% ^; b4 B( j) X. X}

0 ]9 {7 n8 o; y& }6 \! |// 相当于vue2中的data中所定义的变量部分
: f# V. b: j* `9 iconst state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
( W9 w  W/ V7 `  printVal: null,
: o& s, O; X: W4 n9 a& k" F) w6 H# ?- K$ i  paused: false,
  localDuration: props.duration,
1 C2 @5 t" q. F7 z9 p. Q$ [  startTime: null,
# y' S6 X: X0 O$ U  timestamp: null,
  remaining: null,
  rAF: null
})
' f3 ]( L- P& {* V
" J! p4 Q, R* ?8 o" h// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])
: ]' [) }" h& B% O' ?+ K7 r! W" M
const startCount = () => {
, e4 I- K" ~4 t$ l) q  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
) B5 \* S( J& o9 P/ B. f) A% y% k3 S  state.rAF = requestAnimationFrame(count)
$ t! `2 Z- P! R}

3 J& I% N, c1 {% _9 W6 bwatch(() => props.start, () => {
3 l; W. m/ H+ \7 ~- C5 U# @5 j  if (props.autoPlay) {
8 Q+ K' i3 |9 p1 B: d7 n    startCount()
  }
5 |# R4 B: }) H4 n0 k7 Y: j5 Q})

# b, w" e( b4 @$ k. x6 jwatch(() => props.end, () => {
  if (props.autoPlay) {
) C$ }0 `. \( \% E. [! b& k. K    startCount()
8 h  n' f0 s6 d  }
})
( v1 Y& _- i3 g// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
    startCount()
  }
/ k8 n6 w; b3 k7 V  emits('onMountedcallback')
; l5 v# \$ H: g" I})
// 暂停计数
const pause = () => {
" P* r( b1 A: e; i* }: }  cancelAnimationFrame(state.rAF)
. a, G6 Q* l* f1 c0 E! D}
+ x# u. x+ H& ?1 j3 Y4 L9 p// 恢复计数
6 {- @% A# Y1 d- U+ m% i! L3 c8 Lconst resume = () => {
- z1 S+ U/ t' @; ?  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
6 |* g0 K( U7 G. L  requestAnimationFrame(count)
7 N& x' O  \8 R6 H/ M+ |}

" e0 [4 \( g/ e4 r; Dconst pauseResume = () => {
  if (state.paused) {
: x$ X: R( v# p    resume()
    state.paused = false
  } else {
$ Q; C: G  @; L7 |, G- {( v7 P    pause()
    state.paused = true
  }
}
* F- }9 J1 Q& \$ w( ^4 Y; }9 W, ?
const reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
  X/ {$ P4 N* b$ \- A+ L  state.displayValue = formatNumber(props.start)
! |/ p& q$ }4 [4 Q: z/ Y( B}

const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
( X9 @# m; @3 ^1 K5 @: T5 Q  state.remaining = state.localDuration - progress
  A. b6 [) t: h5 @/ W  // 是否使用速度变化曲线
0 t$ L  o; j9 _$ [$ O  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
4 R8 A1 o' g3 `- f+ K! I" h    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  C( M" R" ^) L# U3 l. ?  } else {
5 s, H8 z/ `# _6 s6 r2 Y0 m, E6 t7 \    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)
) h9 s% z# ^# s    }
' I4 ?& c; |0 W4 k( [, A2 S3 U" v- R8 c  }
, U1 _. m" o# z+ B8 f; W4 P7 D9 G5 P# {  if (stopCount.value) {
- r" O7 j/ A; P! c+ V  g# \    state.printVal = state.printVal < props.end ? props.end : state.printVal
* I1 o. {9 R+ R  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
7 B& Q) ~) ]: U' d4 J& v  }
: b" r2 x( N0 e0 G* u8 Z5 I
' g- u9 F/ g4 I1 a- e  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
: r4 s( w7 b& ~/ W, v5 n1 J}
  a1 l. H/ Y$ g// 组件销毁时取消动画
onUnmounted(() => {
8 p* t' h+ D- T8 @9 t- y  cancelAnimationFrame(state.rAF)
})
</script>

3 O! M+ {( L7 `9 _' C% f  r: y% h/ c1
! J3 v. Q6 {5 @+ A8 v: f& a9 K2
  G+ s# ?5 H& Q5 Z3
4
5
3 i  Q5 i) n, _/ Y* }( S; ~4 S3 P6
7
8
9
* `, k& W) _: D' c10
11
: X* e! L; M) w% m. u. s/ z% ^12
13
. }$ y9 @9 M5 E9 R( G! \  c8 S14
15
16
17
6 z7 Y7 T4 |; r5 d6 v) S  ~9 d4 L18
19
$ I6 N/ }3 R0 U% A( G" b6 c20
5 B+ l+ l' S+ K1 o21
22
23
24
! K# q# q0 h1 N* f+ m/ G25
26
27
28
7 P6 ^- a+ C8 v- z29
+ X+ k1 v  J. h; M: M' R30
31
32
33
' p& U6 c  r- j! ]9 ~- j34
35
36
37
38
6 ^+ ^& q; I! g9 b2 Y% e39
5 E) w# c; L- b* T40
41
; a& Z/ Y2 U/ H$ I42
43
44
45
" \- T' C* C$ l! l6 D; H; Y46
47
48
1 g8 X8 A: `% F# W49
& A4 S) _" l1 X% u' s; n50
; x6 L" D% Z0 H: L- X51
/ S3 E$ d+ _$ {' ~52
8 H) N  P) i) K53
6 f& v9 g' `$ e7 x' B" z; ]54
55
/ j. ]4 J3 [; t7 {: f: x- a2 B56
% Q' u7 L/ h3 M6 Z57
: o0 |- q, x( P% S7 P0 F4 i, V58
( @& j; D7 L. H0 c+ |59
60
61
62
63
) q: J. \/ s- W8 W& o* [! M64
8 g5 j7 e/ ?& x/ E; K65
6 f5 {1 j; n" N! b66
67
& v4 d2 S9 o  @* r% H. G68
69
; ?2 z( ?" s; O, X7 g$ E70
/ k9 b3 E. _* B1 h6 g71
72
! |- k& M/ w# L0 t73
74
75
76
1 P0 i' |. d( G4 R77
$ S2 V, |: q& n/ o5 m' O78
" N, U1 L/ ?$ G6 B4 u# z* y79
80
! w6 @' `$ h0 j2 K81
  s4 _. F( V8 N: e- o5 y# x* n2 I: U' s82
3 x2 t  Z# y8 b9 p7 e) f$ k! L7 ?83
84
1 A3 }% r1 @. [$ o8 {& c, V! W85
86
87
88
+ G! n2 M2 G2 [+ o3 `6 L5 K8 {89
6 o5 ^  z- |' n90
91
92
# m. t1 f. `, ]# T* M93
94
95
$ z8 Z7 X) W, [3 h0 t/ _* C# o: z96
97
$ U. i$ L" C0 J8 k. c/ g! x98
. A2 p! }# P5 g* ~& y" ?99
100
101
- V2 P$ P; n1 z$ ^% c102
103
104
105
- r3 D( |* h& ~' _, J: q5 m4 h" h$ @106
107
108
: Y& B4 C2 p  ^109
110
111
112
113
114
; Q/ Z0 D2 i1 T. p; T& n115
- Z+ i& N5 d8 g0 i116
117
; G, P. l2 @: {7 D& W6 V, o118
119
120
121
! E- R! L. ~3 Q, [+ T& C" d122
) Y5 G: N; K5 ^. ]+ G0 H  a123
2 `, [3 O) n  Y1 ]124
125
126
2 u2 b' i1 B/ M127
128
! Q. m& ^$ y* v% }129
130
131
( s2 w( F0 g3 t. l$ F" W132
1 Z/ K9 n3 m% v* m133
134
+ L6 x* y, q4 Y) Z) K+ M: l135
136
% a  G5 J9 p) w+ o5 T0 R137
138
8 i$ @9 a1 H; J" l% G139
/ Q0 r5 W" x- j# P7 t140
141
2 i0 c% G" X8 B  C. l( f* R* X142
143
144
145
146
147
148
149
150
) E: }% S1 p! f3 X. {2 W& ?151
$ l0 |5 o6 i: Q* T' A; a* b7 r152
7 [( g* U* j% J6 b  G/ @; u( b153
154
3 y4 z, J/ K, @; H3 Y  I155
156
157
158
159
160
161
162
163
( a+ L* q) T4 F' B* n164
- {# f' p  m" r( w' D7 k0 \2 D" S165
166
167
168
6 S$ z1 {: Z7 E0 F7 U# d1 G169
170
  j, \* Y1 w+ [+ O/ ?5 l171
172
* ]- P, I2 t) d4 L  l173
2 x+ ^  r0 C0 I" v174
! v1 Z- @& q& }# v- m8 W' r175
176
! c+ [: J* Y7 }177
178
179
1 `. B' a. g( a; \; o( q& `180
181
182
183
184
  C) h  h  l: d$ e; l( j& Y5 ^185
186
187
% X5 F2 Z( V9 m, T! `7 X188
/ y) a' z( U7 S& i7 B189
$ X" z* k% O# P190
7 q( g8 P; @3 o- }; N191
$ n# Q! t  D  ^0 a! w( n2 |192
' `8 e$ R" {2 P) d, u! N193
194
) u( k: y- s* H( T/ P. m' }+ e& c195
' a- {; u) q7 \' }! }3 R7 n; i196
- Z- r& M+ s/ d* e$ C! w& J197
$ S) ], z4 w; Q2 K' @' r- O: x  s3 N198
3 u5 C9 y% q# U7 V9 [199
200
201
202
' ^: T& y4 g. z) R: l总结
$ a0 m% j' p  X; O: X自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

8 O. Q; u! M/ k5 @% Z7 n9 ndemo演示
+ u7 g' Y5 r" A9 {) L后续的线上demo演示会放在
demo演示
完整代码会放在
个人主页

  J( |) `; e, c希望对vue开发者有所帮助~

+ h' S) w# M0 u# A1 @个人简介：承吾
工作年限：5年前端
地区：上海
4 }$ ^- p+ g. j' I个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！


" j1 X4 d/ N/ L% Q

————————————————
, X. L7 H6 M1 H' _' R版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
: `/ F# e" G- |1 P8 l+ i6 {* \# b原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847