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

杨利霞

vue3 | 数据可视化实现数字滚动特效
$ j; J" R, l7 F% C
( `- D4 H: g" a3 v+ \前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
& g5 q8 ^9 ^7 J: xTypeError: Cannot read properties of undefined (reading '_c')
3 v, H7 K5 ^2 a+ v6 c5 W的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
! [0 h- `. ^( z; }2 C# E
- S/ I: Q  l% M+ p7 f5 A" W
思路
5 V7 t0 `- c, ]使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

文件目录

" j' x7 I" u% O) h7 p& a, {
4 I: H' w- t1 c3 n8 M% U使用示例
: u7 |1 C; }8 p; g5 ?4 l( l<CountTo
; ]  E- Q9 G3 r4 s& P- B& m8 t :start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
* V% c3 m3 v) j4 K :autoPlay="true" // 自动播放
0 Q; S2 r& O* J" T2 s! j# p7 t :duration="3000" // 过渡时间
* F7 W& N7 n! g' _' ^1 v  r" z prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
1
1 }  B( n8 G+ r2
3
4
5
6 j) W- A3 f7 @6
( L" C: i0 B; h* ]8 N0 B7
8
" e3 L1 k5 x3 {7 F入口文件index.js

% e2 \. c! d" K( G) X" s7 {const UILib = {
1 d! ?' Y- f4 U: R" r  install(Vue) {
    Vue.component('CountTo', CountTo)
! j7 b% W# b. m$ n' z) q3 p  }
}

export default UILib
3 t% b  A, g- T5 W; n" Q  P
% W$ N$ F/ Y; ]* T* i& ^4 I- F1
0 b& a' v- S7 u- v7 Y' H2
1 [3 r0 L- G7 m( p3 g: N! G4 K3
4
$ {* d. ]0 p' J& g, X9 d) G4 b0 r5
6
7
) ~% g( m# `9 L+ |+ w: ^8
" P& G+ |+ d9 P8 G$ x7 m- p7 ^, S9
0 m# }8 {% D5 C4 Amain.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
1 E1 {7 n2 a) V" @3 w: B( u( m" Z1
8 ?: f& r7 z: m8 {- t4 C2
. P7 m- X- S0 s4 J# _( M! j2 n8 c$ }5 SrequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
1 G* ]& e+ Y& h/ j( C$ d' V各个浏览器前缀：let prefixes =  'webkit moz ms o';
! B- Z, ]5 ?# x6 e) R判断是不是浏览器：let isServe = typeof window == 'undefined';
( E) S+ b* e' F; v9 m增加各个浏览器前缀：  
; M" y3 F- Z  Flet prefix;
let requestAnimationFrame;
8 L" n1 U  s5 K) s; w1 q+ {% ^let cancelAnimationFrame;
3 ]+ C+ V( \% J; T; P% x// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
$ F  B5 f* N" G/ l    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
9 Q2 H; @( @; N        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
3 X& A* X1 X0 _! d0 I" U% @        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
" M4 ~& _9 h. P8 W1 c1 g2 N    }
1 p3 U6 ^: e$ C
& J, n1 ^0 ]6 N; L: s* J. a3 V  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
9 N) g' n( h1 k2 u! i/ C    if (!requestAnimationFrame || !cancelAnimationFrame) {
5 j5 y. X$ H# X' N" m5 a2 Z) A  ~        requestAnimationFrame = function (callback) {
8 @' V3 c5 Q7 N! L; K            const currTime = new Date().getTime()
- f6 |# f! @7 R1 T5 K            // 为了使setTimteout的尽可能的接近每秒60帧的效果
4 S, |! q) X4 {' R6 b5 `" Z0 q            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
$ v/ R0 _7 f6 T; ?/ I            const id = window.setTimeout(() => {
! k8 X, R( S# q; D$ c4 r                callback(currTime + timeToCall)
            }, timeToCall)
' [! q6 x/ K, l5 k5 H/ v2 j            lastTime = currTime + timeToCall
2 p2 n: y& |2 g8 N$ Q            return id
% j+ H+ h1 e$ a* b% b        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
% D. U, X; }$ W6 @: [        }
    }

1
! {* g2 L. I2 ~, ^, ^2
3
4
' s% F  W8 Z2 S5 s2 S5
6
& f) R( U1 b. X) X6 `: G3 V+ ]7
$ c) B6 P9 U0 [& H' m8
9
4 Z; a5 g/ P: I) Y10
11
12
13
14
% Z3 H$ h  f' w# v# l5 V, ?9 ^15
$ {! S7 k6 y% m, ~1 M16
: }- W% Q: L% H" d17
) D8 C# B( S+ [8 e: \1 o( Q+ d18
19
20
21
2 f% r7 J4 V( i; m' E5 Q' K22
4 Y. m1 a1 H0 L; O' {( L1 P: l23
, x, {2 r& o) W' i1 |, y3 `4 _24
. l- C9 E# H, m& h% \25
26
5 A( I4 c* h( r2 R. y; s27
28
29
30
9 {  a3 M* S3 M$ B0 c: H7 N31
) n7 Q9 q: c/ g( B* W32
3 T( @, t; c2 _: Z, m* s完整代码：
: e! V$ I, H3 @! UrequestAnimationFrame.js
7 P/ V( M+ I) h4 O
/ t% T. |, ]; v. j8 Y* O% f' tlet lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
3 z5 S& t* u7 c, g+ G
let requestAnimationFrame
let cancelAnimationFrame
% p3 e/ G% K4 p$ S
// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
! v! }3 p0 O/ P- [# s+ @, lif (isServer) {
    requestAnimationFrame = function () {
& {$ g8 ?5 E5 p5 \8 w! w        return
    }
    cancelAnimationFrame = function () {
0 w) H0 T" _$ p- l5 L( C- B; P        return
. x/ W% h+ \* T1 x! Q& U    }
} else {
/ t4 g% ]6 V  Y& k. E) l) c    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
! [; l% v1 r0 k( r6 ?6 _" d    let prefix
5 k& r$ ], H) T( m5 j5 z# k6 L    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
. o7 Y& S4 |/ E2 t        if (requestAnimationFrame && cancelAnimationFrame) { break }
2 l% Z: r. i# D. f7 o% [& `8 @        prefix = prefixes
! ~- P7 x& g: H  y        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
  _7 I' Z7 R4 E    }
  r/ F" W8 s/ o, t5 F5 b' |
8 ~2 z# L9 W+ Q5 }: |3 c! T    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
4 |: ]( ~( O! h: v7 r6 a    if (!requestAnimationFrame || !cancelAnimationFrame) {
1 n; H9 w- O/ D) Z+ A8 |4 y5 r% C        requestAnimationFrame = function (callback) {
$ q+ N6 U& k! w! U            const currTime = new Date().getTime()
% p- d4 t8 {1 d            // 为了使setTimteout的尽可能的接近每秒60帧的效果
% A8 s, R6 V3 E1 v+ l1 K            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
8 [7 t7 y9 w2 z$ X            const id = window.setTimeout(() => {
! K% f, S+ [9 G: R9 K  `                callback(currTime + timeToCall)
* |# Y3 V- F' |9 ]: p- }8 H( r            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
        }

6 X4 g. N$ t1 O( B- v4 C- ]        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
+ T+ c* G0 F1 ?4 g' H        }
; D( n5 _) K2 I, A1 `    }
6 d. z% }5 m) a( X3 t; o}
% V7 U% \" _+ G6 r) r- p
  \1 ?6 y6 u' }2 O; w. r- s9 Vexport { requestAnimationFrame, cancelAnimationFrame }


1
2
3
& K$ h$ S6 _, f  f$ u4 G7 t4
, x; q+ W% b9 b- ]5
6
. q) \; S) E2 z% t- z7
8
9
10
11
4 v  [7 g  ?8 l/ q3 J7 e12
# K' Q/ \6 A8 ~! E/ u13
; J' S) u& z! X0 \14
4 i$ q+ q5 D; O* D! F$ |15
16
3 ^# A0 U6 ~5 u  ^17
18
19
% m$ O% r8 R4 v: v# U: }4 m20
21
22
: e. _. @1 ]& g) q) F' T23
24
! w' U% M3 J9 M( C25
26
27
7 n5 s% t( S4 I) d) j9 v0 G4 P28
29
) W4 Z( N# H0 `2 @9 u! Z% R4 H% t: _30
9 m) K7 h" L: h+ x1 l3 E* }31
- D: B* b8 Q3 J7 O& ?1 o" r% ~7 d32
33
2 c  ]6 f+ P$ H1 e: d34
35
! ^% p* J- a3 Y+ r/ b" _36
37
+ f+ a+ f6 m- W38
39
% p, U0 c7 e5 t! c7 [40
2 A( b+ |5 S( A41
- }' t7 T+ @: W8 `6 }; m( f42
43
% K8 {( {9 A! F$ N  Y44
45
* _  X8 J" x) d' a8 k8 B/ B/ z. ?46
5 F+ I# C4 j* i47
48
CountTo.vue组件思路
- A9 j- h$ j: w; N0 a首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
/ n; m0 Q' u$ m1 S# F1 k; d
; J1 |# o9 Q1 Z引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
  g8 G# u" \. [. w1
需要接受的参数：
5 u  H: S/ U. x
const props = defineProps({
5 L2 V; }% Q3 ]5 F6 O  start: {
    type: Number,
3 K7 D$ y; Q% _; L4 B: I    required: false,
$ K! \! {  {2 T: @& l; V! |4 X    default: 0
  },
  end: {
    type: Number,
! \  z; Y9 {2 ]/ Y- s- x    required: false,
    default: 0
) J1 y5 H- B- L7 S2 L  },
  duration: {
0 Y" n) g4 n4 m2 H7 {* x    type: Number,
; Z4 U9 p) \! A7 [5 ]* M    required: false,
, I' y9 a5 b  y9 S) ^    default: 5000
6 M% O) g8 b1 S% R* u  },
' F( A3 ?  A' X1 s0 Q) j7 w  autoPlay: {
    type: Boolean,
0 o4 Y  Y5 m1 P/ N6 x    required: false,
    default: true
  },
* x% i; z. d/ L+ B7 p  decimals: {
    type: Number,
. r0 s+ K) J/ t/ w0 K! f    required: false,
4 _0 g+ j: [! L2 p    default: 0,
    validator (value) {
9 r" j) Y* C9 y- i2 g; {; L      return value >= 0
    }
  },
' l# K5 [9 V% f8 g$ P6 s  decimal: {
% v0 M! @: l* ]0 i# w* y6 b$ _2 I    type: String,
    required: false,
    default: '.'
  },
; k: `5 J! v4 _! F7 ^% @  separator: {
    type: String,
    required: false,
2 e' a/ q; p( y2 i2 F    default: ','
  },
: f! l  G+ l) S5 w  i  prefix: {
    type: String,
1 n: ^- b5 v) m/ P7 ~: H) i! p; r    required: false,
, [- F* `( D1 W! C  n    default: ''
  },
  suffix: {
5 Z* {4 R9 ]4 n8 a( J    type: String,
( Z/ g) M' j0 v) K2 k3 o    required: false,
    default: ''
. q# _  K9 L1 {. u% e& C' V  },
  useEasing: {
    type: Boolean,
6 |  J1 w) N4 J( i3 s    required: false,
2 p3 R+ E9 _+ {. [0 B( F8 o    default: true
  },
  easingFn: {
    type: Function,
* U4 F' k$ E+ f& O# I+ }# F) K4 U    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
7 F; L- ?$ V" n4 v    }
  }
})
* X# h" P! k9 `; O: F2 Z0 u) C

4 i% a& X! g3 @' z1 T- l7 v" M: P1
2
3
5 `9 @' u; G+ x  C4
( v5 o4 [+ ]1 x! x& e6 w) Z5
0 q* X- V- k' b! l" K8 l6 g6
7
) {# [+ X! Y- X8
7 ~$ g% p1 @1 P+ E( J/ l# F; a9
2 P6 i- j7 ?4 D9 l, a8 i10
% h8 n, t: m7 Z$ o7 J! s3 Q+ w11
* f7 E7 k: j- I( Q6 G( g% w: b$ S12
, ^7 G4 M. q" g; D# I% U) L13
14
15
16
17
, w: W) @0 q8 j18
19
+ l- g  s" ~: Y% e; _% U. r. a+ o5 {20
21
) n( @5 a9 p9 h( g8 z7 c3 B7 Q22
23
4 V1 z5 L( v7 A- s2 C7 ~24
25
26
1 @! q5 R) c# N( j: \. u27
2 l& D% R1 E: Y0 Q  [2 k3 F28
2 m4 i* V/ n/ ~* F8 U' b29
30
, o8 T) j: `( J* s+ X, X0 t! H( G31
32
* y2 \( {: u4 H6 d3 a( B! G33
34
' _$ @0 _8 \! K35
+ b" h) i/ W- r* m# Q1 `5 @36
6 V$ e( A3 a6 V2 C37
38
39
, M- K4 d; v% u  b8 V+ _40
. x, @* a7 i8 c* t6 N41
42
43
44
45
46
, \/ x; I3 O6 \! w+ K3 M47
+ q3 X, Y( o" x48
9 {: c. x0 r& K9 p49
50
- r* s* W& L% d" T9 H51
52
0 R. x! G1 U% }/ L0 F, @, j53
54
55
1 U. v3 E3 O4 _56
$ K  u+ Y* R* x( z8 z57
- h( I) l7 P4 w4 Z8 A0 C; y# F; c58
: w% `# ]5 o2 I8 N59
60
61
- q6 ^" p& {' q6 i62
0 L( P6 w" G2 \5 U启动数字动效
" s4 e  w2 p/ k- W) K
8 S% B" q" M# Jconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
, M  U3 D0 U7 C  state.localDuration = props.duration
1 U0 ?! b- l/ D7 n! ?  state.paused = false
# @7 D" K, T/ U+ `: o9 j6 f! i  state.rAF = requestAnimationFrame(count)
! g( g' i0 W) x}
1
* G9 L( H4 `! U% v2
0 Q  D/ r1 `6 a3
8 p& w2 _3 E  ~+ f, \4
# e" s+ W3 d- f8 a1 J7 d5 T9 n5
/ T5 k" m3 b6 F/ ]9 H, [# w7 C6
7
8 t+ ]# f6 C0 r. H0 m核心函数，对数字进行转动

/ x$ ]$ H0 w+ P) {  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
- o9 q. `# ]2 }3 ]/ J+ Z    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)
    }
9 A' ]  S- A2 }  } else {
    if (stopCount.value) {
) L4 x! L. d! J      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
0 m7 T- F* P) Y. i    }
  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
5 g+ J  y+ o1 j. {$ \' s    state.printVal = state.printVal > props.end ? props.end : state.printVal
; n  Q' k5 |+ w" [" p# s  }

  state.displayValue = formatNumber(state.printVal)
' ]' d/ E) n) b, Z% y  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
5 a- V* u1 p, a' g& s" g+ M3 q- h/ J0 J    emits('callback')
  }
}
5 ~; b3 w+ C( I. q3 N9 ?. R& q
, C0 _$ C, c8 H; q+ }0 d& q; b9 H
// 格式化数据，返回想要展示的数据格式
! M) F+ J% r6 ]) ]# @' vconst formatNumber = (val) => {
) B3 a9 y7 G) e8 n  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
% d2 E4 H% Q. R6 k, D* P  let x1 = x[0]
* U5 i, S7 b# R4 h" j/ J  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  p: G7 c5 E, J  E  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
0 c$ M( H. [) h) a  return props.prefix + x1 + x2 + props.suffix
% f6 {9 c! H4 V0 V5 f6 n; @" S2 R}
: z  w; F/ n1 d. }& J4 @! s
1
2
3
& [- G5 @, y4 ~9 k- v* L' K4
8 ~) K$ i+ v# M! m5
( }5 n3 u1 [  w( h4 M6
7
1 l" G- ]3 e9 ~, n- p, Q- \8
! V( O/ n& q9 q& ~4 w6 ?/ D0 {3 J9
10
11
) O) t& A' P8 y1 u3 G12
2 M; R( W4 g- t/ D% C/ ^13
7 W, K  [' F6 |; [14
0 a! f6 |7 r! ~% a15
/ X+ R8 S; u& J6 q7 A$ m16
17
# k6 k4 E* \  z18
19
  P0 Y$ l. X& t6 ], ?2 z20
21
$ Y1 a  f$ Q9 L* q. n% t( q' M22
23
+ j- G0 w( d# W$ H0 Y1 _1 T24
25
26
27
2 t# ~: [) }# i/ @28
0 q* |, B1 r* {3 a% C7 w$ a29
$ X- W" u8 s; v$ }$ J8 F6 s30
31
32
33
34
35
36
37
; @6 H# e' J% [: y$ g" j( t; P5 \38
39
40
- C0 f8 f1 p1 @# P2 Z2 A41
4 Y1 |5 ^2 R  I/ k+ m42
43
& I7 v0 k( ?9 C, j" K2 t! r/ {5 x44
* X: n7 ]# P. l5 P6 C* e9 y" h( @+ G0 G45
46
47
) y, s- W% Z* H9 S/ o! r48
; J8 b0 O" e  H取消动效

// 组件销毁时取消动画
onUnmounted(() => {
2 |; c! U0 n$ d+ L4 c7 M) f  cancelAnimationFrame(state.rAF)
, k# T5 I; w7 e2 |% q/ r4 ~})
1
' l' s# X# c0 \5 v/ R* m1 e. |2 _2
* w; a" A" G1 V- C( Q3
4
4 W) M7 D5 \' F完整代码
0 {# ?1 X, x+ m7 x) ^
<template>
) m1 I0 {, s4 U, h1 S% ]# w& k  {{ state.displayValue }}
1 F+ H" v3 v3 P. D5 g: e  F</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
( \  Y2 ~6 v/ v2 q0 ?import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
9 F1 ^& |8 Z7 uimport { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1 D* N* a9 q# g/ u' `// 定义父组件传递的参数
const props = defineProps({
2 x8 E! H  R5 e- l% A& b! ^  start: {
    type: Number,
6 l  |/ a1 {# i    required: false,
    default: 0
  },
  end: {
. f; R/ u3 O7 u) Y, n    type: Number,
    required: false,
    default: 0
% b& n7 J% {9 r% U7 `! s6 q% ^  },
( A  |5 i% C3 `/ L  duration: {
; w* @& X: m% Q4 E    type: Number,
    required: false,
    default: 5000
; n% b# L- A6 H; G  },
" M2 i/ _. f+ l0 F  autoPlay: {
7 G% o( K- |7 g    type: Boolean,
, G# p# j: n& G: w    required: false,
    default: true
  },
  decimals: {
    type: Number,
; V0 m. l+ u0 N3 G; Q    required: false,
    default: 0,
$ O. Z. W* S4 c9 C' Y+ y    validator (value) {
      return value >= 0
    }
( ?9 z& N% V! Y- M0 A* M2 j, X  },
  decimal: {
" S2 y( t, a1 _. k9 d& F9 C, b    type: String,
    required: false,
& z$ Z6 g) Q1 Z0 C6 q/ m5 u: ]& M    default: '.'
  },
+ u, {( [) L* f; z8 ?  separator: {
& {" k: M) h) c    type: String,
3 b$ \; w" {( V' W$ U) v+ B; P    required: false,
4 U. U# T$ r9 d$ x8 L" i( U    default: ','
  },
  prefix: {
" H6 y5 K  ~: b" L    type: String,
    required: false,
/ n# n% Y7 W6 u% R) J( E( P! ~+ M    default: ''
& _1 f) |' N: b% z+ o' O  },
  suffix: {
: G2 {4 R- w4 r. G( c    type: String,
8 [, ~- v- E7 R2 m1 m0 d$ w    required: false,
+ k9 U! C; p7 _( Y    default: ''
- ^& i/ T' f, O2 J* p  },
  useEasing: {
( b; _$ q3 H0 ~) l2 ?6 S. f4 N9 ]0 ?    type: Boolean,
) v0 c5 B" b0 g, a- g. Y! S" f    required: false,
    default: true
  },
+ E5 Q$ H4 @8 S- T% ?& W  easingFn: {
    type: Function,
' l! p  ~# \; y& l1 d2 m/ S8 P    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
# H8 S% j1 {  e  }
})

const isNumber = (val) => {
  return !isNaN(parseFloat(val))
4 ~9 @" ~+ p6 U  o4 o}
: D$ U7 T& d+ {# H4 Z0 [
// 格式化数据，返回想要展示的数据格式
- d6 z( D8 u8 \4 Y6 p3 V. D% Econst formatNumber = (val) => {
# w; G! ]" D) G/ l  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
: B* l/ o. y! N' r% e  let x1 = x[0]
& S+ _& R  w& Q  H7 c  {  const x2 = x.length > 1 ? props.decimal + x[1] : ''
( S9 G, h# e) E  V  I$ e2 I  _  const rgx = /(\d+)(\d{3})/
) @+ ~, P9 `  ^; A* A7 _+ c  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
% [  m; ?8 C  S0 k! K4 J) o    }
  }
# J& J- ^. d3 J! X4 Y5 [  return props.prefix + x1 + x2 + props.suffix
}

! d4 V: R5 O% }1 D) R( i; D- y4 Q// 相当于vue2中的data中所定义的变量部分
* n0 ]: f+ c* H# D( p2 Z7 G" j3 ~: qconst state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
$ J% {4 c& I7 t, y" @  printVal: null,
  paused: false,
  localDuration: props.duration,
8 ~8 G/ P" ?- D" E4 p6 m. S  startTime: null,
  timestamp: null,
" h8 F) B0 j; P! H  remaining: null,
+ j  M0 ?" b( @, C. r4 O" b  rAF: null
})

5 ]1 z( T9 w8 L6 l) j, Q& J// 定义一个计算属性，当开始数字大于结束数字时返回true
, A9 j$ X! D/ \1 \8 A5 G' r- kconst stopCount = computed(() => {
0 Y5 m* ]9 d( o- J/ I; c: Y  return props.start > props.end
})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
1 `% r+ P& E. }const emits = defineEmits(['onMountedcallback', 'callback'])
. N/ w8 u( J0 R2 Y
1 I. M" N4 y/ d2 i3 [  c3 Wconst startCount = () => {
9 `: j. |$ Y% ~! n8 A  state.localStart = props.start
0 j* _' ^* Y# K- b" H  B  state.startTime = null
8 H6 b2 V* E3 K6 S+ ^( K+ ?/ p  ?  state.localDuration = props.duration
  state.paused = false
5 K; U( @& J4 q, j2 s  state.rAF = requestAnimationFrame(count)
2 Z: ^' G, {5 K9 `9 K. V}

watch(() => props.start, () => {
  if (props.autoPlay) {
1 l2 W) l8 \+ \! H$ n, r8 d9 }$ q    startCount()
* t0 h- I+ e& j) _7 X$ X  }
})

% c4 l+ \' o/ Dwatch(() => props.end, () => {
  if (props.autoPlay) {
    startCount()
% e9 x6 b2 _% b4 s, _  }
- C% _& d" O/ y6 \})
// dom挂在完成后执行一些操作
% G& x& d4 D4 xonMounted(() => {
3 E, W+ x6 ~" S; H) L  if (props.autoPlay) {
5 q. D) w) z! i    startCount()
5 J6 \% J6 \' a% G& n. b( l5 D; w  }
  emits('onMountedcallback')
8 h, U2 P$ u2 [+ t' W})
( ?& E7 h2 O/ ]& @+ c- l8 Q// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
}
// 恢复计数
const resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
$ z+ ^) K9 Y& }& n! }  state.localStart = +state.printVal
' ~1 b& |  L: s7 s6 d  requestAnimationFrame(count)
5 g. W  p9 }5 S. j! o: {- T}
. b/ w3 d. e3 u7 I- ]% z
const pauseResume = () => {
  if (state.paused) {
    resume()
0 Z: b' O' S! J! F' h    state.paused = false
  } else {
7 h7 o7 O+ I: G+ y) T; u, m    pause()
" q  O  a5 N5 \+ h/ R1 z1 ^# a    state.paused = true
  }
5 h* D  g* h. _}

8 G$ j% z% ?; a" O1 Mconst reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
1 w. W# P  f5 [" H# v1 \& @  state.displayValue = formatNumber(props.start)
5 p9 Z! a4 p1 `$ ^}

$ l- j3 k3 L: nconst count = (timestamp) => {
4 z/ t, @- d7 u) A: h  if (!state.startTime) state.startTime = timestamp
9 q$ ?8 T4 \3 u; T  state.timestamp = timestamp
- @) F3 C$ h( l. R+ y4 C  const progress = timestamp - state.startTime
% g/ `- ?5 K6 a) U. k* r0 @/ D1 u  state.remaining = state.localDuration - progress
2 D/ @: ?/ F+ r, Y: j  // 是否使用速度变化曲线
  if (props.useEasing) {
9 ~. {8 F: M: H) j0 ], U) X7 x    if (stopCount.value) {
& g9 H1 v7 ^! y6 H( t( l4 r5 B      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
0 Q3 R6 ]) Y, c" e% |    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
4 W$ w. l& E# ^% _$ O( L9 O  } else {
1 i4 C% L- `$ u  }0 x- j4 R    if (stopCount.value) {
" f$ ^, r- d( [9 B      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
4 t+ N2 W3 n& F& P    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
* D5 Y; ?: G) {( x' G: e  }
7 A- g: r. ^/ K  if (stopCount.value) {
8 ?& C9 a3 k2 e- H    state.printVal = state.printVal < props.end ? props.end : state.printVal
8 B: C" G8 y8 n8 @  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

$ {, |# l# t9 d  `  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
( a2 }5 K* J# f' t& l, D9 C    state.rAF = requestAnimationFrame(count)
4 U( j2 C8 N( A  } else {
/ }5 U5 J4 `6 T3 j# E1 a/ u    emits('callback')
* q9 ]. ~, y( d4 |: Z% Y  }
3 l) `+ J2 K( `6 Y; H7 Y" O}
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
6 R* B) a# x/ G9 q! D( i</script>

' n% }' r! I$ p* I( s) i% T  M1
8 Y9 i/ V. K" \2
3
4
- ~  n6 M8 G' n- V; Y- O5
6
7
8
9
" p. C( M8 X2 [, ^3 P10
11
12
, K) M; F6 E% O1 v13
* |$ F3 E! P/ F14
3 L7 R1 q' G# \: l) i- U15
16
17
18
! z0 Y, ]% y. `8 a) h+ f19
20
21
( R' ]5 k6 {: x3 D! d4 m22
23
/ v/ d" Y/ C# ^* Q5 ~1 m24
25
26
, {+ J5 p7 r  W+ s6 H. h27
28
$ f" k/ Z# H1 \8 v4 q) `4 K29
30
8 z/ S4 y6 Y6 ^; f31
7 E+ @& d" P, v- K0 S* P; U+ m6 X32
( N2 S" M3 ^+ o( A33
34
- S$ {" w7 M0 r4 S35
4 @9 O+ L2 ?+ x0 z6 h# C36
5 j6 c( @# V4 ~7 H4 R$ V/ l37
( ]+ e6 c. g9 |3 |, T& n  L38
39
40
41
/ v& n; t0 s5 r# Z0 w6 F, _. M42
43
44
45
46
0 J3 w7 t( V; V. r* I47
( x; _- }9 D3 [5 N4 y% h48
. H0 W) `5 v  q49
1 ?, S+ ]9 m" j" e& I50
51
52
' Y: g# `. n7 q* h* G* Q- G53
54
55
56
57
58
59
% p* u. j2 k* b! m1 z* u. p: F60
  ], K! S/ h2 p, z61
62
63
64
65
: @: v- d5 J! B5 T66
8 O# }" s! T7 B* _67
68
! i9 l( c9 C( o. T+ J8 J1 B: c69
70
71
% H6 f% b9 Z8 C8 F. V! b72
73
74
8 k( _9 }( O# j) ^75
# {2 Q$ a  Q6 Z76
* [1 d' D" }, w* }77
78
79
3 T9 h3 f1 i; s9 f) H80
81
3 S2 v6 X' g& U. k5 C" `. I82
7 ]: a. U( S/ }6 L8 o% n$ y# }83
8 J0 m. f6 m6 p# W4 D+ Z4 }84
85
: G  h9 A5 B6 v5 D+ ]- ^/ F( P  o86
3 ]) z9 p/ R1 K; ?4 p87
88
" W+ ?) P- l. K1 a# X) j! I89
90
, A0 L! l9 G) y# c1 e3 ~8 q91
92
5 ?, c# u) p# k& h93
) j2 d* W4 }* j- T2 {+ E+ F94
95
96
97
& `5 W$ H/ j% z- K  ]) c& x98
99
100
101
4 [+ ^) v! J! N( K) ]& s102
103
104
5 O0 b. P2 F! ~( e. Y7 |105
106
5 Q8 E2 Z& ?9 Q1 }107
* N% |: j4 V% h( X108
109
110
& b( n7 Z# M+ P& v% s7 a0 ~111
112
113
! C& ^) z* U( ^3 j114
115
4 s+ d( f! {' b# `' ]0 W  S9 ^( S116
117
/ y& u5 ^- b7 G' ~3 A" F- {118
119
120
, G2 `: ]. b5 |121
122
9 K$ V8 |3 N/ M6 g6 A123
124
125
  X  _* P6 O: \  k% x0 M" w126
127
128
129
130
131
) T% w: ^) e2 W; K6 @, E, H( [8 E132
. y: I2 V9 Q4 ~. ]" a6 t133
. x8 }9 D# u6 D! {- V0 s3 t134
& i# g! d3 j; C  M- ^7 G9 V135
3 f. z% F/ o# Y  @+ C8 G136
9 m$ F2 U7 U+ `3 n137
0 H$ n6 }$ t0 j3 n3 v2 w138
  l) Q0 L4 Q. K' s139
1 Z7 l/ u# X- d  l  H0 U140
; }9 A2 _$ R7 F, I141
0 n+ m  l8 y; v. h0 i142
143
144
145
; _0 o: o% M  Q2 N. R% [4 j7 D146
147
148
; N( f6 {4 o' o; c$ g5 J$ c149
# i: F- ?9 B0 M150
151
5 W/ k6 `+ U7 U, ]& Y$ x152
153
154
5 j. I4 O, G% ^7 y" D2 v7 z0 D: ^: L155
156
157
158
159
" {' c' h  {" f4 C; L6 o) k160
9 C% [' d/ f- U7 A$ ]9 m161
162
  }6 V# q5 @) v, p163
164
165
5 e. ~2 m  `5 }9 I+ ?% n* Q2 ~166
167
168
; j: s  n7 Q! N169
  Q( H! P  r: n1 g7 L2 M170
3 v( k, u6 Q' W* g" s171
172
173
) n% D1 h6 g) H: ?* f+ @' ~7 \6 a174
, D0 ^0 t6 r7 a3 s% L175
176
$ j2 C+ P  f: {5 G177
1 r5 I+ A1 [# W4 k6 d% x178
- u+ y3 e$ h' N; k2 n, K) q2 p179
6 r/ q2 X' r) r" z! `% P" q180
/ t" A3 X5 }0 N0 \" I9 D181
$ V: X: ~0 J. a6 D* ^( J* C, U7 ^182
183
9 d& P% o* P, V( K+ d3 S, E( h184
& M% ]. h! d$ _) I185
3 ]1 j. Y% x! L# q186
187
188
% I0 @, u  B5 t4 i3 i189
' k- s# q* W9 j0 a190
191
- e7 t! b, F$ i9 d/ E2 s192
193
194
3 K5 G( d* q; f* v5 x; I# Z* G& K195
196
197
9 h; f$ o4 l1 I6 d/ t  J198
199
200
+ B8 `% g3 p1 o# ^* i: p# N201
202
总结
$ e! Q/ K& V$ B' p% B自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
7 W$ V8 d! E3 J/ E# ?5 w& l/ b* _( M$ d, t
demo演示
, S1 S4 q" m5 U+ n# ]/ R后续的线上demo演示会放在
4 F1 {3 B' r9 a5 `  C! Sdemo演示
完整代码会放在
个人主页

9 C3 X' R* X" k6 y( Z" F( M希望对vue开发者有所帮助~

个人简介：承吾
( O) C/ _% D1 D: x1 g5 G9 D工作年限：5年前端
& K4 w2 h- d: L) `% D' t地区：上海
3 A  z; D7 }- ], s个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！

! d5 j  k5 s8 O$ _" @
+ q' j4 e  C; I  E# d4 _$ ^3 ~

/ U8 m0 j% ^: R6 q0 u————————————————
' `6 f' [6 N) z! L* _8 x版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
% f) [( c1 S. R原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
% x& O9 t, n4 n$ ~
" V8 h6 Q. n% U0 U% J( @