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

杨利霞

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

+ S+ t! l2 o! W( D前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


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

文件目录
% [. N4 Z; ]% y$ `; k. d
. G! a9 N7 t) Q: c. K% d% [
使用示例
9 p. @' A& X- F1 b9 X; c<CountTo
4 d9 c$ h; G' b& y :start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
6 N: ]6 z  \6 N: H8 l- Q) p :autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
1 L9 |/ _+ X2 b! e- J# H suffix="rmb" // 后缀符号
/>
6 C$ y; \# ]9 t+ n$ [2 n  j  K' C1
9 y  G7 C( X5 g* a6 X0 Q9 w3 Y2
# ^0 y2 l  ?1 Q& J% Q+ `0 R3
1 D; s4 |% `9 f1 W7 k6 C4 k4
  Z  ?, k1 l$ k8 X3 U. Q9 ~7 a5
6
9 y5 W! J5 R: D* b0 P& ~7
8
6 x' f6 T* k0 Y! P/ q" i入口文件index.js
* G* {, R: w$ d3 V' Y+ h7 s
const UILib = {
) S2 p1 V: L' O5 r  install(Vue) {
% [" k/ F9 q+ e  @! l6 [3 f    Vue.component('CountTo', CountTo)
  Y1 Z4 q8 ?2 h* a7 Y; U  }
}
$ _, `" h( v& o. `3 X* |$ b# v( y" E
- ~* Z8 l6 S& g- k* [0 ~, o5 Hexport default UILib
, T# B/ u" j; E3 n5 H9 o
+ d1 J( s: J9 p% i) k1
2
3
9 D) U) m# s; p4 H4 h# ~1 z+ T4
5
2 D: P" ^  z- F6
4 T) C8 J, t6 b6 X7
8
9
2 a( E- U8 J% l& a& Z# omain.js使用
import CountTo from './components/count-to/index';
' n2 l+ q# f: }app.use(CountTo)
, D! P6 r+ J9 J& C8 ^% |+ [1
- h  Y. y8 v' X) t: D8 X4 _2
requestAnimationFrame.js思路
4 [  M: V& w2 W. Q先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
$ m8 W$ O( z- X5 ]如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
6 m5 p+ @: p; t( h各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
, Y5 {" c3 y! C, }let prefix;
1 D3 \! e7 n. u8 Ulet requestAnimationFrame;
let cancelAnimationFrame;
$ Q& X8 m/ J% ^. S4 p// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
: X! q( N* j6 j! b, c# H5 E  A  f        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
) {* L9 @: u( z# d0 H. |5 d, ?; t        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
( T6 a3 f% `) u2 |  N$ }+ I        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
/ p, C: g. e, q, k7 u
  //不支持使用setTimeout方式替换：模拟60帧的效果
: Y0 A, X8 F. A! ]; C7 O  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
8 @* C1 k+ o( E& ?+ v7 w            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
; E" \& D1 }3 I8 e! F            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
! y0 [- i5 v  s            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
' F( t, e# c/ L! q# V5 d* _            lastTime = currTime + timeToCall
            return id
3 r& R% b- i$ t6 r        }
) X+ W: ~% b0 f7 v& O! }2 |9 v9 M
% [3 P5 @' E4 H" ?2 q6 |/ ?        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
. r# t; @1 Y5 Q$ e' ^- X        }
    }
% Y0 ^: K5 n; Y6 r
! P( I4 `5 o( w8 {* G: i1
2
3
4
5
% X: c: ?. e9 p' h& Z/ M+ p6
; Q  r7 c# B& ~0 a7
' N9 N$ ^9 o0 _# J; D, V: ?5 k8
9
2 m/ K1 Z/ H1 \6 X/ d. X10
11
12
13
" |2 H9 J: ^; t$ z6 ]( U- R* B4 D14
9 A1 B$ p1 |" o( V# V  v* J15
, [7 [7 t4 W% i: e/ y9 h16
! n9 E( `2 T3 h' p$ _/ C- ^+ \17
8 o% A) @3 L/ a7 }# u18
19
20
21
( F2 ~; p+ v4 I$ @+ r22
23
24
25
; j+ _" Y- J1 Y6 D) ?9 s26
27
. A0 m9 V& J, t7 w, a/ c28
29
30
31
32
- ]4 n7 [0 u, ^8 U完整代码：
' g5 ^( O4 E5 A& j$ Y! `4 YrequestAnimationFrame.js
8 o* I! z7 g" G: f, @4 d5 v( O
let lastTime = 0
0 W! F9 i0 `9 O9 n! j+ o% o8 @/ l" Mconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

let requestAnimationFrame
* r' K4 a1 [8 f* m7 Z+ xlet cancelAnimationFrame
$ P# D' J( K6 b
// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
( k" K5 e# N2 ~: h" H8 `        return
    }
4 o9 N6 A* w5 ]- J3 W    cancelAnimationFrame = function () {
        return
$ V5 N* i( V# E8 C- f2 ?    }
3 N1 B; |2 _2 V9 ]: m! ~! F6 H} else {
7 _1 N2 b+ @4 u, c, d2 h    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
$ }' u2 H" X, O  J3 j1 L  V  h    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
6 d! t2 i  Y: c0 N    for (let i = 0; i < prefixes.length; i++) {
5 e9 R+ C* n+ J; G( F        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
: n4 z9 y4 M9 t" E- h  a5 K3 c5 L        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
* w# e$ \) F, S4 i" w
    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
9 r: _& Z2 G3 T% Z* d! c  ^2 Q    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
/ R& D! r0 W0 u& Q            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
! L' o+ O. e6 l$ O( C$ T% N            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
3 B% G6 {/ s" B                callback(currTime + timeToCall)
7 a, F2 }5 m# r8 U+ E' Y( V            }, timeToCall)
  o  e  T1 C- S            lastTime = currTime + timeToCall
            return id
        }
5 q6 J! |- a" }) M3 i: X$ x2 [8 |, O/ Z- B
        cancelAnimationFrame = function (id) {
  U# N: A3 F& s/ U7 }            window.clearTimeout(id)
        }
    }
}
. A7 n. X" l1 }5 K) f6 B1 O- g
/ @2 Q& r' Q# Y: l- X- i7 U; yexport { requestAnimationFrame, cancelAnimationFrame }
& J# R* M! E  {

' L. e9 m3 d. V1
0 T5 f' G- L' Q/ g# `2
7 x) W' F5 W/ E- p3
/ C! v1 f* H' y2 ~. _. ^5 _* j9 V8 i4
  w2 }# P. l7 f* ]5
6
7
( p9 [! z0 C' B% \3 \8
9
  u2 N/ a% u7 [. T  d$ V2 r: ^10
11
12
* K7 ^( @, R& g5 w  u+ X& n13
; R+ n6 ^- L+ T14
( h$ \7 F3 |. i: Y& ?$ p' B+ i0 X15
16
$ ~$ C& \1 T7 l% z- E9 @7 W17
18
19
3 C3 L' Z) B) P20
21
6 O( b- f) ]$ i% \7 ]22
+ f7 J# s% z! W4 a2 G: ]1 T23
1 t* `! {* Z  [6 q9 ]24
8 u6 a* S+ p6 @# w25
26
1 P" R4 f% r+ l3 S$ y1 I27
1 P: v2 h0 [. ~0 a" X28
0 Q2 {6 _* a+ A  S: d4 I29
30
31
32
+ F& E$ t! J/ L. a9 L( \! P33
34
* W, i4 G- f! ~35
' M' Q+ k2 E. v' q6 {* Q36
37
$ s3 b6 X. e% @( @38
2 v! J& a( G" p, N, x39
40
; _, f& j- Q+ m6 T. q$ d" k41
42
+ D; A) D1 t0 Y- k/ N4 _9 b& p- s43
; h! G7 j+ x0 ~7 I44
45
46
, q! V5 U  \# v( s& J) E) K& R47
9 \8 g. l3 G. C$ A48
4 h  T; {7 z% q/ K: eCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

4 A6 x1 U4 D! \2 Z引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
需要接受的参数：

) B% D( E. V8 @const props = defineProps({
  start: {
7 O8 R: u; f9 j$ l* H! z    type: Number,
    required: false,
  g/ L. }# _% [) ]6 D' p    default: 0
  },
  end: {
" J( d4 L+ U2 p# y' x$ e    type: Number,
/ o* @- G; ^/ w; d6 x    required: false,
    default: 0
9 n& O9 R% X( X+ W+ Z* Z  },
  duration: {
    type: Number,
    required: false,
    default: 5000
% v6 A# R0 c$ s# J( _. H8 Y  },
  autoPlay: {
    type: Boolean,
) I1 N" x" g% p, ~9 W9 `+ Z4 T    required: false,
    default: true
  },
6 i2 j2 c8 f5 Z0 {4 Z  decimals: {
" u" x; s9 J: j5 w5 G/ P    type: Number,
8 k" s2 Q$ M* j    required: false,
    default: 0,
3 v8 i! n7 F! O: w    validator (value) {
      return value >= 0
    }
  },
  decimal: {
5 I; }- z1 E  ^( A1 i: |% `    type: String,
8 b5 V4 y. T, v9 D    required: false,
! ]) [. O. F# r) E7 g- S    default: '.'
. ^: c  ?) x2 {  },
9 K- `9 x) o) q$ Y. F9 e( M1 s# c6 T  separator: {
2 {! U8 R( z: K! K( E' _8 l4 Z6 J$ k    type: String,
    required: false,
    default: ','
3 v  o4 W, ?! S, H6 d, t  },
  prefix: {
  x- `; }4 \/ j! P    type: String,
    required: false,
    default: ''
  },
  suffix: {
    type: String,
: Y9 r* n- R5 z. n* n    required: false,
    default: ''
( N% B7 x1 A/ B  },
; A% a, y1 I- L# v4 i  useEasing: {
3 n8 {' T" o  j/ Q    type: Boolean,
    required: false,
    default: true
  },
  easingFn: {
4 q: T# u4 y, J7 Y, u/ K  [# ~    type: Function,
    default(t, b, c, d) {
! \. l, @! Y$ w3 L; h; k* ]$ k, y      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
+ {/ Z$ ~1 @+ v2 s  D  }
6 n! C" q1 `! J6 ]' p3 d})
  H" z0 }# [/ n. r1 e& b; U

1
- ]9 S4 M, n7 M7 K6 f5 m) e2
7 ~, E  l  `) v  v  F) F: e/ }3
4
5
; K+ }7 ]1 W6 i+ {" H6
7
8
7 v' N, L; u9 @- g, r! x9
10
1 z+ _" k" r; D9 S11
! E, k2 g% q/ m2 K- q1 d2 ^12
13
14
15
. K1 g" @8 g: F7 z- f( f, ?16
# a) \0 T. \6 k3 d( C, u6 x+ ^1 i" {5 i17
18
19
20
  |9 v/ K, V, Q* {. E9 Y8 C8 H# Y21
% W! Z7 c2 u: {22
23
" v0 L) {: @$ n2 _5 k! }1 S2 Z24
25
26
* c$ r, _+ p1 A7 `0 U, J27
28
29
30
31
32
/ L. V/ H, ^" U5 a2 F/ j( l33
/ V# N0 \8 h9 N( I) A& y  X4 Y1 n34
35
, Q; w8 d, y! y& M  `36
3 z- h* H* {, I8 k8 G0 H  `5 f37
38
8 |( Q/ T# z- v9 o4 _/ u+ Y& n7 b! g39
40
41
# u' _; D+ i& t# |6 h" [, l) Q; `42
43
44
' A) T4 _! `3 I  O( d3 }: Y1 N45
46
47
48
49
50
51
, t+ L, d+ e" s* k3 S* W52
53
" M/ l  p7 ?: R" f# `2 u54
55
56
57
0 e' l' l5 N# h2 I% r# \) m2 w58
59
60
9 ~% D4 @. d* U& k" @61
62
启动数字动效

; F, |* P. K2 q; Oconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
$ S7 H" e. X8 m% T) U  state.localDuration = props.duration
3 a1 e) W( a, ?  r7 n  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
1
2
; e4 R) U/ ~1 E! E7 k! ~# V1 [, b3
* m0 K# p( l- ]4
5
9 w# l6 A7 c' Y6
" J$ K) b+ i5 d% Q* B; y' o5 s9 F1 ]7
核心函数，对数字进行转动
6 M. e# e% U+ @; K8 B6 h0 ]
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
" |; d  \4 o( {* s6 d7 i+ w  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
6 x: J! `* N/ V4 l, c  // 是否使用速度变化曲线
# [! @$ N5 C7 V$ D  R7 c  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
9 v- f5 e7 z0 Q) C  H  x    } else {
. u: s8 f* Q! H: L: B6 m) J      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
: Y1 {! Z" R9 v# J6 n# b    }
3 j1 F7 a4 A6 H; e5 Z/ x9 \  } else {
( X/ q& h. i# P- x    if (stopCount.value) {
3 m4 c& [7 k% c, h9 V      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
7 N( x! a$ F4 h    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
& ]. F5 k8 w/ K; r' W! M  }
  if (stopCount.value) {
% F3 e7 W& ]7 m+ F    state.printVal = state.printVal < props.end ? props.end : state.printVal
- H- F8 _1 x( \$ O2 L  } else {
6 L, P2 O$ B6 \' B9 [    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

  state.displayValue = formatNumber(state.printVal)
; x( b  }, P, `. m, W  if (progress < state.localDuration) {
; ?/ I1 \: W9 `" x) w    state.rAF = requestAnimationFrame(count)
  } else {
, v8 k! U/ [. ~2 R2 d3 a    emits('callback')
  N7 w# b/ v# O4 _; e  }
}


% s$ U& L  \1 ]9 B// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
7 v8 h' U: v& l+ A  val += ''
. }. f# X$ p  t  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
5 w/ r/ e, L( _- W$ q+ s+ J9 i  const rgx = /(\d+)(\d{3})/
0 [$ J: j! Q+ o) b; a5 d0 z7 \( T  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
' i2 r/ A; q, b" P  u8 ?3 l      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
6 e+ C/ I, @# k8 l    }
0 \3 h$ p! V6 u1 D* `  }
  return props.prefix + x1 + x2 + props.suffix
7 a( u! C0 {4 I}
. u/ |9 ~7 q$ X# P$ ]
% [( P, j9 p3 [0 v0 O. s0 E1
2
5 A* Y* s- p- _& N3
4
5
6
) A3 ]" M! ^* ~; W( T- r7
8 z2 T5 \- i( N: `! n8
9
10
11
* v7 o, p4 a' P, F' u* F12
" h6 f% Q5 e$ g" S. t8 E2 g13
2 e0 H/ h" C7 @: v$ a& W14
15
16
% ?) Q) g+ b6 h1 c: `' L17
18
3 M, F0 m* Q& c0 ^# m19
/ e4 B0 z( U& N" K20
21
22
) c+ G' V7 l0 ~7 \, k23
# x3 t1 }/ }$ b6 V# s7 [# c; d24
25
26
27
7 }8 `, F' [! R3 [! F7 r28
29
5 d9 a( B4 x8 o5 {3 f' P$ C30
6 i: C" S3 u: x& ^& q31
2 j0 O3 p: m% q* m  W) z, t3 ]32
33
34
35
36
37
38
39
4 x$ F( r/ P; C$ n6 H: [8 o40
; `' K* M3 p/ p41
42
43
44
45
  S" P& }# Y: Z0 z; d' N# S7 M46
% V0 a" V! @  U. R7 B) c1 k1 X47
48
* u  l- S/ |: O4 x. w取消动效
$ T1 S& {" X+ X- W8 D6 a0 @
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
" B! i& W( i; k' |  ?})
( B- J/ n$ R6 Q0 c1
2
3
4
完整代码

<template>
& m2 N+ L( X) d  @; \" t  {{ state.displayValue }}
3 q# q  p' E/ x7 h: r" a</template>

" n+ E( S% j; Y3 [3 P) V<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
: T! W) y5 ]1 }9 U" o! Gimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
: O5 r4 p; |' a1 s! o% U" Jimport { watch, computed } from 'vue';
6 i8 _, i8 l3 timport { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
( p  T, @, X, b+ C% \4 a// 定义父组件传递的参数
const props = defineProps({
" ?' W+ ?( X" H9 o5 ?  start: {
    type: Number,
# I! o5 P3 g, A: P: g' I8 o3 Q0 F9 G' B    required: false,
4 l& z/ H2 _0 s7 I2 K0 ^    default: 0
$ K4 t% a& C1 R# }/ ?  },
  end: {
, M$ [) f5 D7 B/ F, ?0 z( x/ h- u    type: Number,
8 k  q% f! s+ y  [: i# J! k- p    required: false,
4 O  m1 C* S: l8 B) ?; a    default: 0
& K  m: W" O, V! X( P$ R. L  },
  duration: {
    type: Number,
    required: false,
  Z) N" J. I, `5 B4 S+ O, ^6 u3 }    default: 5000
  f' ^0 F2 ?% K9 ?% e) L4 j: K8 m# v8 J8 `  },
  autoPlay: {
    type: Boolean,
    required: false,
    default: true
* C3 m  `- r8 x4 R  },
3 d' M4 i3 Z  y  R7 L! ?9 m& ~  p  decimals: {
; R& r9 g) r4 [    type: Number,
7 W7 U# I) ]8 h" G0 N    required: false,
1 G' Z' M4 k+ h2 O8 _, ?( `  t    default: 0,
    validator (value) {
      return value >= 0
$ s7 w1 q" Y& f; J    }
# N3 |' D# k, A, M% ~0 K  },
  decimal: {
    type: String,
$ ]4 [* k; ^; J( J* P9 d, l    required: false,
    default: '.'
  },
  separator: {
    type: String,
    required: false,
5 ~" ]* H; j. I    default: ','
  d' Y9 Y% d6 f3 |  },
) ^; ?7 r. N. p$ f& u  prefix: {
8 Q2 I% _# N6 M    type: String,
7 B7 G* L( {0 l7 B    required: false,
    default: ''
  },
  suffix: {
    type: String,
    required: false,
4 C9 \- ]$ `! f1 ]    default: ''
) c6 u" x& V. ]3 F8 `  D  },
  useEasing: {
    type: Boolean,
    required: false,
    default: true
. d' Z% n3 b6 C( }  },
- ]" J8 H0 J: @% Z  easingFn: {
* j, q% D/ a/ A' v. K7 E    type: Function,
    default(t, b, c, d) {
/ D/ s3 ?/ t. h" E7 Q( W  O5 Y      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
5 p  v0 ~9 D+ ?# ?    }
6 ]& f8 m( e" C! S  }
})
, [  W  B, j  N% R; \: Q
const isNumber = (val) => {
  return !isNaN(parseFloat(val))
}

// 格式化数据，返回想要展示的数据格式
( W$ B0 Z" i, }! Vconst formatNumber = (val) => {
+ Y1 i- c7 F! q# d- p, A9 ]  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
$ v: ~# M/ @% }5 o! z& ^5 k: g# r  let x1 = x[0]
7 G( @* e2 f! k6 @" z  const x2 = x.length > 1 ? props.decimal + x[1] : ''
) B, L, C( g7 b1 W  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
- E, c; X. s8 l" w    while (rgx.test(x1)) {
3 f3 M* f* Y$ P" E% E      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
5 |) }8 i! K# _, E  }
/ k8 O7 o$ ~6 `) H4 T: c  I  return props.prefix + x1 + x2 + props.suffix
}

, l! F0 m  G$ }' ^3 o// 相当于vue2中的data中所定义的变量部分
const state = reactive({
1 j* @5 c. Z; ~* V* Z  localStart: props.start,
  displayValue: formatNumber(props.start),
  \; G: V) Z. y( t! O" f  printVal: null,
  paused: false,
  localDuration: props.duration,
  startTime: null,
7 c6 q2 H. e& E2 B3 Z# M0 O  timestamp: null,
7 S) Z5 q; d% r5 ]  remaining: null,
3 Z% R; o- u, Q4 a  A  rAF: null
})
  ?4 H0 u0 j$ U3 O$ y
// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
6 k4 s( G. K$ ]* z0 e/ j  F9 A* x  return props.start > props.end
})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
& E# ?- {3 |. A1 j. D% ]const emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
# p" K3 k( e. G3 _) D; A/ L7 @& L  state.localStart = props.start
/ V0 O9 ]( P0 E0 X! Q2 p  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
) N/ j7 P$ T* @( B$ \, `% G  state.rAF = requestAnimationFrame(count)
}

3 M5 ^% u' Q0 @- A8 o2 qwatch(() => props.start, () => {
  E7 T  T. L1 t2 i; y5 L7 _  if (props.autoPlay) {
    startCount()
$ F* \& U; ~% _1 ~/ l( S) \  }
})

watch(() => props.end, () => {
  H. O. ]& y" K8 F8 {* k  if (props.autoPlay) {
4 Y6 J! q- I( _6 H    startCount()
) v( O* P; p+ d* i4 f  }
6 F) U: D0 e+ F9 K, v+ K})
// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
    startCount()
( B1 y( |9 Y& f$ F8 C7 g  }
  emits('onMountedcallback')
) f4 R  O! w' ?( ^$ \4 f7 z})
% [: j: P0 S! b3 s// 暂停计数
8 J# Y5 w$ \$ econst pause = () => {
  cancelAnimationFrame(state.rAF)
}
+ b9 a, i) u+ V, g9 \// 恢复计数
const resume = () => {
) R. L3 Y3 `& J9 n6 f7 T7 h" M  state.startTime = null
  state.localDuration = +state.remaining
5 B( v: i. C) k- d  state.localStart = +state.printVal
  requestAnimationFrame(count)
  b- l7 c8 T9 m) s+ Y1 T}
" Y! ]: ^; B" E: h
6 y2 S) d# x0 t! C( Dconst pauseResume = () => {
3 t5 p# Y, g* \; J- P& A  if (state.paused) {
    resume()
    state.paused = false
$ `5 g$ ?2 H3 e" D# J  } else {
    pause()
    state.paused = true
4 o7 n  I( _- L. i  }
( E+ Q) E3 j1 y0 I" A* U}

const reset = () => {
# C9 l: E: o0 M  a* {9 z  state.startTime = null
7 Y# k+ ^4 \7 P; Y& u9 k! F  cancelAnimationFrame(state.rAF)
5 D& t: j1 h! b* B  state.displayValue = formatNumber(props.start)
}
% E8 a; E5 x8 E* O# Q
/ L; W$ M7 C$ h- n/ s) k, R$ f' X& ]const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
6 G: _2 M6 o* ]9 `$ @* f  state.remaining = state.localDuration - progress
* z' _* C, L4 K* w  // 是否使用速度变化曲线
6 z# E" |. H8 W. v: M  if (props.useEasing) {
* W" m5 g; A- r( r7 }0 P    if (stopCount.value) {
2 ?7 s2 b8 [, a8 T* k( H      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
9 d4 e6 @& [: ^% f8 k& D/ c; l      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
    if (stopCount.value) {
0 m* Q5 |  y: x$ t# G      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
6 Q8 o) c' Q# v, d1 s. Z3 o    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
, b6 P$ X; \5 }  ^1 p" I    }
4 z: _; M3 W* `& U  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
, {- Y) a6 y' A  } else {
- [% E. ]4 W/ j; M. h$ g    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

* k1 X. }5 E+ x8 J+ `  state.displayValue = formatNumber(state.printVal)
& }7 }" g5 O, O/ U( `' J" L  if (progress < state.localDuration) {
8 J$ X" P& f! ]9 D! a( r' Z3 Q& V    state.rAF = requestAnimationFrame(count)
  } else {
3 S5 A0 g/ E* M6 y$ D9 ?    emits('callback')
4 `6 z2 H. w" F1 `0 a6 O  }
! q; @0 d" m' Z2 _" Z! {. e}
, X4 Y5 n8 m+ x" h6 {+ x// 组件销毁时取消动画
$ j3 f! X% x1 q1 u0 Y3 l& f+ {, c/ XonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
$ n9 e" U3 o) {1 }, X</script>
* r& b' x2 A, O7 A; L
! W1 }' O- D( d* x1
2
3
. q% A/ |) @$ }: V) F3 J4
$ m' |: q8 I$ {7 m5 Y6 D8 q5
' \+ q2 }) s7 H6
7
: ^4 H" W# f  l$ i& F. o8
) k& R+ z2 _$ Q, b+ V! D' {9
0 k  m; k+ ?* r* d6 e0 {* y6 [10
/ g! k) {/ Q! y" \11
12
13
6 I2 [- P! u/ s- ~% Y( B; t14
5 \/ P4 Q/ ?% q  [. J0 p+ O4 ~15
16
) l8 ?# N. \* L& M6 w  E& B17
$ S! U' c: S. l, G3 b6 c18
, U. f4 R  L3 q0 |# }5 \8 X  a+ y19
4 E6 X) H3 h% e' C9 U$ h20
21
22
23
24
: b2 Y) [" D+ R4 u9 z1 H5 X# v25
1 f5 t6 g: y1 I8 E; K- N26
27
28
( M+ `3 a$ b- O) v+ Q: i29
" E1 q' S$ _; F30
31
32
33
34
35
36
37
38
. \* k) s: J1 g% ?39
( S2 M) X, t8 a# L40
41
42
43
- c& B+ W9 u- p; n44
. F, b8 y; P: L) J, `7 t1 F45
46
47
48
" L1 H1 S3 B, Q  U' ]49
3 a. \0 [  e+ O( [50
* W# t0 G: v$ ^: {5 v  L51
52
& O3 `# K) s: U# O) i; y  h53
54
55
56
57
58
9 P2 v/ w+ V$ m' f; ]& m5 c( i3 @4 h59
60
61
62
63
$ C5 I% j4 y: r64
65
; D* z( [1 T" U/ k66
67
7 S+ n0 r9 y% A; \  ]5 ~+ z68
69
3 G" v# m. ?! Q) W" P  a4 d70
! b9 [" O* a- d1 k4 q7 G8 r71
! Z8 i% M8 t# m5 ^5 i' [72
1 `' i9 Y  T' W3 Z73
74
1 Q3 e8 g; A2 Z" I( R' |) b3 Q75
76
3 [1 {5 N9 x# K1 I77
% `, r' {3 n9 U$ l% Z78
/ r2 |8 z3 X9 d79
80
, f4 a6 N' T: o! `5 D81
$ I7 K, C; p/ N82
& i. `# h; F& w7 J83
84
% O' f! _4 m' u. @/ I; @85
86
87
88
# e, u; E: Z) J3 w! i% n89
90
91
  ^- C' U! l* \; e  X5 r92
93
94
95
# f* E, @4 }9 g$ \! b. y) L4 g' ^  y96
97
) q5 _8 J5 q8 v98
99
% v3 J# G( L6 @: u100
101
$ H; A! Q; q5 X4 ]0 n102
0 a# Z4 b, b4 E) l9 p9 E103
$ [( m/ E+ e2 X104
105
; ^0 T7 E3 k! C6 y3 b+ x# e4 n2 Z* S- n106
: Y9 w8 [/ P& G1 g1 D+ S107
( K/ i0 X" n5 E108
109
/ N+ D9 H  C2 U5 p$ [5 R4 u110
111
112
! b3 [% S1 p" [$ Q# R) f5 L113
  A7 t- ?0 [" D; [5 _4 n$ Z114
  [. z% J: a1 t" B. u- T115
116
117
118
119
120
. b; O8 G1 x" \8 a121
122
123
124
% ^/ Q9 x) h4 ~* N/ g0 _4 C125
126
5 [  |3 ^4 n/ x$ |0 V3 W127
& ]2 N0 \$ H5 q: C* e  F" R128
129
, k' b+ b* u4 m/ z, G% X" @; r- T130
131
- w" k! r3 ]/ R2 M6 O  A3 q2 Q132
133
134
135
136
137
138
/ X- m2 r% c7 [139
140
141
142
143
/ }  {5 {% ^$ F8 b- s) N144
145
146
" F$ u0 }) I7 i1 i9 }2 T" R147
148
) \. o5 C) Q- l% v+ }1 Y* ?# d149
2 {# i* i9 m$ R9 j0 w+ S% c150
- x2 |! \! s1 T; j151
152
153
154
155
7 t  j- I( J* _" G- ]156
5 A; n+ s# r1 u6 E1 A) O* [( G! }, ~157
158
1 o  f& t' G* i7 t7 [0 p* M159
6 H& _& A8 g  i  G: k4 B160
161
162
3 R8 t& N; x- r163
164
: m" w  N$ s% `4 I) z0 {2 n7 C165
166
167
- R; D2 o7 F$ F+ Z! O/ i' s168
169
, F, K' b  F, }  B170
9 _3 L: R$ M1 N171
. p3 P) @& k5 _, m0 q/ P172
( @6 z" Y  B; P173
: U4 _( M6 i: Q! ~8 s174
- Q; I, u* f) @( v  X: D175
- L1 W2 b! [- O9 p9 j0 v176
) H$ \" E6 z: f) q) O177
178
3 _* h! t; y) z179
, Z' G' j5 a, ^# z180
181
182
0 {2 p! B% R+ w6 a5 q183
9 z, t) k" w, y* k( o9 e7 G- }184
2 I5 c7 t8 w- l; j% h185
186
187
5 D( T/ X. e, _188
189
190
8 b& c* c" E* N# a" ?' H' R  U191
192
193
9 k8 g& q7 K  i194
, i$ l3 A+ N# _% T6 y  S$ U9 [+ F195
196
197
198
7 H8 f/ i( t% }/ c8 D) ]* s# {199
200
201
202
6 G# i) G' _! r. K, \总结
: I7 K: W! G; R# k1 b7 V# r" ]6 C自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
后续的线上demo演示会放在
' U$ T; J2 d( e* l0 J1 _demo演示
3 x* W3 i6 E0 \: u$ D& M! K完整代码会放在
7 x- [7 y; a; j3 u' P; ]- w) Z7 f: S个人主页

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

0 F1 m9 s! u5 Y" y9 Y) w8 }# w  z个人简介：承吾
工作年限：5年前端
& F7 M& B/ U) \/ \. [/ F0 s1 @5 L地区：上海
5 q; x& Z" f7 K$ u, U个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
1 m5 P/ ~8 r- h$ D
1 d1 ^4 h  R1 v" Q/ Y


" Q. |' q" x% O( J) n7 x————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847