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

杨利霞

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

前言
/ `) E, M' c% Y. M. b+ pvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
5 I7 i+ R: j% }' \+ m

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

8 ^, I& n( C5 E4 V5 f文件目录


使用示例
5 X# A8 g( k+ l  M4 J<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
! i+ g; l) H% J3 f  H) q :autoPlay="true" // 自动播放
" m! r9 S- I5 V2 {7 p  | :duration="3000" // 过渡时间
; ^- A/ l5 Y* w8 O6 P prefix="￥"   // 前缀符号
6 J* t9 s7 P) s* K6 g6 C suffix="rmb" // 后缀符号
# `& V1 }& X; ]+ ^6 J# b' t0 n />
4 U- J, k! S/ Z2 o1
2
; z( ^% o; x8 t7 y0 Y( h9 n; i3
4
, G% O) n0 u/ c+ e' a# u5
6
9 K" ^1 P0 s3 e3 C7 ]7
8
( D; A/ K8 u  s入口文件index.js

const UILib = {
# e' j# E2 G7 h+ E# F, q  install(Vue) {
; O& \0 w, B; C: `0 M9 R    Vue.component('CountTo', CountTo)
7 [* Y0 B8 \& z' Q0 Z: E7 C0 z  }
}
* }+ M5 U$ o2 i8 R/ D8 `3 c
) |7 T* F: ?2 T; mexport default UILib

5 o, ^& o, {8 x  ?1
2
3
( v. c& v/ V  B- U& S: R4
5
2 x1 ~$ X; A/ Q( y6
4 m% s% t4 w4 w  r! P7
4 W& i4 I: {2 ?9 b8 Y8
9
main.js使用
+ A+ v% R" w* m0 ?2 k" w$ a! [import CountTo from './components/count-to/index';
app.use(CountTo)
; C4 c) `- A, _6 B- F1
0 p$ e6 L1 A0 ^( ]; D2
requestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
: X; v3 f# ^7 i6 p导出两个方法 requestAnimationFrame, cancelAnimationFrame
( B# ]$ D( F' n各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
8 L# \" K! P- {5 [8 ^" `2 x: a* e+ d    for (let i = 0; i < prefixes.length; i++) {
! r+ p" |% A$ t! b7 B9 k1 ~; `        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
$ k0 w) R: r0 I$ V/ Z8 d
% K/ k. @1 z  M8 m* T8 K$ s  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
  Q8 {4 y! m1 i! ^0 C+ s6 G    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
2 C; f; h' p5 \& d, g! E            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
! P  S% H+ g& p7 z            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
4 C- @2 D. i; M$ {  Y            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
        }
' d! y! \3 D4 ^( P
        cancelAnimationFrame = function (id) {
7 C. j- o7 Z9 e  {            window.clearTimeout(id)
        }
    }

1
2
3
3 g* i7 s5 I4 z. a4
  r6 X" |0 y( i# z- [5
! c  E* _  y7 S2 G# j' {6
$ Q6 w. D% }. i( Y7
8
& o! |$ P! |" ~& P& E  x1 S9
9 l! E& Z  C: e6 X& ]9 g* F10
/ F% h. x0 ]0 Y: U- o* m1 `, ~11
12
9 O: p0 f5 L" h* _7 @13
2 w5 U* s! i3 }, L% b% a14
. w6 v3 d0 d# S/ m/ C' ~15
3 Z7 A2 v+ C7 c4 ~/ j" \16
3 L( [! k0 [" O. {$ S$ ^- i# d17
- z+ h9 Y: Q- X  n5 R18
( P, Z; Y, Z& R8 M5 Z4 q8 d19
- D3 S1 E4 p: Q( {% {, W, s# ^20
- P: R5 w7 q3 E( O( i) S8 r" Q21
22
23
! K3 B, }" F$ y. E  K24
7 y9 j# `3 z' M: `" W* |! `25
$ b& W) E* d$ _- _- p26
& @3 l, g5 N) W- m+ H27
9 W1 Y! P& _* O5 r28
29
# A+ B6 D4 W8 [/ U30
31
32
完整代码：
1 j/ X# _. j) N" _requestAnimationFrame.js
  ^. w& w/ E5 k* U% N: e! D
let lastTime = 0
0 R9 m3 t9 w( T* P0 bconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

& M2 ~: [% Z% L6 z& jlet requestAnimationFrame
  T% Q! y4 s' V6 c+ t. x* Flet cancelAnimationFrame

// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
3 f* m( t* C8 Z' N. A) z    requestAnimationFrame = function () {
, |6 D3 Z# U! O9 |        return
( t. G  b5 f* r- p    }
    cancelAnimationFrame = function () {
! ~9 w; Y/ A  ^0 J5 M8 l        return
    }
( m( D6 ]0 R4 L9 i+ w' G/ y} else {
    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
+ r& T5 W1 J% v/ E+ r4 H6 K& h( @    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
0 u" o4 c" b! f- [6 g1 Y* }% Y    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
; x( P8 P" T7 W+ e3 |: u        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
* S, u$ j4 D: K5 ^    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
" ~- Y/ U# K- H            }, timeToCall)
% M$ x! q; H6 g  ~            lastTime = currTime + timeToCall
7 }9 I* R' @# u( D5 V" |6 G            return id
        }
& |2 l5 p# U, r+ Q) T8 U- ]
/ m' a* q. E; B! `* h# ^. T        cancelAnimationFrame = function (id) {
% N/ i3 O+ E* _; s            window.clearTimeout(id)
0 H5 ?+ \2 [2 ?: l) r# Q  C! s, D/ O        }
0 `, _( n% |1 _    }
( J* E  t, T9 \}
5 e6 ]: P5 N7 E. P) _/ b# q5 I
* j1 w' U( T: D" |export { requestAnimationFrame, cancelAnimationFrame }
4 j8 E: Q4 ~- X) Q9 h; N
8 K2 b$ h5 v1 y+ o8 s5 k% V
1
2
& ?1 @# @  E/ P; o% c4 A4 ]. Q3
- i! A: Q0 S* R6 @+ g4
5
9 ?" Q# j4 O" N' M; C: F: p8 }6
. B" C7 ~  Z- {8 U! q7
3 l( X+ }6 n3 b5 S8
9
10
8 q% M3 J. a5 ^6 S# A; u1 h11
12
7 ?/ t( u1 v6 F3 B% ?* T13
14
15
2 G. u! o2 a& W8 b2 n* _16
: ?) l, L  `( V% e/ s7 }( Q. F17
( @- n9 B$ ]7 M: ]" ~+ U5 L! @18
19
# L& B4 q: ^% Y. [5 ^! M! T$ F20
* g3 [! k) `. l. Q21
22
23
% S/ r: d2 {( H' G. Z24
25
26
  U8 V. \0 _4 S) Y# k7 ?27
+ x" X) e0 N5 V4 n6 y28
. D# c3 A0 R4 S: j4 n! B( e( b# Y29
: l% |; s, U2 w& A! U" }30
31
32
) a+ z6 m" q3 c9 M9 F% O5 U33
  D) O* S6 Q1 M; m34
: b1 c8 H$ `$ h1 c! H6 `35
36
37
, L% q* V/ ]* Z7 s38
; G/ {8 e4 n7 M/ ^; p7 k# |7 k6 [39
40
  C2 m  w! x! `# T: A$ R3 q$ [41
# s% e( g7 f3 M) ~9 h42
43
3 H/ O0 X. A3 O6 h+ f44
; G, B" {  U8 S& Z45
) c) ~- d) |4 o  |( z46
47
48
$ e4 b6 a) C% o, h& c# |CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
- d+ I  J  T: E& L9 p
5 B/ F4 b5 Z: G: f引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
7 h0 u2 H1 d/ X1 O9 v& C1
需要接受的参数：
( f0 j7 \" J0 f- q/ A
  K7 }0 Q* M3 z8 }const props = defineProps({
1 @; q) N- A* L+ }" T. y! ]0 t  start: {
& j: C# ?4 G1 o$ i    type: Number,
0 E1 a- O: V' N2 j    required: false,
    default: 0
  },
8 G3 c/ s: B! E2 @, w/ A& N: s  end: {
    type: Number,
    required: false,
    default: 0
  },
) E' i$ K: y. ^9 g3 D  duration: {
2 ^  [# i3 i. B; s1 d4 I8 c0 l: a    type: Number,
    required: false,
2 m+ P; D* s" L  x, `    default: 5000
  },
  autoPlay: {
# O! E7 p4 A# c' R' |3 N    type: Boolean,
    required: false,
8 K9 S2 X* B+ L/ c6 B* f+ f' Z    default: true
) ^; c1 g+ @5 N- f% K3 g  },
: U2 R& k% s# H; H  decimals: {
    type: Number,
    required: false,
    default: 0,
    validator (value) {
      return value >= 0
; n$ H% J2 I! J4 y' X- E4 q    }
- h; H8 @/ L+ l9 ^  },
  decimal: {
    type: String,
    required: false,
1 W5 O* x8 I# u: t- m+ a3 `    default: '.'
9 \/ z: ?9 N  M0 c; C5 \  },
  separator: {
    type: String,
    required: false,
0 W* N7 A3 Y* X' c8 @- [    default: ','
  },
' Q9 c) [2 e# t. h  prefix: {
    type: String,
8 [0 n& Y& H  U. Y    required: false,
    default: ''
  },
  suffix: {
* T5 d2 x- T1 p0 H( u% @2 K    type: String,
9 ^, _5 V" _% b: M  O    required: false,
# m* Q! V- @# g: O    default: ''
6 d# F7 K5 q. |- \; v  },
  useEasing: {
    type: Boolean,
' X; `8 O$ G5 K9 t6 d8 a2 O    required: false,
, ~. `  o/ L3 I    default: true
' b% z! r0 Q% E1 M/ i  |; N0 {3 ~  },
$ R0 ?/ ?5 {1 ?2 d  m9 e  easingFn: {
    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
4 _  N5 f1 b! E# u% p: S! Q    }
- N1 `- n3 q, l  \  @  }
% a" R. F+ g( k7 K, o7 l})


1
2
3
( v9 u# `0 Q. V" x" L8 N4
9 L$ u4 f# e  t8 X5
8 U' L" ~( E  q6
2 U7 R& b: U* u7
8
9
, q* T# i. A+ b1 w! l6 V+ q10
) v9 S! J, a" A9 f" l11
12
13
& @7 ~+ L( I& C; E6 X; K# O" M! }14
) s/ b! h7 L. ?15
7 K2 z' d3 ~. {- L1 R  y( y16
17
7 C# v& @4 l$ r4 p+ x18
19
9 I# P6 n: h8 q. Z20
* R2 w& L9 k2 U5 c) @21
2 J& R- W3 {3 D! z# }22
2 H9 j/ q$ w& F, F) n23
24
5 g- D- c) ]+ |6 m4 E  U$ m25
* Y5 W; S  M" r/ W1 h4 z26
27
28
29
- ~8 r4 o4 _; ^+ y5 X. x30
31
32
, f5 k% {0 f/ ^3 u/ T8 S/ _33
0 r: Z" V6 D& e34
35
36
* N: m, D6 D# B37
, [  y2 y1 p8 U. j' d+ O7 }38
+ y& ^5 \1 B- z+ R39
40
; Y6 `4 C& v1 y  E& R4 ~41
42
0 L/ K5 X/ F: {8 M* p43
44
$ }+ l& t0 [7 x" Q4 I  a45
5 a: Q/ X  C8 Q  L9 D, u( Z8 i1 b. P5 T46
" I0 K6 p9 m7 g- M47
/ z% C5 A# V* X2 q/ _& @. ]48
49
0 t  T; h) _; B. A" i' _  e5 `" o50
: }0 u6 _6 x$ K2 g51
52
53
54
9 t6 ^" @) O% |0 n: e2 T* w55
/ A" |7 V5 h) w& w56
' V3 Z2 t* x! |* z/ H57
6 g( g2 U1 U" ]7 D58
2 `+ \: M3 Z- P7 u* b* T59
6 R9 P& v. J8 z( m/ E& n2 m60
0 V* b* l& R: _61
( M) C0 r1 L* Q( ]' V- \62
6 Q7 x! R% R% e  |3 I% e& [启动数字动效

const startCount = () => {
  state.localStart = props.start
& z6 ?3 n2 O, z: w/ j9 [' L  state.startTime = null
! z- |3 |# U( T8 N  Z* ~7 c  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
% p; A# ^$ l4 G0 ^2 F) w% Q8 Y! s}
1
1 s9 ~2 q% n7 R* L* ?$ `2
$ D$ @& u! e) W  N: Z3
& k2 K  W/ t' [# Q. Z$ \% b4 S4
9 K# o6 T) v/ a/ M5
; b, p* O7 j' P+ ^/ p! z6
# y- c" \/ D; i  o" F7 |7
核心函数，对数字进行转动

4 F( F( X# x4 k5 C; x( ], D  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
( U" ^8 i& o4 `3 q$ }  const progress = timestamp - state.startTime
+ X6 T8 |0 m. v+ z  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
    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)
. a  _! [/ }) l# Y    }
# `" C* b& }" U/ k' k) Z: m  } else {
    if (stopCount.value) {
( f; G  W5 i( K0 B" h% O      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
% I% A8 @. u& M9 ~9 W6 e    } else {
' o' p* V, |' e8 @) v) [( K' N      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
/ v  z" ^& s2 \' z    }
) X' W+ {) X  g. f/ Y  }
5 o& c( x& W0 O; ^' o1 Z  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
6 |6 a2 P( p* v7 }$ z  } else {
% Z+ ~* M' j: v. O0 x. G& b. ]    state.printVal = state.printVal > props.end ? props.end : state.printVal
% P& G# j/ i% I6 @( z  }

  state.displayValue = formatNumber(state.printVal)
7 W1 y3 h/ d. z% z" ]  if (progress < state.localDuration) {
) e" k9 K* C' v    state.rAF = requestAnimationFrame(count)
% ?, Y( Y9 b$ F5 D; Z6 y8 ^) L  } else {
    emits('callback')
$ f4 Y! B% Z! C- M  }
) R) n1 `1 \4 l}
# n5 {5 ]8 L: M8 K

$ O8 J) F6 q& i$ N// 格式化数据，返回想要展示的数据格式
4 M9 f; C& c$ F! f( g! {$ Fconst formatNumber = (val) => {
' r. a0 z  Z+ E0 {  val = val.toFixed(props.default)
  val += ''
; M7 J* N* p  Y( A( \- e! a  const x = val.split('.')
  let x1 = x[0]
8 O% ~% D8 K; `2 e! c& w( W8 K  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
, O+ L- j1 H; O6 ^! H% Z  if (props.separator && !isNumber(props.separator)) {
4 N; u& K( Q; a9 v    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
# x' K, h  g/ R) g  return props.prefix + x1 + x2 + props.suffix
; W2 x0 C; B. `1 {* h4 N}

1
2
3
4
% L! ?( Y' `" x$ O6 z3 V& k5
6
! C0 c5 Q2 d6 R6 C1 O& I3 C# U: |7
5 C. L  i) D$ j7 T! T3 s8 k# r8
9
( r; s4 C% g; W  x! i& k10
11
12
! r$ S0 Z2 I: c/ I0 a! U. |13
14
  Z. u- t5 q" q* a6 L# p9 t/ q15
9 S" Z8 @. U9 _1 V" ?1 D$ |7 }16
5 D9 v$ U* g' m/ B9 E. M17
18
& U* g5 j; V( \: n1 P7 w. ^19
20
  i; K* u( \0 k4 v9 p21
' b+ f4 n- a5 Y22
23
1 j( ~1 b+ o: ?8 F24
25
26
27
) [" T' n7 o% H# E28
( |5 i! ]+ e1 N9 ?1 E/ S" f$ @29
30
31
' L: ]+ M  K0 d" h32
3 w/ Z7 I) o% R' `* o( B& S! W5 S33
9 t0 ~7 m7 c! O! j# L. x34
35
36
37
: u" U2 K/ f( F7 m38
- ~$ s( x0 V( b2 p39
7 H( e$ N* F7 X& B) w/ Y* D. x40
! b' u! y8 C* ^; V1 F1 R41
2 W' d. ~+ _2 L( X42
$ {! h4 z6 d& p4 H- Z7 ]* Q43
44
45
* U( |# I* v$ A( W9 r9 _( ~46
2 v; `6 a* H% l- G3 |. D& U, s47
1 _& \- s, \: [3 Y* s48
7 \4 H$ P& \! R4 a取消动效
# w1 n9 j& N" T) i8 l
// 组件销毁时取消动画
0 B/ N* J8 R7 f+ c! ^" QonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
1
2
3
4
完整代码
( O4 Z. f: J- q/ J9 P' D
<template>
( H+ \6 R$ j: m7 b* W  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
* M; C1 {1 H% v3 {$ Q0 Oimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
! r6 g% |4 J$ g! h$ B& j& K7 I// 定义父组件传递的参数
const props = defineProps({
: H$ w5 Y6 a$ B: J  start: {
! y2 g% i9 N0 M5 N    type: Number,
    required: false,
& j& ?' I9 e0 Q8 g' x- N    default: 0
0 @- K& C5 V# Z4 I, N% H  },
  end: {
$ N! C) _, n* [5 X, {) t4 L1 E9 j    type: Number,
* w0 n/ O, n1 P+ m    required: false,
( W) }' T2 ^7 |% y; H    default: 0
  },
1 b/ @' X/ Q, ]- f9 {  duration: {
    type: Number,
6 Q3 g6 B5 f4 V3 @3 I4 e0 D" _    required: false,
7 o1 w: e8 [3 `' m0 y; T$ ~  k2 Q6 X9 P, h    default: 5000
  },
, S5 L5 T* u9 ^6 e9 \" X7 y; d  autoPlay: {
    type: Boolean,
5 B6 f; U  ~; Z5 w) k+ F    required: false,
    default: true
7 p5 H) a. o) }% M0 ~# x  },
  decimals: {
; m2 ]( r6 W6 h6 C3 J5 @    type: Number,
    required: false,
    default: 0,
    validator (value) {
      return value >= 0
7 J1 S8 u* l7 C$ Z8 j    }
  },
9 r* [, p9 |" R# |  decimal: {
    type: String,
1 M4 A! J: S5 |& j% ~    required: false,
6 y! O( N, D1 l7 b) @) }; p    default: '.'
  },
  separator: {
    type: String,
    required: false,
    default: ','
  l; O+ O( d" Z% B' ^! w% w, I  },
  prefix: {
    type: String,
    required: false,
    default: ''
  },
  suffix: {
    type: String,
    required: false,
2 s7 O  `- y& V8 g$ L    default: ''
' h2 T; U; X% k  `" {# x+ w  Q1 F  },
  useEasing: {
    type: Boolean,
    required: false,
    default: true
' U- |6 D* |* H6 z  },
  easingFn: {
5 S! n+ ^: O4 U+ f0 J    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+ K! x$ k, I; ~/ k: [! Z    }
  }
})
" V  W/ z: z2 p7 C
const isNumber = (val) => {
  return !isNaN(parseFloat(val))
}
0 D7 m/ Q( D( h; w6 w3 Y" w9 [
// 格式化数据，返回想要展示的数据格式
; C: h7 U5 E! u+ q' T1 Mconst formatNumber = (val) => {
; {/ H% w: n' t/ D9 i  val = val.toFixed(props.default)
  val += ''
) k9 [& ?$ c7 m  const x = val.split('.')
9 E1 N$ r, e3 J  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
9 N' u. h; D; ]. C. m9 G    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
+ O: q& |( w. \, k6 i$ V( M7 n& `. Z  return props.prefix + x1 + x2 + props.suffix
}
  x7 ~; O* F, x1 N! m: u
// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
$ B* ?( [0 r7 M3 K# J& [6 u  F4 c  printVal: null,
  paused: false,
  localDuration: props.duration,
  startTime: null,
/ f. B; s5 g3 e  timestamp: null,
, m6 K* {$ ~! Q" z& i  r) C  remaining: null,
6 C$ S$ O8 r- u# E  rAF: null
})

// 定义一个计算属性，当开始数字大于结束数字时返回true
) t  v* f( c4 Xconst stopCount = computed(() => {
  return props.start > props.end
$ M8 S. V6 `! Z, K) ]})
. p9 N0 u; j' o7 P: w/ E3 ?// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])
5 w* D4 S6 K# \+ M
const startCount = () => {
  state.localStart = props.start
4 A0 j/ e7 P# k' @. @  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
}

watch(() => props.start, () => {
  T& U9 g4 K  ~  if (props.autoPlay) {
    startCount()
  }
})
% S* n8 V1 O' O8 ?+ o' c0 \
watch(() => props.end, () => {
  C" R# c  {3 j  if (props.autoPlay) {
; M, X3 i% }* Y3 q* X; h: N7 D    startCount()
3 x7 P- E5 P4 s/ @  }
})
// dom挂在完成后执行一些操作
; Z# q1 }2 u3 _7 L( D/ e0 lonMounted(() => {
  if (props.autoPlay) {
    startCount()
) a% Q! \$ X: E2 z  }
+ i1 z8 \7 F% p  M' y. @  emits('onMountedcallback')
( V) I) _7 v& {. ~})
// 暂停计数
const pause = () => {
' a% @3 a/ `/ ]5 d  cancelAnimationFrame(state.rAF)
& i. a8 r1 F6 v$ X7 s: ^}
( _/ l# a  o9 y% c# F// 恢复计数
* c7 f& M/ w7 t* F9 t! I" cconst resume = () => {
! a; D8 v$ {* o) n+ _; R  ?: z: j  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
& s2 r9 u. n- J- f$ r* Y2 R" G2 K% w}

# h( K! o( b) h, X! P+ [' jconst pauseResume = () => {
  if (state.paused) {
    resume()
    state.paused = false
- g2 F4 \' e9 S; z% ~  } else {
/ U( S& h* }# ~0 h$ V/ d    pause()
    state.paused = true
% C7 }8 \# @6 P; b6 d, [2 J  }
$ I* J) i3 B: S7 x}
* o9 s3 ~( R# Y
  F/ L, J1 F9 P) O4 L# l8 j! ~! ]3 wconst reset = () => {
. i' s5 j+ s' ~  state.startTime = null
  cancelAnimationFrame(state.rAF)
6 M5 a: j4 L9 s$ r( p5 C- \  state.displayValue = formatNumber(props.start)
}

const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
8 v+ g% g  F3 P5 d) \  state.remaining = state.localDuration - progress
( h4 E3 D" O2 T& _0 E3 G' U; z( i  b/ x  // 是否使用速度变化曲线
  if (props.useEasing) {
  m# u! X5 A; c    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)
% p& {. [* D7 A! w  W5 e    }
  } else {
    if (stopCount.value) {
% z* ]/ n  C0 D" f- Y  y- q      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
6 ?. C4 C% D( r8 ~! h    } else {
$ w% ?2 o+ K& v, k: S/ z& o      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
! W  F& C" ?& L2 S' `4 I+ {8 R  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
- I+ ~' k8 r: ?  }
8 B; X+ J" Y, T' f( M4 {! {4 d
5 E+ S* V- `4 o9 \  G* F5 |: M  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
" J; A$ L; D2 ]5 ]5 g0 E    state.rAF = requestAnimationFrame(count)
  V# }* f# m! h+ _* O  } else {
7 [4 a' X8 ?8 I& \8 |9 T    emits('callback')
9 f) F* _& L2 y$ g2 `  }
}
$ L4 j, J5 z- p6 {% h0 _- e// 组件销毁时取消动画
onUnmounted(() => {
; }2 f5 K; E/ H$ i+ V2 n% V) T  cancelAnimationFrame(state.rAF)
$ _) I  z7 V- _* A, v1 o/ T})
  n' {- k9 f8 ^$ w</script>

3 C' A$ S* R4 W1
5 [' E; L5 Q5 j2 d! @2
3
( B  C: ~: Y3 U, o; O% M4
+ H+ O' o! v  w% c/ Y5
. ~( `$ X' \+ _' {6
% Q5 q  R; M4 e+ H$ ~) t7
1 h! L9 T6 x+ t0 R) D8
9
10
3 b5 n/ P  i/ K# G7 `; b7 W11
12
13
% v# f$ l+ m' G+ W* U5 n2 W! C14
* b$ ?% o0 g$ g2 S. P9 g15
16
17
. g1 ~: @2 v4 W. N% |18
19
20
6 T2 Y% Q* y" f' B- D21
7 b5 d( p& F: O4 q6 f. u' u$ E22
4 v% I9 m; W% S6 p4 o! x8 K2 @23
24
25
26
27
28
29
! x" K. e! ~% X; g1 r30
2 Y7 P) \$ P& s31
' _1 G5 V& Y$ [2 Q- Z; K/ B' h2 x3 A3 ^32
3 {" o( T' F$ X# g33
- P7 M3 U0 O( `) v1 D; o. L5 U34
35
36
37
1 [- d+ S8 B+ e2 F- c38
) ?. ?* A% `, N9 {0 X+ D39
4 F$ P$ E3 H$ j9 p3 N: d" X3 ^* z  t7 T40
7 a% [8 q* {, t/ D41
% q+ H: C$ r% G0 M42
0 J4 r, I" `+ Z) Z43
# W- {1 ?) F, q44
2 V$ g$ M6 n+ G& u4 j( ^8 X9 D# y45
# D$ n/ s' `6 o7 o4 A( A! F7 X46
47
" j. N5 j, o5 U$ s, A48
  J' {6 Z# y- W6 z: `49
$ P( W. K) W& t50
) w# N( b4 G& m. Y, j& P  d51
/ Z3 K, N! }- X% y7 j9 c, m52
4 y& \. f! Z" A, Q: z! I53
, W- C3 y! i. w; d2 C& d54
55
56
( z+ z1 W; `8 a6 d: k57
" Y9 G8 P- m4 F+ m4 z# S7 I8 T1 ~58
59
60
61
4 a7 G& R- h8 R% a62
$ B9 W- z  }. E' R63
64
65
- C2 b& ~/ I. i* _, o( {/ h66
- D# n1 C/ |% S67
68
5 D) i* s  E. a69
8 U4 Y6 x; L) o5 x2 p: X70
71
4 ]4 J7 }. O* X+ s) N72
1 o7 I( j% S8 X/ ?: F' A73
" `( R+ D9 ?" Z. S74
75
76
/ O( Y0 F1 g/ h! b' p1 v. ]: C77
78
79
80
81
( [3 @1 H9 J. ]; }( T82
83
84
( Y8 k# f8 O2 N; q8 a85
86
. m  b/ X; q. o5 L87
88
89
% R  a5 ?9 \- F90
6 U- \, ]  p, n. R5 j4 F/ d91
92
3 l0 I. Z/ H) z# w9 L93
94
95
96
2 W9 k- [) s, _  c2 G+ u2 S; @' x7 p97
98
99
100
101
4 _9 ~. m6 r4 w, q! a5 g% ~0 ~* e102
103
104
& f$ E/ X$ z9 n7 G$ Z4 r105
106
107
, m8 U% s) }- W' D7 W4 i108
$ y+ h: U# b5 P# h& y8 d: ?109
  M( Q; A; O0 L. d$ q3 m% }1 ]110
111
4 X! m- k7 c- r, L112
113
4 ?( c0 j! R* A$ }# S* a  [114
115
8 N* m$ |7 Z# N3 Z  y116
8 W8 g4 ]" P& f- e& i  C& Q: @117
0 Y0 F+ J  [: X6 i118
119
120
121
: X9 a  P7 h* r2 }# Y; J/ s5 l3 ?122
" M4 `9 I# Y7 Y4 h8 D1 K123
124
125
126
127
5 z6 C# S6 E; E0 c0 `6 Q# l: m- a( A128
129
130
  G. g  @: U( G1 ~131
132
133
- v! y3 L6 |5 X+ h8 g! ]- x134
! K8 l5 f! j% j5 I135
136
9 E6 j& Q. G5 T137
138
# z3 T; U8 {2 H* l, f139
140
141
8 C3 b+ d  ^% V! Q: D1 |' m. q142
8 p+ t& i+ y9 }143
+ D# |5 I( c3 z. o1 j' Z$ [0 L  z144
% H* J( b* q, [! e7 D145
+ U  A# O* k0 h. V146
147
$ |# D; J& `& X: U( J148
149
150
8 c5 q8 n1 j9 [/ N151
9 D7 o8 k+ r1 H- J+ ~: `9 a" m' d152
153
8 A& U* W. K, l% i154
9 S6 m7 m" p6 P/ \155
156
157
158
159
% h2 j9 O5 D. r! ?% v160
161
- j0 k, Q* W, P: k0 l% j; }0 c- j162
9 g1 z( n2 K2 ?3 s1 s# a163
164
165
% H4 x$ t3 u9 G9 U2 l- x2 }* c* ?166
; q0 Z& C  b& K% c167
: s; f: s& b" F168
169
170
/ P# T1 s- Q$ M5 P5 p; @8 ]171
" J$ o9 F. s# ]: T  ^! q3 \) ?172
" e5 B" `2 N6 U1 ^# ^; h& G- r173
174
175
) y4 v0 D3 O) [176
177
& y. C7 t: v! E- ~178
1 U) x3 G6 E& l& i% C$ i" Z$ E4 M179
180
181
182
, L  h* L$ g1 Y1 U* J4 ~/ J183
184
; S2 K" v$ ?4 q/ n/ U. ^' \185
186
187
188
& U& ^! W2 H3 n! P189
- o8 o3 w0 O6 y: K( W' |7 M190
191
192
193
& F3 i2 h$ L5 E( D6 m6 x9 N' K2 L% e194
195
196
197
198
% F! A+ Z+ O5 [$ p0 n199
200
201
, m8 X! R1 c7 b202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
' _% P* h8 k6 _
& Q% @* N$ g  J$ B' ~7 Kdemo演示
- k/ }$ y) {: K! R+ ^后续的线上demo演示会放在
- U$ c2 m8 A' E4 D+ Kdemo演示
完整代码会放在
个人主页

希望对vue开发者有所帮助~

个人简介：承吾
工作年限：5年前端
4 M, [/ _1 y0 L  b地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！

* N0 U- u7 p' }% R! j8 M* e% M

8 O" J5 l5 `; @3 S3 c& \
2 N7 k+ ]; n) K+ v# {————————————————
$ N4 j, X1 R: q# q  u- ^$ S  B版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
7 l$ X7 P4 b4 L原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
& M2 [4 e, S( }% [

7 s( A6 d. _, J; S