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

杨利霞

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

前言
( ?; Q7 D3 _( Y+ F1 D9 b0 ivue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
! s2 _2 |. B' Y+ Q5 A  m3 pTypeError: Cannot read properties of undefined (reading '_c')
, [+ z8 y0 I- F的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


$ U$ M5 Z) z, f' t2 }思路
7 V) N0 V! W# ^; f( W% Z使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

文件目录

% x" O9 R8 D4 ~, h" a
: K* L" f$ O0 `$ i# s, _/ [- L. S# E使用示例
6 G, G- ^* W6 u- ]- U: q* W: d<CountTo
:start="0" // 从数字多少开始
. }) J" T$ }+ M2 V/ {$ G7 \ :end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
2 Q* b4 _9 |) H1
. {; e: K2 N: g1 C5 s+ q! Q4 `5 ]2
3
4
5
6
/ f9 U: ^, C+ T7
8
; Z3 h8 r* P$ i/ C# H* Q( \' Y入口文件index.js
" j0 O. \& L; |5 T/ N, w" {5 Q
const UILib = {
" E3 T1 K9 W3 y  install(Vue) {
5 S" \* G5 ^4 z9 E4 ]& i) ^    Vue.component('CountTo', CountTo)
  }
8 j4 L4 S& {9 x3 g* q+ X}
% M+ \  g/ [8 V8 w) A8 |
export default UILib
5 m$ H2 g8 v9 E3 \; x
1
$ H! q0 P0 r" K' A+ y2
) J  A0 B6 ]  Z: J8 [3 M* G3
4
% f3 B: h5 Y1 [  F9 C3 ^5
& v9 g2 `& S& k, f7 C6
7
8
; @% q7 d% |2 D) u4 c5 o9
+ f5 C) F% k) N, [* e. v2 G, smain.js使用
import CountTo from './components/count-to/index';
8 {- W$ e8 X2 T& o# `2 Xapp.use(CountTo)
: K7 D2 `9 l$ h# _5 h8 K% `1
0 t7 r8 K$ x; S1 d6 T% r2
requestAnimationFrame.js思路
) X$ t- ~" ~  W( f% e6 u4 u先判断是不是浏览器还是其他环境
0 ]5 o9 [2 ]0 Q/ B" L2 }6 F如果是浏览器判断浏览器内核类型
" B" o/ D! J+ `$ ~$ H如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
! o0 q! n$ h8 ?- H, }' x- U* l增加各个浏览器前缀：  
- n9 C! N# P9 ^+ A( Slet prefix;
let requestAnimationFrame;
. R0 }3 r- T- F: Blet cancelAnimationFrame;
2 i; I4 L" W" F) \+ J4 d  O// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
/ U5 Q+ l9 i$ C/ M        if (requestAnimationFrame && cancelAnimationFrame) { break }
. P* B3 [/ L# G7 d        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
6 }4 `* d4 ^& A( m  p        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
8 \9 R% |; c8 j* [0 o    if (!requestAnimationFrame || !cancelAnimationFrame) {
/ Q: j& y1 S5 E5 b6 ^7 d0 E6 m2 R0 Y: a        requestAnimationFrame = function (callback) {
* \4 U2 \% c; F2 p+ F6 A            const currTime = new Date().getTime()
  o! w: S) E6 x: J" B            // 为了使setTimteout的尽可能的接近每秒60帧的效果
! f( w3 |( @3 [/ w2 E            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
: h* i. M  H* `9 _2 N            const id = window.setTimeout(() => {
: ?4 V* g0 c( k% w8 R7 B                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
        }

. d$ I9 L+ s; g4 u' {/ l        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
4 i! C9 P3 p0 W; I; f9 v/ O    }

) g& L8 d- r& b3 f+ `' o. L. I1
2
3
4
5
6
7
8
9
$ ?9 k, N# f& ]8 u& e6 D10
11
9 C; b. y0 R2 @+ j$ c4 H. @12
13
( H; ^2 `+ p1 I- y# G" S4 l14
: T1 K- S% s9 b' L15
16
  \" X. T7 J- T# E17
# n: Q) Y- L  P6 B; `$ L: J8 J8 j18
19
$ i, t% B! ?& F" h) n& W! V2 w# i20
21
22
2 M) P0 x* y. l! m  a" r7 z23
24
25
  x" m( u" V, J9 x( p26
# O6 ~1 X" M! j& H8 ~% {7 ^' `27
28
1 U: `# r) _6 _# K29
9 W" j  T1 m; Y0 j8 r8 Q5 s30
31
: p: m0 t7 W! f$ K- {$ q; S0 L32
6 R/ ]3 b9 K5 Z8 `( U, x完整代码：
requestAnimationFrame.js

let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
) o( `/ r2 m7 `1 c: [( I
let requestAnimationFrame
let cancelAnimationFrame
! {2 {# |8 m/ `) Y
// 判断是否是服务器环境
% p- v- |. Y3 X* V: ^* Yconst isServer = typeof window === 'undefined'
, ?- U* E; Y# D  _7 o  u4 xif (isServer) {
    requestAnimationFrame = function () {
        return
# w5 z' ]* t. a4 D2 q, a    }
    cancelAnimationFrame = function () {
* p  `0 [' J  w        return
    }
  E8 ]# _0 r& E; O0 ]! p} else {
% G& Q8 B8 m; D7 s3 a) p6 G  E    requestAnimationFrame = window.requestAnimationFrame
( r' Y6 ^/ ^5 q$ F; }% K    cancelAnimationFrame = window.cancelAnimationFrame
% p8 j3 t2 p3 t  L    let prefix
5 U/ }0 s4 W/ r6 k  P! g* g    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
0 ]& N) f( c7 q" Z- _+ e    for (let i = 0; i < prefixes.length; i++) {
6 e% P% g% l5 `9 A, A        if (requestAnimationFrame && cancelAnimationFrame) { break }
& p2 X2 y3 _6 V; S        prefix = prefixes
+ h: I. k9 C! y7 d" [  Y6 [        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
; u. [) b. K2 o& Q        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
4 {2 f, c4 \1 e9 N% G4 q    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
& d, s/ t1 ]9 L        requestAnimationFrame = function (callback) {
+ l+ D& O) p9 N6 P) H            const currTime = new Date().getTime()
+ r9 M" [7 B: G! [! \            // 为了使setTimteout的尽可能的接近每秒60帧的效果
6 A6 L; A/ C, X* z* b            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
1 I3 I8 M% v0 m                callback(currTime + timeToCall)
  S9 y  |0 C/ O) Y: j            }, timeToCall)
            lastTime = currTime + timeToCall
2 ~1 q0 ?0 H& D4 O/ t            return id
        }

' y# C. r" p) d  ~$ I        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
5 \( x. T8 c1 ~        }
    }
}

+ b+ e2 j3 c' T! T& pexport { requestAnimationFrame, cancelAnimationFrame }

' u4 A8 Y* c+ I" @3 C6 [8 v
; R6 r  Z* X( z% J9 u. m0 p' x1
4 Z1 M9 o' [5 ~0 c  U# V: w2
3
, x  v9 y; u# y/ W9 S* h4
5
6
7
8
9
3 M4 Z' a; u  T2 \2 C10
) W, N/ [  Q* a" u11
12
: e" w& ]0 s/ J! F8 m1 B  ~* @13
4 Q- d) E+ ?+ B' a" a14
15
  j5 L# I  A4 B' `) I3 V1 T16
17
# Y0 W( Y; d% j' G18
19
; Z; C8 J* [( s) Z20
7 L, s1 k, O+ S$ z% b4 [( t( b21
; i' o5 i( s2 Y! ^; C3 u2 _22
23
24
25
" t( E( m# h  N7 S7 T* \# {/ b26
27
28
29
3 F+ {# ]+ k+ P/ Y30
31
32
33
* Q# j) H1 s! m0 ^0 _% q( P34
1 q( I6 s. T2 _2 ^/ H( Y$ E4 d. L35
; N& E: W/ M0 f2 b. T2 U6 Y36
, r* W! @. i' H37
38
2 z4 r9 v# N8 `8 Y0 t* V! \39
" K" E9 @, z4 Q$ P1 l40
41
42
8 c% q' [. ]. V) K  z43
44
) v* g. p/ {7 u( v9 Q/ e45
- p) c! D$ e8 d+ v" {, x* k# h46
8 N4 h. I( f3 D5 w! ^# q# R, O! V" M3 t47
; z7 S5 A# }0 i& S) A9 {48
2 ?0 }2 S- o- m! GCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
1 m' ]; R2 P0 Z
8 Y# `8 d: R& ^+ u引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
需要接受的参数：
' S; c7 z2 U9 r% g4 T& [2 V0 c
2 `* G  F- W3 f( P% L4 F4 ?const props = defineProps({
& C+ _5 J4 ?  `' \* i" [8 T  start: {
    type: Number,
# D+ q8 J  [* z( M    required: false,
: H- f6 ~) W- N7 h, A    default: 0
2 M4 ^( p2 r9 o  },
  end: {
: [' P, [/ Q* ~    type: Number,
    required: false,
    default: 0
  },
  duration: {
    type: Number,
    required: false,
1 v! {  k& I9 C+ ~" c# ]    default: 5000
  },
+ t2 P; s  }) Z- o  autoPlay: {
    type: Boolean,
1 ]+ ]: }. E7 j! q, F) W    required: false,
    default: true
, v! P; [: Z: {5 E7 `  },
8 u* w8 M2 [( D9 N( T" q  decimals: {
    type: Number,
$ M) S/ B% b/ \# S- K! `+ Z% r4 ?; |    required: false,
    default: 0,
1 |3 J' P' x* ~    validator (value) {
      return value >= 0
4 K! O1 c( r6 P) m+ M$ }    }
" ~0 ?4 }- u9 d1 ?6 _+ V$ D8 S: ^  },
) f( }3 F! u. z  O6 k  decimal: {
/ z; R- A9 e8 |$ _3 h7 K    type: String,
" z( ?' W$ O0 Q9 ?    required: false,
. @; ]* ]" J  V( n+ G) T6 a    default: '.'
  },
( q. g; u$ k) _. o: ~7 Q  separator: {
# U3 ?$ z# W% O2 d    type: String,
; T- \: Z$ U' I, f# Z" z/ d    required: false,
    default: ','
  },
  prefix: {
    type: String,
    required: false,
    default: ''
  },
" l( _; }/ P4 l( T$ i  suffix: {
9 b5 @/ }' Y% C    type: String,
% t# q' ^- {0 O0 k. z    required: false,
7 A$ R* L8 Q0 T* p% j% ^    default: ''
1 q5 j5 A' j# ?  },
  useEasing: {
    type: Boolean,
0 d- c# g: d" `' b! Q    required: false,
    default: true
$ ~4 A$ x; E* E$ L  },
1 l2 Q; |( X2 g0 k% D/ x  easingFn: {
' ?# m  H6 F! ?9 b1 F! W2 _& ]    type: Function,
5 E* F# Z0 ]5 y    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
" n+ H  g) v$ U6 G& \  }
})
7 c1 _( w" L3 U5 u' l4 V

1
3 S! @- }6 i; W. {7 g2
" `+ }0 ]8 I) `# Q3
4
' B; M% o$ {1 @) i1 W6 k5
6
7
8
9
) m* u& Y8 o! M8 G2 _10
" {% m4 F! y6 m) ]2 w+ d11
$ ]3 Q' H6 G" \( X& }7 G9 `% X12
0 W4 f- k( O7 S* H2 Q13
( S+ U$ o* V4 }# C; @" R  T4 g" @6 G14
( n2 u4 Y" @  F( u. q+ u, ]; h5 @15
$ `; y1 d1 K7 P16
; c9 V2 e% }* `, @* x1 c; @17
, ]- [' F& Q0 u0 S18
1 k3 j5 K6 c& C1 n: B8 L9 m19
20
5 _! h; w1 X9 S( d1 S. H3 J21
" R) \  e" v: s4 \22
; Z% G7 L5 }& G* {, v3 q23
$ g. Q( j3 N: P1 W+ U" V! |24
( Q+ i3 M- z6 y0 x25
, O' c" s8 M  `- d; z26
6 F3 ~0 x  ], n5 k7 z. F* X( ]27
% ?5 G& M% r3 k+ O28
! S: }  c* N8 ?0 f2 J29
30
31
6 o& i" U- `: W9 l: V) l32
" r5 V( i3 I& v- W9 I33
! A# _* a4 v+ f7 s4 ]8 U" c34
35
6 R) V; y( |, z36
37
38
39
40
41
42
1 v9 T2 d0 X9 ?43
% i1 |; d7 [( z9 Q44
7 ^5 `" `7 H' Q  E7 T45
46
47
48
+ h9 A+ K$ \4 D$ q* M' ^. r49
* D( Y+ f7 P0 N9 P) {+ h6 h- X50
51
8 _) D. ]% n8 O  z6 k52
53
" t! j' }; z3 C) o54
" J4 Z/ p' x+ A+ E' C1 n) W* Q55
56
57
58
7 H6 |$ r& C% U. R4 Y, r. d7 H/ ^59
( t8 }' U6 E# Y& v( ^: x4 `( _) A: ^60
6 o- _- F4 L+ t0 k3 Y2 P) K61
62
启动数字动效
7 B5 t5 p9 w% U. S
9 c" ?0 X: h# ?# X2 `" Econst startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
0 x/ g( a2 C6 Z4 a- ^7 x+ W0 \}
, V. t' q+ s5 D! J; f$ w1
2
3
4
5
6
7
& K+ i7 E6 u; n9 M6 C4 h! B% C核心函数，对数字进行转动
) u! U. h& o' c% X
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
- Z3 k+ \- J4 R2 H- p0 J) N  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
1 ^- R+ U( G9 p* _/ V* }" ~. N8 S  if (props.useEasing) {
" `; ?# d' B; c% u, s    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)
, B& m4 q. ?/ B* X    }
* n! ^0 p* k% q9 @* g  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
0 r7 i! R' E$ L. f, U, `    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
4 ~: v" ?& s% |  }
6 s7 {, O# K  ?  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
4 U( `$ s, f3 ^$ ~0 i. r  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
& ?: ?2 d! }+ t1 g  V1 [9 b
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
- p6 p& a) y/ n  } else {
! b) R/ i7 ^; }. ^    emits('callback')
# v/ H5 u6 e0 A  }
% r: q1 S  ?5 }}
# }) ]1 p0 z) \; K) S4 I( E
8 @9 g- k- s6 r! W* V
// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
- [' C9 O' n. g& {# }7 M  c  val = val.toFixed(props.default)
- t1 {* h$ D+ v6 B1 L6 l  val += ''
  const x = val.split('.')
  let x1 = x[0]
& P" ~: T4 e4 X; g( r  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
# }4 ^: L% ~9 C) r& p7 y$ J% o  if (props.separator && !isNumber(props.separator)) {
" ^! O( A. P0 E+ l6 [6 B    while (rgx.test(x1)) {
6 z% ?% @% S, U4 J9 m! _2 q      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
  return props.prefix + x1 + x2 + props.suffix
}

1
2
, z$ f; N7 T2 P1 R3
* n2 E  x( X* g( ~  K4
' U. u+ t' K" @+ q3 u+ K7 e. A) v5
9 @. y- {* _. ]6 s1 Z  \6
7
8
9
10
6 X" o% ?- R/ d4 b/ a  B) b11
12
- V2 o! e% b1 h9 N6 D13
7 ^2 f; W  M8 h: ]# S- e14
15
3 a5 F% d5 x! R$ i9 ^16
17
# n% M7 Y, H- |, ?7 L0 b! m# z18
19
20
' N* j7 M3 [% n21
  R: v# j5 x8 Y( F3 O" g; i$ d6 v22
2 J4 z' {) w5 u' e* r) D23
  h" n' v8 i* `$ u% l* W24
25
26
( ?6 K6 ?7 C' [1 q& `2 @, o27
28
29
  ?, ]2 q( Q7 `8 w+ z/ q/ `30
31
  a- C3 n3 Y; x6 w9 ?32
7 _2 b1 S- ]/ }9 _" T33
34
( d9 a& a% R) c. c/ F/ V35
36
37
38
39
* I& s$ r! m! M* L* e4 o! H40
' \' n" f% q: ]* N41
42
2 B: Z4 ^, y( q9 n4 Q43
44
45
7 d; F9 \. P" k46
+ N* c! ~& Y0 P; M* Y: B/ }6 a. q47
48
4 {! J: ~- O$ b* O取消动效

// 组件销毁时取消动画
, y' w( P; q/ p9 d# @+ }onUnmounted(() => {
7 S% p# q; T1 g( u) M4 [5 b# Q- c  cancelAnimationFrame(state.rAF)
; P. [4 X; b1 V" Y. e})
1
2
& v) ?8 I3 R* ^9 j( ?3
4
完整代码

<template>
  {{ state.displayValue }}
0 ?* Z3 ^; r3 g' S</template>

' A8 V, U3 {+ {: y  g- m$ u<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
3 ~* m, |' p, l7 l. `2 Ximport { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
- I; r& F* x, n% S// 定义父组件传递的参数
& R: ?' b, J* f1 aconst props = defineProps({
  start: {
2 D) g! R" p) ^) ~7 y/ ]    type: Number,
$ j/ \+ P& f$ c3 l9 X# }8 I6 P    required: false,
& j+ [' o% K/ e: ?$ Z) R    default: 0
  },
: ~  ]# f$ y- V4 i8 p- A+ e  end: {
& C6 F  \) X# v  S    type: Number,
    required: false,
    default: 0
3 a" H8 k  f5 l0 [  },
5 a6 p2 l) X7 {+ i  u) S. \1 ]  duration: {
    type: Number,
    required: false,
, y1 H# L' F% p# v+ h    default: 5000
! J7 g( v$ p) ]4 r# y7 ]! x% J  },
# z+ _4 M' M/ t' n# c% E0 G  autoPlay: {
    type: Boolean,
    required: false,
$ p+ n  M6 A0 O' L; y0 n; ?    default: true
  },
! X8 J  F5 F! R0 A: @  decimals: {
    type: Number,
    required: false,
/ p3 z/ K4 q! `7 N& b  |+ ]    default: 0,
    validator (value) {
+ {& F- u4 d$ V      return value >= 0
    }
$ N) ]- e# b/ ]4 _9 }  s  },
  decimal: {
2 f/ _7 P2 ]% h4 x% ~1 x/ \: \    type: String,
* R5 k7 n+ N% E* O# W% e! Z    required: false,
* l% Y& o9 L3 n4 L  k    default: '.'
1 @% n) Q4 t6 M/ n/ ]$ }/ V0 r1 a  },
3 @& U) E( b& O  separator: {
    type: String,
; j" X' o4 [' k: e+ i    required: false,
1 [5 N0 j, W1 F# k0 t* Y    default: ','
8 V: w  N3 c, z* M  },
  prefix: {
, N# i5 K8 _4 t7 H0 n    type: String,
0 w3 i3 ~. c: r$ |, u    required: false,
    default: ''
- i9 E! R3 f; |$ h  },
  suffix: {
    type: String,
    required: false,
    default: ''
  },
  useEasing: {
    type: Boolean,
) }( Z$ }) o$ |7 t+ x6 P    required: false,
    default: true
; o, e+ O, f. L  },
  easingFn: {
, g+ x+ t/ U" f% r% C% \+ u    type: Function,
( A: x: m/ k& C    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
4 ?5 y3 n4 D8 z9 I6 t+ w1 r$ b- u    }
9 q2 N" |2 Q' r: h+ j( _' f  }
. q" m0 G( v# q. I+ _& U})

const isNumber = (val) => {
  return !isNaN(parseFloat(val))
}

+ _6 C; X" j' C4 k) g// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
0 g% i% G5 W" L" K3 V  val += ''
  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
, Y7 f# k" C& r# M! u( U$ g" |  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
2 y! p2 p* \( E: o. B      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
, ~5 x# s1 O% Z: i, r' w5 q4 x2 V    }
7 `: s6 o0 A4 H+ s1 w0 z. y. f  }
  return props.prefix + x1 + x2 + props.suffix
5 r% h9 x9 @+ j}
% z" {1 [1 w! p* K; @
- C; \4 w; z6 H9 @6 h// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
1 A& B$ o1 l3 x9 Q9 b  f  J  printVal: null,
" w- ]6 b+ K: O! R- Z- e  paused: false,
  localDuration: props.duration,
  startTime: null,
. i) e5 Z3 g. G# W/ U; Y  timestamp: null,
  remaining: null,
8 u/ E/ ?  C. R* v  rAF: null
2 h7 q- j' Z6 q9 e" W; F$ m2 C/ q})

// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
9 n6 B: g2 ^. G( p% B})
, U+ m7 V% b* ?/ H: Q9 d// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
6 q; Y3 A' k& }2 ]+ F$ nconst emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
) k# m8 |* D& s1 Y! |  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
+ U4 x( V4 F" ]6 l# S! V  state.paused = false
& ?# P1 V8 V$ l, i7 L% X1 X) [# y0 ~  state.rAF = requestAnimationFrame(count)
}
3 r5 J. [: n+ ~
, l' x% k  E# G3 l( B4 @7 Ywatch(() => props.start, () => {
. I! k+ I7 s6 H' e) C1 s+ Y  if (props.autoPlay) {
    startCount()
  }
})

! ~) F3 K9 J1 owatch(() => props.end, () => {
  if (props.autoPlay) {
    startCount()
  }
( b+ o1 R0 G) d6 G  F" y' p1 [})
// dom挂在完成后执行一些操作
! V1 @5 E2 q% |+ w, FonMounted(() => {
  if (props.autoPlay) {
1 v2 Q& i; b# V; z1 ~    startCount()
  }
9 x; i; |1 N) y  b8 x  emits('onMountedcallback')
})
// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
}
8 D! D( q3 x- l// 恢复计数
const resume = () => {
  state.startTime = null
8 v0 \" `5 ~$ ~, }' ]  state.localDuration = +state.remaining
+ f  Y$ Q( g3 ~  state.localStart = +state.printVal
  requestAnimationFrame(count)
( z$ a- Y" `: U}
# r- U7 d; w& w6 H2 E" U5 O
2 }2 p4 G3 [% s. W, J& aconst pauseResume = () => {
  if (state.paused) {
4 C- f* O; l+ T8 B    resume()
: F0 e" x1 M( {6 r" u. s# p    state.paused = false
4 r0 F* e. l  q' ?, t: e+ i  } else {
$ A5 T3 @$ y9 E. M    pause()
7 ]; a) S2 p7 J  e    state.paused = true
7 T1 J: F. V6 E1 m/ p  }
}
3 @+ ?( p% s6 R2 Y% i
6 c4 t) |+ O+ l3 rconst reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
1 c# h6 d! E. m" T6 x  state.displayValue = formatNumber(props.start)
, C3 {+ C% X& \" E" \}
+ x+ s" ]# z9 v
const count = (timestamp) => {
8 L1 A  ^. G+ Q3 ]) k  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
6 Q4 _5 Z, N/ ]" N* o( Z  const progress = timestamp - state.startTime
3 {/ m" }1 V0 z6 q2 d# v+ s  state.remaining = state.localDuration - progress
! \6 P- t2 B9 f" i* D  // 是否使用速度变化曲线
  if (props.useEasing) {
! ~0 R; `; O  F$ i/ h# v2 l% d    if (stopCount.value) {
' ?% Q& E9 }6 s! x. _1 y4 b1 B' Q) o6 T      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
' t; t: a' E) O+ w$ J/ v  a      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
$ I4 ~# z6 ?! i( J    }
3 n: t  I+ ~& l9 W5 i  } else {
    if (stopCount.value) {
1 e' \8 _, \, A; b; X' N6 ^      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
; k( K7 Z6 a" c8 H( u* @    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
( n9 q8 e9 v: V  }
  if (stopCount.value) {
5 l8 N+ F; w) ~5 \% O    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
7 |. {* q% T. q$ G% k# A    state.printVal = state.printVal > props.end ? props.end : state.printVal
, u% B+ _: K- _" h  }
+ Z9 }- V  A: t+ P) L1 W& s
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
! w5 |, ]: F% d    state.rAF = requestAnimationFrame(count)
  } else {
0 ~: J( |- W: q' O  _/ H0 t& ~" Z4 {    emits('callback')
: y0 ]5 W$ c5 h0 W2 \  }
* [: L9 }% U" Y9 M6 Z}
// 组件销毁时取消动画
& \7 S0 N, }& S& u' d' RonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
1 v4 |* c; A; J% a1 Z% j})
</script>
( q; n) G; L3 ~4 Y, [, {: b
; i+ j2 ]* z* o1 V1
9 c( W4 V! R1 A1 b3 l2 k$ I2
3
4
. [: V' \0 Z2 f5
8 J6 ~3 z& [7 t6
7
8
9
10
11
12
4 b6 J6 o4 T8 G' N8 C# Y7 c! ]13
14
: s+ s) B+ m9 S  w* D' l. k) L" j4 \15
16
" z2 j  v0 D% C+ R17
! m) V/ P2 G' U. M# K) i18
! R, G2 P' x; _19
' l5 N2 z4 |7 G5 x/ \# ~20
1 _# e8 @2 g* J$ H/ Q0 ~/ |21
22
23
24
25
: M! H% Q. I1 l' _2 x  k26
7 h2 `: V3 z; t. O8 H: Y27
28
/ o4 S- K2 b- Q* q& q+ O  o0 h* F29
30
! ?3 Y5 @  W7 E$ W7 w  P1 k31
9 z5 B' _, a  v8 v3 V- g* t) w32
33
34
0 y& v4 h  m9 n- u# i- P! v( ^35
36
37
38
, g/ b5 M, t& M' Z7 Q. \2 e3 q0 a39
40
41
42
1 x$ Q  _; i/ l0 i( Q43
44
45
2 q$ O. X# v: w! e& T46
! ^- S% ^' a: o, c. w47
7 _6 Q$ l  |# b7 L48
$ M+ `  D! ~/ s! j. r49
50
51
: t- M+ P1 \) Y$ f& j/ F% k52
53
5 R! r, j* b4 T6 Z- r54
55
56
. I8 U0 s% m! P57
6 T( I2 p; C& R" f: c: v( T: Q58
0 k( o$ {4 }5 k  R4 {59
! S1 R. v/ B6 R+ J* u: ^  f60
61
- R9 w$ [2 I8 u0 u6 s# [. A8 P62
63
64
. ~% T; v+ T; _& ]5 {( P4 t65
+ U$ V8 @1 b4 C' h66
% F8 t: v3 e% ?' T1 i67
68
* w) H4 I+ _4 {( R) o' d69
70
" n& K, ]- v: }: I0 _71
72
2 z  G! h8 i" l73
8 o; P/ f, a1 O4 Q; ?8 Y4 E1 @8 f74
. Y7 E9 f0 q6 g75
76
- T% G7 D; e! ^: b77
78
79
: ~' p2 x0 d: v: I/ b80
5 s" V0 @3 t+ F4 Z! V' ?! t5 x# X' m81
82
83
/ Z1 s9 s1 f6 }+ j; l$ `- G84
85
86
  l: b" T( v9 {  j87
2 g0 n4 O$ x# Y$ n88
: Q2 m$ d/ Z% ^! z( S' H) G: `' h89
6 @5 z0 k/ t: e+ L" _- J4 N0 d" i7 Q90
91
" t: I, f8 [& S$ W+ H9 w; M9 ~( r92
# U- S7 U" Q! V7 j7 ?93
94
' H; I+ O$ d- v' C6 D95
96
& D1 D0 n% @- ?+ K7 o" V# U4 x97
: t* \9 c! O9 k1 W; Y98
99
100
$ o1 l& O" Y0 Z+ R. ^% x101
102
4 F' C8 x5 j8 ~$ A; {103
0 @# c5 e# I7 I- t$ K( f$ S104
105
" @1 O, w* o3 k/ P7 B  R106
107
108
4 D, c* s) Q3 j3 U109
4 _4 K6 V8 F- i0 w. B; S110
- B7 t& m( g1 D9 S4 y% D111
1 e; u0 _; k7 P, \: v' L112
0 l, T1 d/ Y9 t& y% \. M113
114
/ f$ s) y) p& H" f9 _115
6 G+ D& [3 x6 M- x% A116
117
118
119
120
; V) E, l% [/ x9 F, f121
. E5 M/ X( o4 O/ v122
123
9 q6 L# J) Q* K124
  z( P: a1 u- p  ]. Y125
) x& V* [& q$ ?$ L126
127
0 ~% X" ]& k# H* e1 m- v: P128
129
130
131
132
133
134
135
136
137
1 C, J9 k( H  }- `5 N138
139
140
( _) G0 |3 B+ T( R) ^! q! k/ S' N141
142
3 }, |( l% I' ]+ ?143
% A$ ^. r+ P$ |144
7 Q) T4 `+ X$ ]2 W* S145
0 P$ Z4 C! S  w" v146
147
0 j. s0 T' L- b2 F1 b4 d8 }3 s148
2 [3 ^+ h/ o! ^149
: Y! T. g4 N/ @150
. K; {& P4 E9 a- c: O! D151
152
153
154
, x' n) M* f& q) t$ H/ y. f  j155
/ v; I6 Z6 ~# s: S, J# c0 d156
) Y, E( H" S. U4 Q3 @157
- e- X, J2 H5 }+ ?$ l158
159
160
) O8 n2 F' c6 y7 c161
# v/ I( g6 A, ?8 L8 Z0 O, W162
4 y9 G1 a. p% o/ e0 B7 z163
$ r% h% w" u# F) d) g164
165
166
167
168
169
3 o" k& F4 V- R- Z1 B170
6 {$ n% H: Y) `1 a9 T( w4 s171
172
) v8 D2 P5 i; v! L* a9 T. i173
2 @2 Q4 [8 u+ m2 m* L% v174
$ R6 ^: D* r6 h9 ?$ H/ m. G: F175
176
177
$ a5 w. ?0 M6 \& E1 N178
& i  b) \/ r) n) G* B7 G) }179
' X4 k0 z5 w+ Z0 q9 Q5 ?180
; a, i. q3 i' q& R181
182
183
184
* ~$ g. {0 H9 F8 B185
5 ?+ n8 o- a" Z% Q6 f186
187
0 C. R' _0 i/ n' j  m188
, E/ p' S$ T1 S7 H( ^& L" ^9 E; `9 M189
190
9 h% |# ]. o/ h0 V: N3 e3 W. Q191
192
193
1 q) [5 [( J; [194
0 ~* ?. o! k5 J# B/ v7 S. C% K" `. p195
: U6 E: p& s+ P1 L6 M+ L7 S9 a196
0 x) s; `/ h0 M7 S* j, Y0 V$ p197
, ^1 |3 q- `4 v8 t: R198
199
6 S: U2 X6 R( W: V200
7 k( S6 n0 {2 b# k4 K  q201
202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

- G+ u% J& ^3 d4 M+ u$ Fdemo演示
: p7 h8 W* D- ?6 l后续的线上demo演示会放在
demo演示
3 P$ `6 L( ^% I$ }+ g完整代码会放在
个人主页

) d( O7 ^) _3 j% s+ n$ e希望对vue开发者有所帮助~
6 ?! _, w' r! m
6 }* S+ ?% W  E" l& `& G: V个人简介：承吾
+ I+ _1 X0 c8 S+ n; A工作年限：5年前端
地区：上海
; R$ [2 [6 F0 w& j5 i# z个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
, ^; }$ s7 {- p5 N
$ I" e1 Q+ ^& ]: x; x: L* P/ o& a

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