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

杨利霞

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

前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
1 r& O2 Q  F% _的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
  V* k1 E' P. [3 ?* ]6 j2 p! U

& n' f7 R' f4 _思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
( O8 ]! H( ]$ m" s1 f. r
文件目录
4 ?9 F9 R- ]7 p) e
$ p' h" L: X2 P4 b) V
9 z) N( k; V0 f" N使用示例
, B, e! O3 B5 {* T<CountTo
4 x9 \# @) n8 {* H* u :start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
5 v' ~, w6 ]+ I& F# {* X :duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
- g. W- }* t* w3 W  [ />
6 _0 V2 a* t. E+ I0 _! B4 C1
2
3
4
5
- U. v" H9 {# U* s4 K2 ^. P6
1 N8 M/ V7 }! Z* t0 ?4 `7
8
6 c1 X+ p# x' K: K# q入口文件index.js

; W; j. @6 |5 @2 Gconst UILib = {
  install(Vue) {
    Vue.component('CountTo', CountTo)
' p/ k! \; x" I# N  Y5 L  }
* S5 ~3 M, e, {( Z3 w}
# T# i; _$ F5 J7 d( x
export default UILib
6 u9 P) v- Y( B2 S5 y
1
2
7 u0 E* K5 p! x# T+ L' Q3
4
5
6
7
7 H8 o! ]- X' \' o1 p; k9 |, w8
% G, G% A4 S  }* O; D9
main.js使用
import CountTo from './components/count-to/index';
; _8 }0 e  j+ Mapp.use(CountTo)
  M- a* @9 @9 {6 f8 Z1
* e1 f# |! `) s4 B- f$ e- R2
requestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
6 ?( B! w6 r7 d$ H! t如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
! L, x1 O/ ^3 ^8 i各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
: a% O4 c7 w+ ?9 t& \' {4 h. e增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
: ]+ r) D- c0 O2 z) z2 nlet cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
6 A# O; ], @) E% M  J        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
6 m) i: `4 C$ a- t( G" b    }
1 y: @# ^" Z2 n; l1 _7 u9 |' F0 ^
  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
; p* ?1 n$ n9 x. W& a    if (!requestAnimationFrame || !cancelAnimationFrame) {
4 ]( }4 Q( }$ r        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)
3 |( k% B' u) z% ^9 W- f' H" W            }, timeToCall)
            lastTime = currTime + timeToCall
$ ]8 q% o/ [3 m3 X            return id
( h" R, T' J, y' V        }
& i; M* B6 J9 ~( l6 w: |$ B
) O1 k8 W& E% Q" o  c  g% n: ?        cancelAnimationFrame = function (id) {
+ S- w) q! E. P9 s- \, f            window.clearTimeout(id)
1 c8 q' C! Q3 _$ F  s' @        }
5 _, I7 J$ D6 X6 E1 k) `    }
# b' ^) _1 v, _
* m. q. h$ v* E2 G, a$ A) n$ f( {( t1
0 S, W+ r. k1 E3 P2
0 G" S! x4 N! C( G7 v: X4 h% Y* Z, m( H6 W3
4
5
5 }2 O( ~! [, X0 [: Y  y2 f1 J4 B6
. y1 m7 }# [2 b: B# V7
8
7 W: f1 Y+ _; ?% k9
10
11
12
% r0 z; S1 A# X* J13
14
) W+ X; f) z, b" Q' o15
16
17
) Y, o2 j) D6 W* S3 q7 W0 i$ j18
; `/ W/ R7 B$ w4 ^, w. [19
2 m! p8 k$ a( f20
21
7 R8 \' G1 t& p9 W# u( i22
& T# |0 L7 k" o9 h/ Q23
- {$ a) ^9 z! c/ J8 d, J24
25
' T; n  l# ], K0 e4 C" E26
27
/ O$ ^. |& o, j2 ]- x* N28
29
' l- Q1 ]9 c4 E  M6 W* {30
! C6 L& I/ _2 _. P/ b31
' `2 m; C! \* f' |. z1 ~32
完整代码：
. q# f$ x+ X" @+ _& {; L* xrequestAnimationFrame.js
: \* L  Z# i$ X4 e
let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

let requestAnimationFrame
/ M1 _) U' j( U1 F6 j7 zlet cancelAnimationFrame
0 `# q9 K1 b9 l2 z/ G3 q
// 判断是否是服务器环境
4 e' C+ Z8 ^0 ~. T. ?0 D% o3 o* kconst isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
        return
: O$ ?* z5 J; N: C- D    }
% B3 f- i. m- M* w* v7 L8 @; s+ i" H    cancelAnimationFrame = function () {
4 P: ~+ x  e' J% y6 |! _9 Y        return
    }
( i+ [. @1 |, u# G7 Q- T} else {
    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
; A0 t+ p) M2 b0 b( Q    let prefix
/ [* \9 I" W; d& j- _$ p7 I( i* _    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
6 S! A) \7 C& F9 p        if (requestAnimationFrame && cancelAnimationFrame) { break }
1 N4 B% [' t- d        prefix = prefixes
) j5 W, H6 F: H% l7 Z1 e        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
; k0 A9 ~. ~, G! t; t/ V- p5 z# t        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
7 _# F8 p5 d: U. @* _2 u    if (!requestAnimationFrame || !cancelAnimationFrame) {
" @0 x. o) q; Z- i( Z. r4 u: M        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
3 |: k' y! j. Z            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
- B3 Z1 Q  n" T: `            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
& F8 S, m) I1 S% `& m            }, timeToCall)
            lastTime = currTime + timeToCall
" V4 @3 V3 a2 Y3 l            return id
8 V* F+ l0 B# G' r1 O# z0 `        }
% w" I8 u. P4 K9 \6 O) f& {
4 M$ B% H7 e& Z/ r9 r        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
    }
}
. a0 V  o1 c9 G5 l; V; C' t
export { requestAnimationFrame, cancelAnimationFrame }
' W' E" V/ _% q6 Y3 h

3 f. o) S  Q8 O& B1
# q& T) m4 U8 I* H/ t9 S" ]2
+ U/ U7 F# d7 @" D0 r3
8 C# r$ m2 Z" W4
$ @) v: Y: z; I: u8 T, K5
2 q" a# t2 h9 _& @5 Q/ b1 S6
* {$ s3 v4 B8 r( z5 }7
8
8 D/ q/ X0 C4 r' L& Q2 T, U9
$ C0 q5 V! N2 x10
11
12
13
14
15
16
17
' O# B  m" V0 d" v+ l; J% g: G: h! p18
19
20
21
22
# u: U8 ], Z6 `4 Z23
24
25
. K# M6 ]9 O6 n26
27
8 j" [1 |# }' d" {% @28
29
30
31
% ~  U( o1 ^4 K% c32
33
0 c# Q: N' G$ n% z" z34
+ w3 _: L4 T( X" ?0 S0 v% g35
36
37
38
) h% t, N; s7 Q! Y39
40
% Y4 N9 P5 F9 O41
42
1 _1 l6 |) J8 S9 Y43
& h2 n$ R' t* a* O. C2 L44
45
46
47
. G3 B/ v* U6 q6 I8 r% u% V7 @48
CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
' W7 m$ X3 t+ A& w- t# _. b
+ n, Y6 I- M  V2 t0 D3 T引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
需要接受的参数：
+ |' U7 E* q+ o& j; U. e) I- l
const props = defineProps({
  start: {
    type: Number,
    required: false,
    default: 0
  },
- m* K: o* B5 j: V% p  o3 w  \  end: {
9 w% d, F5 T- V    type: Number,
0 ~0 B* @' }3 G  K% r    required: false,
* x4 S5 B; ~( o, k) o9 ^" P    default: 0
3 C1 u: ?1 z& q+ E- y& ]9 }$ [  },
+ R4 Z$ f" ]& }+ M  duration: {
4 \& d# b" ]3 [) [    type: Number,
8 q) M: G( X1 X# j2 c3 l0 |    required: false,
) B! @' d' _5 k7 M7 e% P    default: 5000
9 t! v& R6 y# H4 x5 a) u  },
* d1 K# _9 O8 _3 @7 e( ]& k9 e  autoPlay: {
    type: Boolean,
9 O2 k. F8 J3 ]% `$ L    required: false,
0 Q# @0 |! n0 q$ v9 B" Q8 [    default: true
. Z+ x8 q  O. W+ f* b9 C2 S) K  },
7 Z+ ]' S  p- |  decimals: {
    type: Number,
% Q8 P' |, R3 E$ i! ]/ T* q3 f    required: false,
    default: 0,
    validator (value) {
, C: ]# E0 c4 `# p( z      return value >= 0
, K) k! V" [3 W: R    }
5 Z9 Z: q9 h& i, F  {5 B1 k  },
# i' h- U* q' T  decimal: {
6 B! Y! F5 l! j    type: String,
: K+ C' Z& I0 O- R7 K    required: false,
    default: '.'
6 b* E: H, f6 L" `0 r$ k: x  },
  separator: {
    type: String,
    required: false,
    default: ','
& |$ d6 w1 t  U  },
* y2 U2 j: u: k6 b4 B3 b7 @+ e7 p  prefix: {
& K6 B4 c; x" L! _$ |    type: String,
    required: false,
, e  H2 ^" z2 I/ m5 q    default: ''
# p( ]! b7 a! T$ U) @  },
  suffix: {
5 g; p0 F; W( ^+ y* f7 d) O& h7 B    type: String,
. X, G6 ^1 g0 b    required: false,
' B0 F6 i* a' I" b    default: ''
  },
  useEasing: {
# o1 I8 W, x; ]8 S' x    type: Boolean,
    required: false,
    default: true
  },
  easingFn: {
7 a' g) N/ b  K% v  ^. u# j    type: Function,
    default(t, b, c, d) {
, N- C$ C/ u6 ?: Y: l      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
7 a3 o( V  I  f- g/ r' W    }
  }
})


- e- h; f& T8 I/ G# k$ [1
, Y# S) w6 n9 ^7 W  m3 ^% }. a; s2
3
4
5
6
7
8
9
& X4 `  m! O8 K# O; L10
11
  L! x5 h  u) H) n12
* Q7 ^+ a& _5 b13
8 ~4 a8 q! ^* a( {7 q# D# d14
15
' I( }; W% [9 z5 X$ S7 K2 r16
17
' p: a" G, N; W5 h18
9 M# j/ z5 J' E! F5 i19
% W& \- M+ p- g/ @. N( H. w9 T# M20
+ C. w& r5 z9 H21
( b1 G9 z* @' Q. L22
23
24
25
26
27
28
29
30
31
  M) ^7 P& k" W6 _3 R' N32
* \1 Z$ ], S  Q. w2 a33
' E2 K9 a5 ]4 x6 F/ m34
35
36
37
# m# e, Q. {; b  n9 p5 [+ M  @38
+ W. q0 F  @8 |2 R& ~5 ]39
' u+ u0 X: U. L3 M2 }40
" }( s- O3 Z  ?* z( {- K& _) T$ c41
$ w7 \+ h: ]8 \2 ^: b4 L9 }5 D42
43
44
45
46
# B: P+ ]6 y$ X0 j" {. f47
0 U/ T- U: r9 N& X48
' D1 Z' p5 M$ x: W" K. N, h$ g4 h/ T0 A49
50
9 Y8 E7 p( \; C$ F: d4 n51
52
: Z1 Q3 A6 T3 r0 h4 R7 B$ m% V% t53
* ?# f9 ]/ Q; _+ b. W! F8 u54
- y. W0 {! M  s+ V55
56
2 G- ~; i0 Z7 ?& T2 @# u57
58
59
60
) m& a; [/ Q4 `- |# A) |( t61
62
启动数字动效

const startCount = () => {
( O! O- z# `7 _  r  state.localStart = props.start
8 c; F/ c: }7 x2 W5 _$ r5 V  state.startTime = null
# b  y7 u" c8 d: i: i4 O( l- m9 m  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
* n' T& X1 u8 M1 h" a}
* U9 p" @; [: _2 ?2 K1
% o, _5 |9 G$ d. T8 t2
" _% V& G3 K$ _' W: B* X1 B3
7 O) F, o1 J0 s/ d4
1 O6 y& P8 o: H5 p4 }5
' ]7 t& o) e( X5 f2 K- M6
7
% {9 w" t  X" f& E核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
9 J! |4 ^$ m& C/ H- M6 W5 ]+ ^  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
& u0 P$ v; C, }% n1 ^      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
! U) _7 y: ~% T' N2 r    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
# F- z  [- N" x( I7 }    }
& B% v6 P1 V7 e6 i: U. G  } else {
    if (stopCount.value) {
& z: V/ J$ q4 T4 L! N      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
( d& b9 M. ]# G" @  ^5 k8 r      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
! e5 p1 N5 t; e5 e    }
  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
4 a# x1 [# ~: F( U    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
# E2 H8 Z& t1 u, s9 o- F
! H4 t( I* O( l3 l  state.displayValue = formatNumber(state.printVal)
* M( w9 ?8 ?. b9 W2 |  if (progress < state.localDuration) {
9 r2 O% n# y$ O    state.rAF = requestAnimationFrame(count)
  } else {
! F) I( P4 w) u& i    emits('callback')
# @9 X4 t' t: \/ o+ K4 v, p4 ~  }
}
* \: O- q% m8 X% e; R

0 J0 c' y) O/ k9 r) N+ p// 格式化数据，返回想要展示的数据格式
  G6 j8 s8 z) Jconst formatNumber = (val) => {
# H# |: w  {. ^  ?6 t0 U  val = val.toFixed(props.default)
9 d. q3 n) s0 H$ _, l8 o  val += ''
$ u2 k. X& d/ c3 r& Y  const x = val.split('.')
& O* q* Z) M: v, Z" i" E; k9 A  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
- \7 K7 d  s  k, T  const rgx = /(\d+)(\d{3})/
; Q5 y  O6 Y$ r: h2 S2 Z  if (props.separator && !isNumber(props.separator)) {
9 L& i& {5 d& |$ X- _( s; C    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
! A/ |/ C8 I. K" b3 S  }
  return props.prefix + x1 + x2 + props.suffix
( f7 a& g4 S3 I/ E# W6 K# F! T}

1
2
3 J; V( z; A- }7 X2 K( @+ F! J* k3
4
5
8 a/ D' @9 D; C" n( g8 `6
7
8
+ S+ ]9 u( [" p) o  S3 D/ f+ k( d5 J. h4 L9
7 n% k: M2 S$ ~- W10
3 h( f( V$ T4 q4 ]11
12
3 T: h7 S) x5 q+ }' b% ^9 d  }! ?8 v. [13
" Q  w1 o' y3 Z/ f5 y/ Z14
15
16
17
18
19
7 e6 Y+ B) M9 q$ W4 Z  C* E4 L! B20
21
* ^* q* N) h; @: Y# t$ M22
7 K, R+ S# }. f5 n8 ^4 m23
+ H9 j- ~0 k7 w9 N: d24
25
4 A+ f# n4 F/ _; M5 `26
  b6 s" u' h1 a4 R- ?) i27
28
29
: m6 s$ ?. R2 Y; t+ U6 X" M: Q# F30
4 O# ~4 {3 i' A31
/ o4 r# E: O" w; s) ~6 ?9 s& T0 T32
! c1 j- z3 q7 e/ n$ t, E1 j8 @33
( v, V' H6 u' q9 ?34
35
0 B0 o3 F8 {+ K/ @8 r36
6 r, z. D$ f% X# c" ^8 T37
; S, A2 L! a+ ~' L' ^38
& U5 E/ |$ v" h, h1 w0 ]39
40
41
42
/ h( x2 t+ ]. T9 r1 K7 j2 Q- q43
44
45
46
* q, E) N# f+ ?$ ~47
48
8 Y; Y: _* b, C# N1 i5 a, x2 v; N取消动效
, q9 B; x: K- z1 x
// 组件销毁时取消动画
% I: X3 _7 n0 u: \) u; |onUnmounted(() => {
* C. u0 Q0 }# K8 k$ p7 }  cancelAnimationFrame(state.rAF)
9 _$ ?8 X5 L6 u) p% L$ Q})
1
2
3 `" x* b1 H- J5 r; j  {4 U3
: H- ]8 l' L6 U0 g1 t4
: f8 A% K% s6 k  @完整代码
4 R3 |8 k0 Y9 ?. X7 r  K2 b
/ W1 _5 s  @$ m$ ?5 V, d; Y<template>
  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
7 I  ~) @4 H! q$ I$ t: J! Dimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
/ o. i# N/ X- I2 \( ?// 定义父组件传递的参数
const props = defineProps({
  start: {
8 p' v1 q3 p6 L% ^* t6 F    type: Number,
    required: false,
+ A0 E- f8 o/ g- _0 ]    default: 0
  },
, ?+ v/ t7 X2 W9 {' E1 T3 Q8 G) Y  end: {
$ G7 `$ d7 N0 \7 u    type: Number,
    required: false,
    default: 0
1 i  J1 F( L* J: d/ {  },
  duration: {
    type: Number,
, }) m3 }4 f. r9 ?    required: false,
! N( K' J0 `! e    default: 5000
  },
  autoPlay: {
" v8 y' c: {5 \! d, |+ {    type: Boolean,
    required: false,
    default: true
# M3 {, d/ f* A( F  },
3 ]2 m; U. z8 m- j4 g1 d: Y" Z  decimals: {
    type: Number,
! p7 t/ a. H9 _5 o/ v4 s    required: false,
4 i- }# E5 a: N2 @. |    default: 0,
. b, Z& k) }, j/ Q& M    validator (value) {
$ Z% A" _! ?2 ^- D      return value >= 0
    }
6 U: a8 H/ p' w; W4 |, J1 ]  },
  decimal: {
0 ?8 E0 u: \5 b0 A5 R    type: String,
    required: false,
    default: '.'
  },
  separator: {
    type: String,
    required: false,
, M& S4 N9 u. X    default: ','
/ `7 X) H( D8 G- P6 H: A  },
5 `3 u% Y, j* I1 \  prefix: {
    type: String,
5 t3 k1 z2 B9 d( ~; L2 m    required: false,
    default: ''
  },
  suffix: {
- Q3 Q' |: U: Q7 X) B; U" ~" u6 a    type: String,
    required: false,
" x1 S, G. f4 v    default: ''
8 ?0 G6 t1 i# }% S  q/ t5 ?& v& o  },
  useEasing: {
8 p4 \% [% l) l' A2 S    type: Boolean,
: Q, G2 c# M$ f+ ~/ D9 o9 b, R    required: false,
    default: true
6 u0 L9 ~( i9 @' a. O  },
  easingFn: {
# a! y' p# |, z6 u, N! |; y( o    type: Function,
8 }7 y/ F! P4 K+ V    default(t, b, c, d) {
& R4 f  E7 }7 R      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
7 p) s5 o; }: F3 |- X1 h8 Q) x9 s    }
" v2 f! A" ]& s, i! j  }
; ~- J9 U5 L8 a! W* P/ [})

5 |* G, P# J. H; D- ~" s8 Z, f/ mconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
}
" _8 l9 {! Q' r) m
! S" V# s2 u7 ~  ?( f, a// 格式化数据，返回想要展示的数据格式
; n1 q, i) y$ S9 y" P7 B' Yconst formatNumber = (val) => {
4 P, q9 R" |0 W* G2 J. l  val = val.toFixed(props.default)
' t; E* S. m! C6 v' O( `6 J  val += ''
& Z$ h0 \3 o) _! |, v  const x = val.split('.')
1 y: l" X8 y" M2 i; A  let x1 = x[0]
3 S2 C% L7 j# V; r' ~, M1 Q/ T/ x  const x2 = x.length > 1 ? props.decimal + x[1] : ''
, J9 y$ U! ^+ {, ]7 W  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
- `! n  w- ]! t5 {$ h3 P& I    while (rgx.test(x1)) {
; c% T* H1 T$ @      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
. X" s8 L/ X; r) {$ d7 S  }
" ?  x" J8 X, ]% l1 m" w7 [  return props.prefix + x1 + x2 + props.suffix
4 [% z- l4 m4 e( o- j2 _}
. n1 Y/ \! B- [+ u" K
// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
  printVal: null,
  paused: false,
6 V8 i" I$ w1 B4 w9 a" X8 Q% V  localDuration: props.duration,
  startTime: null,
6 w) }8 Z+ b& b  timestamp: null,
- E* T* |, H9 K  remaining: null,
# B2 e! u9 ]2 {5 [  rAF: null
+ X; F/ M0 y" E! S3 j})
0 S% V& ~6 k. Y7 m4 y( T% X  t
// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
5 C. P+ t4 D  v: N. s  state.localStart = props.start
3 d  i5 ^1 i6 z% ?$ e+ o8 q  state.startTime = null
1 P6 X* [" _# y% _* x  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
2 a  m- t* I' R8 i}

0 O* L, `0 b. P9 C' _" a4 Uwatch(() => props.start, () => {
3 e1 a4 B; B! K0 C. x* p  if (props.autoPlay) {
    startCount()
  }
2 u% S8 u1 E  M" @- Z6 s})

5 g+ w$ c" e6 `3 j. k9 _! `; Wwatch(() => props.end, () => {
2 Y4 I) R( }; |  if (props.autoPlay) {
% ]8 V) i6 Y# W2 U    startCount()
; K, o- G6 v# J( K* c5 i  }
  `; _) F: ^: p% G( [  n})
$ I! S+ s/ l0 }4 O// dom挂在完成后执行一些操作
onMounted(() => {
6 E& i1 k, [5 R7 a; v  if (props.autoPlay) {
    startCount()
; N0 }9 n3 k+ k7 [5 G  }
  emits('onMountedcallback')
, {- B% v8 h# r9 n) L1 C})
// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
}
# L/ t0 v/ m- {# d8 a0 k// 恢复计数
1 F' ~9 x' P% x( `; z: U) vconst resume = () => {
  state.startTime = null
+ ], d$ w2 G( f2 ^! H6 [) O9 s  state.localDuration = +state.remaining
- |" Y/ I3 ?* j$ D5 s2 x  state.localStart = +state.printVal
& l5 {) v1 j6 ~' s9 j  requestAnimationFrame(count)
}
5 y+ ~4 _( S6 p# V9 j; L4 }
const pauseResume = () => {
  if (state.paused) {
    resume()
9 ?1 M6 ?  {7 s" i, ~    state.paused = false
  } else {
) Z4 u! r( a; h- G3 e    pause()
    state.paused = true
& Z  s) l* Y: K$ ~. R& I  N  }
}
. o- ]) i, n4 I" ^/ D" l, U) g% g
  F& u) |' z9 E+ }0 D+ gconst reset = () => {
  state.startTime = null
9 e( x6 N" O% t6 u, C  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
}
# k, c+ u9 z! d  a* g
) M+ \9 F* r: G/ a9 V9 ~+ E1 r! lconst count = (timestamp) => {
" N# o7 y3 {, v  if (!state.startTime) state.startTime = timestamp
2 u+ i" d+ w7 ^2 _) w2 ~$ m  t  state.timestamp = timestamp
1 K1 d( r+ o6 ~7 u1 {( d8 V  const progress = timestamp - state.startTime
4 x- }4 c* O& s5 V1 B  state.remaining = state.localDuration - progress
* g  z2 B* ?- k( a% d- i3 a  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
( o' ~8 K8 w3 d! P% f( h7 O$ R* G      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
* [/ E) l' ~2 S* \; N; i. x2 z    } else {
3 J: w# l9 J# v      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
; w. ~- I$ i! Z    }
: u* |' W' i* m  } else {
0 f3 E! V/ Y3 ^; {0 c. u    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
" }) F) [0 \# \; q5 J  }
  if (stopCount.value) {
- t* T0 Y) b  U4 C5 o% z/ C0 v    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
" F4 F, e6 u$ z7 a    state.printVal = state.printVal > props.end ? props.end : state.printVal
3 D7 b; Z+ u, }+ x, g  }

2 @6 K/ x5 Y' r1 o3 l- y8 `; D  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
# r! r! ]; n/ [8 f( B    state.rAF = requestAnimationFrame(count)
" }) X  c5 p" w$ k  } else {
    emits('callback')
  }
( p, f% G) s9 t- T; R. G}
6 ~8 q" n" T" s( K: b// 组件销毁时取消动画
onUnmounted(() => {
1 t2 w0 B% B' Y: S$ [# }! |9 I4 Q. M  cancelAnimationFrame(state.rAF)
- O0 E7 O# ^+ M) V) y})
</script>

1
2
3
4
5
2 X, j; S# g; f4 \' R% k6
7
8
9
10
* T; |. b1 G) d8 F: s" A$ c& [& f11
12
/ q' |7 `9 I. ]3 q+ p. g( O13
- F0 ~! G, b* L$ l7 m- v14
15
* ?' p& t) J# Z) V5 T" k16
2 p! M. P4 L7 P2 F/ N9 O6 m17
18
19
20
" R3 g& X: C5 X$ v0 n2 j- L% n4 Z21
22
23
: x5 Y5 I' D% E+ A& Y24
25
26
27
28
29
8 ]9 `; Y" t0 F30
, J- ]7 a, J: o/ i2 r31
32
+ d1 E# B  |+ s, V33
/ Q' R1 K' b8 Q" t  T34
- O1 i# U& S  s8 Y) D35
36
: q4 t" S, b; x. s8 u: G37
38
39
0 V! o6 _( o* V3 f5 u( F40
41
  e3 v0 X! M) l- F42
3 ?& f  v  D. ?+ z43
44
  O, p- U8 p. Y4 M/ p5 [5 {& X45
46
47
48
49
50
3 i  Q0 r* d0 q  f5 F* n+ k51
52
53
54
55
" m) r0 k" F+ Z5 U. h56
* ?- i4 [% N8 t: K57
58
59
) v4 Z7 Z! P$ W& z# D8 g, M60
7 `6 U: C( s1 J) q61
; ^1 J, r  ~: w: w7 S62
63
9 N- Y/ T( a6 k. K64
0 D7 I6 M/ q9 w* u+ f" j65
" o/ I  z1 B; y) q# z66
! C' `0 E0 `5 q* G! u0 ?# ]67
5 D  v; v8 W3 k# [4 b- q# L; @+ E% p68
69
70
71
72
* s: D% T& }' x3 i73
74
. M7 o( l, w. A8 u; j75
76
77
) r( [' C6 m0 Z$ g! Q8 f78
8 x5 Q" z! _$ V. z3 J79
80
81
82
83
( Q- g( q# B5 \# `84
85
/ T/ b; n- Y4 T! q# d86
9 v8 P! s( ^2 d0 |0 ]8 T$ B87
/ {; y; y5 `1 j+ B; W* V; o88
$ m1 N+ u' @! D) K! J89
90
) r/ s3 |# |" ^9 p/ `" l91
5 S" h+ {3 ~" g92
93
: e2 o( y) @3 J: k" L- z94
7 y7 r5 ^2 |& m" H95
/ e; W5 S- t7 F- j& j96
97
98
  a1 v$ c! ?6 ~; ~2 i99
1 N& d) d) I& Q% i  `100
101
( e( E$ B! `* @( O( {+ `4 ]  `$ y102
! A0 |: I0 c+ r, [103
104
105
106
* s* e, l% k2 h1 Z0 L107
6 P; K" {* D8 \; P8 J108
' H8 c* l; }- V9 s109
110
4 P* p% g, Z! I% d: I3 A111
7 a; K; N* H7 e  X' A112
8 _+ R. |; y4 F8 K3 H* x113
, j' d% ?$ a8 |114
3 {/ |$ P' \: ^115
5 ~6 M$ v. b1 u& I  N* G1 [116
117
118
119
120
0 Z6 g+ l% g- I: ~121
122
123
) V! S0 @, a4 B, {$ h" L6 E" H/ G6 Y124
0 q% M% P( S( ^9 G2 j* d125
126
* V4 m7 u! H4 O2 j- \2 N127
. W; C" o, i# m' r! e128
129
130
5 {" t# w" J! U* d0 B  R& ?131
132
133
134
, q) w" b. M2 R- |0 }135
136
/ w3 r1 F+ L5 d# z; o- @! {7 u7 @  T137
138
+ w. U  r' _; M' N1 E# x139
3 ?) k6 N- w8 @! F8 A8 {% u140
% n. E$ v7 X! R/ h. u: d6 _141
142
' A- j9 |: S9 {3 o( G' ^9 f; S143
144
145
8 o: t) g8 i( g. Q4 p0 W& p% t4 K146
147
148
149
150
. P7 {2 H9 N! H* ?3 e" d151
$ c  a& b' _, X7 R/ ]' ?1 e' f- J1 A152
" H" l  N( \5 S3 y+ x* r* N5 y153
% u/ G- Y: A- |154
155
- ]: Q% i. K0 q2 ^: X6 @7 z$ O" r+ |156
6 M! e7 G5 Y' Q4 L7 b157
! ?  |, w7 K7 `$ X" b7 ~: B; V: e158
159
160
# @# ?' E+ e, U' B. J+ H' n. m161
$ y: z; F  u3 n& o9 k162
" ^' I1 M1 r* H  ]6 x/ F163
164
165
166
167
168
169
* n" w8 R3 _  S. N8 j, n170
171
172
173
' [1 H; I) h( B9 u; K/ Z1 N174
175
176
177
; `! f8 l, k2 q; W) t178
179
180
181
182
* n4 c3 K4 Q# Y1 F5 d. W* h8 ?183
8 X; G# e6 k/ v1 T184
185
186
* v# j% _) g8 l# g187
188
189
2 R/ E) }$ E4 n: _! E% b190
191
192
5 v5 [4 K2 p# n: \% p. r193
9 @# y9 q. c8 R1 s9 f194
' I+ A5 s. A: v8 _( W195
0 b3 l# w) z# g; H6 x5 q* E196
197
1 r) t9 ~+ G( e4 ~9 s1 V% \198
199
200
201
  b9 V3 f$ J3 K3 L  B# ~3 Y202
0 |& W6 w$ {0 S2 t& @/ h总结
8 z! X, m& p- ?# Y3 `  A- \自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
( z& a: }+ x( j( q, U  ~# w
demo演示
后续的线上demo演示会放在
demo演示
完整代码会放在
个人主页

7 {9 v7 R' v& \, \希望对vue开发者有所帮助~
" k% a4 N, |0 l/ B# z1 t6 D
# K) D+ [8 [+ b个人简介：承吾
+ F/ i% |$ K7 V' s  W工作年限：5年前端
: o% _( M, R; P- `地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
2 z; z  ?$ Y$ O* u/ ~3 S. A9 D
; B1 j: T9 W9 Z


————————————————
" |& E  i6 s% n7 C版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
$ d( K7 e  q& s6 D6 S2 t) b  i原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847