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

杨利霞

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

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


* Z8 V$ u% d, \- T1 ~: S% P思路
/ Q) e: `# o; r) i( q使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

文件目录

/ j) v4 K2 f; f3 k
) y* G1 t4 F2 Y8 z* ^$ w使用示例
2 e- U" ^# }2 i0 T# a0 j. M<CountTo
8 ~" C& ^' \6 G0 a6 C8 v1 l+ G :start="0" // 从数字多少开始
7 X+ M; k# ?$ s7 E$ M: f. @ :end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
, _: Q7 n) g  p1 B" v prefix="￥"   // 前缀符号
9 I3 L' J3 t$ T  n# l suffix="rmb" // 后缀符号
/>
1
2
) W/ o4 E: L! {3
4
5
6
" M" O  y7 S6 W5 U7
! `; k" P$ M% j, g; L2 w" v8 k8
入口文件index.js

const UILib = {
5 A5 g$ Y# X) P& q+ B) a  install(Vue) {
. N9 v! L, Y* Z' [    Vue.component('CountTo', CountTo)
- E8 J5 u  r- R2 i) l0 Y  }
}

export default UILib
0 S* V# x, L2 W+ G
4 d! e8 n+ m1 a. }) J) f" c9 N1
& \( B7 s6 h: E, }6 g8 k2
8 L8 ?/ [, ^: l8 P' M0 Y% R& j9 I3
4
3 l0 f7 b+ `4 p' `" b! k6 Z; J5
* T5 I+ c" j5 d/ _' ?6
7
8
9
( X9 H0 j% r: J+ y, Lmain.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
1
9 L! `* b; [6 H3 L/ P2
requestAnimationFrame.js思路
% t% P: `9 b7 |, G先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
' Q6 [* F1 k9 A+ P' E导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
2 N$ t+ K# C2 {* r增加各个浏览器前缀：  
2 V1 g; M5 \# M5 q3 k, Mlet prefix;
let requestAnimationFrame;
1 [, f8 l! ]; k6 d7 ?let cancelAnimationFrame;
2 {+ J) {* G( X# D* _, \// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
7 O( u2 L1 u9 }' K        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
2 L! r" W: I8 }7 j. t- y5 I    }

/ Y# B  O, W5 @4 m  //不支持使用setTimeout方式替换：模拟60帧的效果
1 O5 C. w6 ]0 S  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
5 O: I3 A, Z7 M$ r            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
# H/ V1 H* j9 @& `5 \0 e6 b            const id = window.setTimeout(() => {
$ D: U. o$ n9 U' r) z                callback(currTime + timeToCall)
, {& k7 o2 M, H0 o5 H            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
        }

        cancelAnimationFrame = function (id) {
9 i5 r+ [) c8 i9 ]" X1 y& P% b            window.clearTimeout(id)
. _) q3 U0 v) F- z& Z" x3 |1 T& j        }
    }

1
6 ?5 c5 y* }0 ~' E: W- |" @$ C3 F2
0 c' N9 R- Q; C8 m( u3
4
5
5 s7 l. Z. {0 j& ^1 r) f( p6
1 t8 H2 z- w6 Z$ G# n  C7 {: T7
) ~. Z) I+ L0 c8 |1 y3 V8
* \8 A5 B$ K. S# R% u, ]9
10
8 o% v$ E8 ~/ F' _11
0 F9 e% p+ ?, `; u7 u5 ]12
13
4 R% a2 q+ q  E8 f: B- l0 U$ @14
15
16
17
18
19
  R  [: k- \2 Q20
* H4 i; N$ i7 z1 R1 W- Q' S21
22
23
24
25
: s* a) H! A4 o( a0 ?; q! Q26
27
28
29
0 ]4 v7 ^* |) x30
31
32
完整代码：
requestAnimationFrame.js
+ P( }0 [4 I$ H! V* ]
! j+ G# f& L" r: E+ Q) M/ slet lastTime = 0
( t9 \/ \3 o! ^const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

let requestAnimationFrame
/ d% K" u% |; R* H5 plet cancelAnimationFrame
1 W3 D3 e! F3 [" W8 h: x6 U
1 n: @7 S/ L; [8 E2 Y" [// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
7 {" \4 I" S8 L0 \: W    requestAnimationFrame = function () {
        return
8 e( n7 z; w2 X    }
    cancelAnimationFrame = function () {
        return
; x# w) M+ q" D9 U) ~    }
} else {
    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
: I9 V8 |& ~& g: o, m    let prefix
; c2 V9 ]4 D  ~1 V* x    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
1 P2 P5 r8 \0 ?4 Q0 ]6 F        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
6 M# J; K9 L/ E8 h0 ^/ N        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
2 B3 M6 }1 O# [. b        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
9 ~7 B. I7 F$ U# C4 l8 {  ?& w
/ }; s" X0 \# `    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
9 j2 E7 b5 O& Y( w    if (!requestAnimationFrame || !cancelAnimationFrame) {
! Q# Y1 D6 o! ?+ t3 O9 O- i        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
' w3 S$ r: f8 K( V3 q& J            // 为了使setTimteout的尽可能的接近每秒60帧的效果
9 L5 l% c9 g" e4 d7 w% @* m            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
8 G1 ]+ \' {/ k$ \9 k1 p            lastTime = currTime + timeToCall
5 @6 A9 P2 T1 o4 F            return id
6 {# Y! B1 W, v( O9 }0 b        }
1 E% [' o, E, X
; }2 u; l' {  V" ?0 Q, l        cancelAnimationFrame = function (id) {
% f7 E, I# \! t& `4 [. z& @- |2 A            window.clearTimeout(id)
        }
    }
}
. [8 T2 f% K+ D  N" G  T; l
& W; ?% W0 |% {4 iexport { requestAnimationFrame, cancelAnimationFrame }
. t8 R6 H7 B: Y1 o9 E! i
6 Q( V% ?; ^# X( I( S6 j
: w5 a2 q& e/ [' A: M! H" i9 g1
2
3
4
9 z" s! `5 S9 D1 q5
6
: W+ w' x) S: w0 b$ H% h- J7
0 r, Y8 m# {5 H2 s8 D& A8
9
10
11
( P  ~7 J* [/ C  f; F12
13
# D. s7 C  @' i% ]1 l14
15
16
% |9 m4 ^# y2 q6 W3 j17
* J* k  c' W/ W7 S+ V4 G! K4 F2 ?  w( R18
7 b' L) x2 t8 R' q" o) V* D: i8 t19
20
% E! C( c  _9 M! \. _' p21
22
9 |& W1 N& w4 q/ B, P  M23
24
8 b2 p( [' i- ~0 U( S, z; H25
. J8 ?) l% h% H5 F% K9 _' N26
27
4 c' W; I" J# ~: @  L28
29
! a8 J: k" g0 Y( x* C7 ~$ Z8 E30
4 B. X( ^/ e; u$ b! @- [31
32
4 b( V6 O5 h# N8 T$ i& G$ w( X33
34
35
36
37
38
2 }& H! j4 q6 B( C" i39
40
41
# [) a3 q3 ~% S0 [; r  ]1 H$ c42
43
4 [& H( X  ]; R& T6 X, \9 z44
; m. b# A; {# [% T2 O45
46
6 k! {7 x( k: Q+ \1 p47
48
; l- E6 s6 S# U8 D+ pCountTo.vue组件思路
4 H1 |5 F! ~! a! t% H/ R首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
& W! f' a" j$ K% V: u( \
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
7 _: I" V9 Z7 g  B/ ?7 q1
需要接受的参数：

const props = defineProps({
) O, o4 \8 Z# ?& ?: F; z  start: {
    type: Number,
    required: false,
    default: 0
% N' K0 Y) t# R8 \4 s  },
  end: {
% P  r7 f  g0 Z  L0 K  m    type: Number,
    required: false,
' L; p( V1 `! W$ c; B    default: 0
: `* y& D3 e$ G8 ^9 d  },
  duration: {
6 u+ ]6 `. Y2 @# a" @2 w3 r% \, s    type: Number,
    required: false,
    default: 5000
  },
5 k, n$ U; N& A7 v6 M; i  autoPlay: {
0 E& i( H5 r) m8 ~- H  ^    type: Boolean,
+ i; p$ v3 T; g/ v8 a    required: false,
    default: true
( \( B1 x$ h; f( d% v" U2 b6 U* A  },
0 S2 ]% x+ P# w& `, N/ e  decimals: {
+ ]7 S5 `7 y; V% Q, p, n    type: Number,
% k5 U& L. d9 V  r  z, d+ n    required: false,
    default: 0,
$ T5 f1 E/ K7 V- f    validator (value) {
      return value >= 0
- W% N+ N5 y# O1 s, k$ g    }
  },
+ p" N. @3 u; b0 ^- v/ }  i  decimal: {
. u$ I4 [. V4 P. R  G. u; z2 X' O    type: String,
    required: false,
" N1 o0 H% W, F( T    default: '.'
  },
  separator: {
/ `1 ~2 A! D5 i    type: String,
    required: false,
    default: ','
+ N3 a& `; P: ^& ^, q& l  },
  prefix: {
0 P) M  ]  p( K- o) j5 k1 v9 b    type: String,
2 Q* h1 p5 W4 Q. n% ~& |    required: false,
    default: ''
* z' x2 ]# u7 J  },
  suffix: {
    type: String,
    required: false,
    default: ''
8 T4 S3 ~& S* |! c% B  },
  useEasing: {
    type: Boolean,
    required: false,
8 G: W5 `! c! b: A3 {    default: true
5 O6 A( b1 x) G% a5 [  },
1 n6 E+ h0 m% {: O  easingFn: {
% ]7 ^, |+ h* R7 }0 ?    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
+ _* D9 k  d# ]3 ^( g4 Y& I6 C2 A})

3 _7 U4 }# x4 c9 H
1
, y% T+ N- f+ A# W2
  ]9 ?0 h7 o+ S3 _% ?5 N6 m% \$ M9 h3
4
3 {! E  N( x0 Y9 p5 X/ U- V: c5
6
. u0 ^( l. [% n) i  \! o) t7
" v% z5 T$ m) Y+ H, q* P8
9
10
& f7 i( \/ l3 g2 g11
12
13
14
# \$ y, @% s# ^! {3 O3 x; y15
16
17
+ N" d/ o# [. P. R8 U0 w# `/ \18
3 b+ p: Y6 o% h6 d6 s( J4 k$ E2 p19
20
21
3 f# Q* l( I6 p# t- j" p- r; l22
23
- p2 T$ Z( [0 h7 |# L) f- _4 A24
$ m$ }7 p" c7 J( ^0 r. m2 E25
26
. H5 q* p( L! v: L+ b27
7 X; v9 p7 H0 n% L. d1 _2 B! d28
/ ]: T/ @4 u) k. B29
5 W; o9 U9 Z/ K0 x, I30
31
% s6 ]4 ^7 \  L3 j8 B* t32
6 A2 g+ L& l$ Y' l* F/ m33
  t5 m% V, Y5 ^) W/ R7 d# I34
35
36
; S/ a& y' z% t. X; ]37
38
39
40
! i$ I  q+ c- _7 p5 Y; Q8 R" F  }41
42
. V! U6 |/ g- k6 z9 w8 Y43
+ }5 G$ Z: I! I5 y" _5 L44
& |3 D# d" D9 a! w& e45
  z9 l9 U; x5 }- l46
47
, W7 ?! F9 d7 p% _& V. ]: \' ^48
49
2 i% q. b. d# q, e  b) t50
) `! F0 t; H3 P( R( G51
52
; C4 s8 w6 b' J, N; S2 E& j: m/ ?53
% P0 _) {% z3 y8 p$ W4 m54
& J' u( e4 Z9 b8 q55
' `- Z9 b3 {! F2 L) j1 }56
# G$ K' r5 X3 ]0 `57
  y* r$ ^; Y8 w" R% t58
9 c) n$ o/ z  z* A( _1 W; @59
60
61
! Y( P/ M( D& s; u. A6 l62
启动数字动效
# t, _4 D) m' t1 f
7 b" d1 p! R9 G# }3 _const startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
7 v- P0 s5 a. q* ~5 G}
1
2
3
7 l  @. L  N% I* n/ n- j4
5
6
* l% d/ J3 J7 o6 T7 S) z7
- P2 p" Y  _1 b* }8 Y' f核心函数，对数字进行转动
' i1 z" c) Y6 V+ A) H" E- F
: N: c) C* N0 l4 T  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
# `# K1 {" h( s+ S  const progress = timestamp - state.startTime
7 {7 }9 ^( t4 Q% x8 l3 ?  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
. V) M! x, {/ }, [( @  if (props.useEasing) {
( ~/ G; z8 X8 q( W+ {    if (stopCount.value) {
3 q8 i+ U: G6 c4 |% g      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
- I9 p9 s7 p& X' X6 a    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
: u$ d* q4 n3 K, V, i# ~) g2 f' f: }    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
  if (stopCount.value) {
( c) U; h& r; F  g    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
3 Z4 N2 z- f  M* U) \$ q    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

/ ]- [4 G6 |/ a9 j9 e& y  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
' a& O0 f0 I- w6 s; u: k  } else {
; S2 f/ n+ s, y. ^: c    emits('callback')
9 H3 B6 \1 b4 J  d" G  }
: G/ u" q0 g4 j  _! w}
4 m" \# H5 s* d& \
8 A* Y$ _' ]! Q
' C" _, J+ W2 H& {& j7 F// 格式化数据，返回想要展示的数据格式
, p: _9 j' S& D# ^5 _3 x8 {const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
0 }+ Z/ h) {7 G& r, o$ G  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
0 H1 I4 \5 R: W! P  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
" J% M( M+ c' j% O    while (rgx.test(x1)) {
; [4 W+ n7 |+ }1 J4 _7 }      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
' |# ~, f- j+ \, E5 O( R    }
  }
3 @6 a/ z; @  R" |0 q  return props.prefix + x1 + x2 + props.suffix
/ Z5 |; j9 R9 K4 F" V0 Q}
$ i& s6 F6 e8 l0 P2 O/ U
1
2
7 i' c3 }  z4 p( v0 `9 w3
: K7 ^) S7 O/ d( H+ {4
5
6
3 a  l: f5 M7 K" n& a# k7
8
9
0 F9 m  y/ ~* L. S+ d10
3 v: r6 ^2 r8 M% s# o9 h( r11
12
& _" l: x$ L' J& v% H7 H4 N13
) d$ C1 L) \; J1 s" ]14
15
16
# c& {9 r" S! E17
18
5 d! E% m+ I2 i* }0 e+ V19
+ d( z. h% Z% ?5 X& R20
21
3 ]" L" w; Z. [- _22
23
/ Q5 x, Q( Q4 @. u+ j  b24
25
. Z+ m; A9 v, ^& b" p* S9 C26
. [( J3 C5 a: J% Z" F' K1 E% [27
28
29
+ [3 Y; x/ a2 J' V7 d& l; N30
31
5 Q& b' b* G# O+ x32
' K6 y+ _  J, e6 n6 D; W: O5 `33
' i& g/ F, I/ `) k. z) M5 {% C34
35
36
# g# T' Q: S3 l# T/ ?5 V4 |37
38
39
% }$ M/ @( M  U0 R40
41
! ]4 A  D' R/ p( b, |$ l42
4 q" \5 K- x" j: g* p* w: w& u43
  h7 P' t  d, E0 d, T44
- Z$ C' Y6 L! A2 g2 i  [6 H) E45
46
47
% T/ z/ |$ Z5 m# {48
取消动效

// 组件销毁时取消动画
! o2 k5 A  X2 i/ DonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
; u* m* I1 o) V. g3 J( D: M1
2
/ E- b, ?0 u9 i! f4 b7 ^( _3
4
: R; M0 G3 B" a6 Y0 m! w' A完整代码
) e( }4 F/ e8 b) W4 z( d' I
<template>
  {{ state.displayValue }}
9 a( S9 Q4 L; x: C</template>
( B+ \( [  g2 u$ a7 |! g; T
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
2 y7 z; \& l- e# ?$ R5 p: gimport { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
const props = defineProps({
$ M% ^* K  Y; a, U  start: {
    type: Number,
7 d. K. Z9 Q( J8 e% F6 q    required: false,
7 C7 v/ U9 V* z" I1 M    default: 0
* h. e* ^, r! _+ |6 j3 R  },
; }2 b% L7 S( Z6 `. h  end: {
    type: Number,
& s! q- p6 R& k9 {$ C& z    required: false,
3 A2 C2 o0 W& j: I    default: 0
  },
2 V1 P4 }. `. M8 \$ X  duration: {
) y, p& D5 k: t- v6 }    type: Number,
% J8 N) C6 p4 e+ ~& s9 X( e    required: false,
5 {- E9 b% A% b) g. T    default: 5000
  },
  autoPlay: {
% q7 c9 Z& j' H( ]; t+ R  F( f9 r    type: Boolean,
( k1 n1 U7 q0 e. j3 x' f    required: false,
, I0 N$ [( p% C    default: true
; T* `+ |2 Q  H7 E; r% \  },
  decimals: {
' i* K5 j8 O. Z3 H" i9 U$ ^    type: Number,
    required: false,
. o9 ]. Q: A+ _& z6 @    default: 0,
    validator (value) {
; X7 K6 f/ K# Z) `- e) B# X$ e# E      return value >= 0
    }
  },
2 {2 X5 Y& n. }' P+ a# D, h/ L  decimal: {
: K/ Y2 \+ d, ?  w    type: String,
# ~4 I7 e; Z6 L! C; g! g& s    required: false,
6 c$ l$ w; r! }" p5 o9 w2 m    default: '.'
  },
  separator: {
) [7 D) H+ M: p' j& P+ _    type: String,
( i* S" ?) e9 |7 |* C" }    required: false,
# G/ D& \( q  _3 V7 H8 w& D    default: ','
  },
  prefix: {
    type: String,
    required: false,
. B, [4 h$ b3 g    default: ''
  },
  suffix: {
+ s" U+ ]' }: D1 o' V    type: String,
    required: false,
' k" E* C0 i* [    default: ''
1 u% C2 v0 Q6 s+ y8 q' K% o( o  },
  useEasing: {
2 Y' I- r: e/ X6 W" N" `" U( M; l8 v    type: Boolean,
# q( C* }4 N3 J6 W  A    required: false,
. G+ v1 B3 f2 {# J' j4 y    default: true
  },
7 r6 z1 @9 H( t0 o  easingFn: {
    type: Function,
$ B  q3 t: Z) g: D    default(t, b, c, d) {
1 D, _1 Q- M; F. y0 N5 O6 b+ C      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
! y+ f' m7 b3 o# |1 @) v: r  }
})
6 `) Y6 `3 W9 q$ P! N9 C
const isNumber = (val) => {
+ C+ W2 @& h9 y. N+ b  return !isNaN(parseFloat(val))
) T1 e+ @! `1 E1 R! y% R}

// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
+ o& m, q" {' b- L: h  val = val.toFixed(props.default)
  val += ''
: b4 {% [. @7 u: @/ _  const x = val.split('.')
  let x1 = x[0]
* i) C) O) W& I: l& O  const x2 = x.length > 1 ? props.decimal + x[1] : ''
% V6 c6 d8 {: h8 t  ~) ~, B/ n" Y  const rgx = /(\d+)(\d{3})/
4 |" l: _+ q! B% n; X9 p  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
" J, n. a) d4 s$ P( L    }
  }
  return props.prefix + x1 + x2 + props.suffix
) S3 e) v( W, S& S8 W  R}

9 l* s3 S( ^* T/ A0 i5 a6 e  {// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
  printVal: null,
  paused: false,
7 z+ j0 t0 }, h9 O$ c# w  localDuration: props.duration,
  startTime: null,
& I: M% h$ @/ J  ^  timestamp: null,
  remaining: null,
$ j+ x) r4 |6 E* P) i4 A  rAF: null
( u" [+ F% b$ A- m* T9 u})
' s3 L; u0 U8 J! H2 }  O8 C4 M
; R& ^: w, c7 k! A/ Y// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
8 z! Z( R2 A2 O9 i  return props.start > props.end
})
4 {+ j$ l, Y% g. B// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
. j$ A% Q/ h8 B1 V7 q3 zconst emits = defineEmits(['onMountedcallback', 'callback'])
" [3 b0 I% v4 n' O
const startCount = () => {
) ?( C- |4 N) T- R  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
: s4 f3 Z, |* j! Z  state.paused = false
: I& f' _( Z& R) Z  state.rAF = requestAnimationFrame(count)
}

watch(() => props.start, () => {
+ F; m) W( H. ]  if (props.autoPlay) {
    startCount()
9 b% k& U0 S2 f/ t6 A9 @# T  }
})

watch(() => props.end, () => {
3 m% K( b3 l; x  if (props.autoPlay) {
    startCount()
: N5 s& K3 ^7 P$ }  }
})
0 f* B5 ^- d2 T- W7 Y* e! [// dom挂在完成后执行一些操作
9 I9 p. C. n5 O$ I6 ]- ^; WonMounted(() => {
& f" ]" Z! t; @- m' s! s  if (props.autoPlay) {
" L& Y+ y  `; G: ^    startCount()
  }
  emits('onMountedcallback')
})
0 j0 d8 T9 @' D/ Q// 暂停计数
. [) C, t8 }, X1 \& b' A9 `const pause = () => {
  cancelAnimationFrame(state.rAF)
8 P4 l, ~1 w7 H9 H- i' [- }# A+ I}
// 恢复计数
const resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
4 G# p; t# X5 ]- \8 U}
6 l5 `& W) D! m+ k  [
  B) s; V, [. D5 c4 C- S6 Tconst pauseResume = () => {
  if (state.paused) {
5 H& }0 E/ W: u/ ^  D+ G    resume()
8 R% ^5 W/ v8 R6 p% L3 N. Y( B    state.paused = false
  } else {
3 D! v6 K$ z7 i6 v" s/ u    pause()
3 P1 I4 j' [; M8 d3 ^    state.paused = true
) }0 c3 g5 @0 P& X0 Y2 Q# J  }
- C  I- i( c" Q}

const reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
1 u' T* B) m" K- {+ W  state.displayValue = formatNumber(props.start)
}

: q$ c6 g4 @" j6 o: u* g8 m. b* rconst count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
9 l8 C) n: x2 m* ^7 G7 G  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
7 T* C4 [9 S1 _. s8 Q  // 是否使用速度变化曲线
0 ]  Y; }3 b, H# ]' Q  if (props.useEasing) {
2 o, @' P( A  T: s7 c0 Y    if (stopCount.value) {
0 h5 V8 U, [+ x/ [2 n) L      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
, C, x& s) s& d: k0 [    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
6 }8 R& a+ N) U' A    }
! \( l4 E. {& s- L. @) |6 b" z  } else {
; p( i0 H1 C; L6 o  T    if (stopCount.value) {
. i1 D4 ~8 N& D5 |& Y* \2 x7 \      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
$ k* y: s( e3 n  h, P0 g    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
) V  W1 r2 f$ u* O  }
% y, Z4 d: b3 Q  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
) m) E% ]1 T7 {! l" o    state.printVal = state.printVal > props.end ? props.end : state.printVal
/ q$ a' e: Z" M7 _. p  }
( l" [. L/ g5 F% _0 N
  state.displayValue = formatNumber(state.printVal)
+ c+ P; @& A( }* c3 Q: y  if (progress < state.localDuration) {
) P: {' ~" b& A1 S/ `% X    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
, j* Y2 s( |: s9 _, H# n% E: @}
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
</script>
8 z  z: j+ Y* H
. O& O1 ?% P3 Y. n$ {+ A/ Q  B  M1
2
* s( s0 L9 x- K* h4 p7 y/ u3
4
5
& T( J1 H+ l# z4 i6
7
! `( V- V8 ~' h6 X8
9
10
! c) ~$ G* f! m  C' d11
- `& K, G- a/ X3 D; d0 T12
+ C8 M" f$ n$ S  H6 ~" C13
8 H! o# d0 c9 `7 T8 |( s/ R14
% M$ {) o5 y, T+ N1 B1 m15
16
17
7 u) Y: T3 m" ?' h$ |18
19
20
21
22
23
24
25
8 M- V  ^1 V7 ^5 Q( b26
$ H" v9 @8 t% S' r" @$ e3 h27
28
29
2 C; @9 v7 E8 r30
31
4 G4 `4 O- c. z. }$ S0 ~- F32
) v: B0 O! |/ B" \33
2 L  S3 L; D6 I; w  T) b3 C" v34
  a; y8 q; `, c35
: i1 T1 t( S. x2 t0 S36
, y$ d: w& P. J5 g0 c6 e" p37
5 t; l- p, {7 o; s0 z2 T38
3 }% a/ f( ?: j- B5 R. j39
+ M$ ]5 c4 G; q0 Q40
41
& D% X# w! z6 a6 E7 k42
43
5 ~" p" L( C7 U7 W$ V  A, q44
45
  Z6 z% s  k" c: ^46
* M2 w  l) e( _) g47
" Q! h4 @4 }! _48
49
50
  C1 S$ }# o# X; N51
52
53
0 u4 L  t( l* Y0 w4 N' V54
55
( n% m3 L. ]- P6 p; w* I: t56
57
58
) ]- @2 n- K/ G% I) P. I8 ?+ s59
1 K8 g% H# r5 o( h* f( `( q( R60
/ j: G* S5 c/ w/ s61
' W3 ?) b/ v9 g( x62
63
64
65
, Y. B3 N6 W& D8 @4 e2 r# D66
67
3 s8 l/ Z2 D+ [0 S  ^# F9 z68
69
70
. a. E% g) M: [7 l5 y+ H71
72
$ t/ L0 {) ?: A/ {73
7 u' \/ u( s$ W# P$ w( ]5 ^* X74
) d, E3 V0 N) M$ s4 [! n0 R75
7 R3 B. O% p  M  j! K8 |# x# D76
" h1 I1 k/ W2 X6 [, h: S2 l0 w4 a77
( ?: o0 Z+ f& k. e; @7 e78
* n" Y2 B& V; h9 Z4 }79
80
81
82
2 u& K0 v* ]. x- g; J' T83
6 U0 J1 H6 ~) o7 C84
85
5 q: E/ X; U- t; l86
9 d. T9 |' O5 f) Q! ~87
88
89
90
& u& N1 e, |, I  t91
92
  D7 i6 U8 [. S) i5 V93
94
95
) H- v& `5 y( }  p/ _5 ~& Q96
5 j) O+ B4 y* n! t/ F97
( c/ x' k5 S/ P3 D1 [, b98
. i6 y/ q  E: O9 {- Q+ q+ y! G99
0 `7 a6 {7 v- Q0 S" X100
$ W' ]8 r9 \9 f2 G101
102
* N9 h% H2 v( O103
104
105
1 [8 n  O4 P( E6 z$ {106
5 }  H8 V  j- W" I) r107
7 h& j) j) A2 B- o% g108
8 E4 ?* ?0 M' w  d/ [109
/ T! C3 V0 U  H110
' t1 M$ Q* ]3 g2 k- m" m# P111
112
113
114
115
# @# [3 l4 N) H- y! H4 M116
117
  ]7 c  ~, n- T. q0 ]/ W, b1 O118
119
& g! k/ N" ^5 q* b" z# {  E) d9 N+ J  l3 ~120
121
122
123
2 j' ?+ A& L1 c124
2 p) X3 L  V' t8 g6 i: p- ^) }2 z125
126
127
128
4 u9 `. Q; F' V1 n129
( o( j  L5 D* r- f130
131
* c8 s0 F* q% O) M/ _132
! |* G; a3 J9 b0 \- E; F" w133
) i1 A% m0 @- ]# ]$ e134
8 z& s9 O) {! i5 u/ f135
136
137
138
5 x- T2 d3 c' P" I) L; B' ^139
140
  ~) l2 n! w1 ~4 W" u141
142
/ \- ]# A# o: N7 m/ r143
144
: X# d- M# k% Z! q9 `145
146
% n$ l; {# z9 ?( {147
% @' v9 W( G; o% r148
/ y1 G5 s+ [3 G0 ~149
$ D6 K0 P4 P4 q1 e" J150
, i( |! K" x" ^: B  @: H% T151
152
) K* S7 ~, M5 n9 D( v153
154
155
156
; r# O- i$ D# ?2 a, E6 t& }157
158
, ~5 X: ?; t( N4 h- ~159
3 `  i/ k+ P3 n160
! H4 a4 X/ j# j: X) _161
/ N. ?/ ]. D: J5 |1 P( k162
+ \; a: m7 x1 O/ q- ^163
164
* R4 h% a0 e, _( J1 k8 [165
) i2 v+ ~/ j% H. F: e166
167
: x/ I( Y2 S6 U+ ]4 S168
& \% T# b7 m% X6 \& U169
; ~& U) o2 b9 V" [2 J170
171
+ w- k  X' ]8 x" \$ Q8 }  F& N9 L7 e. M172
173
" g0 X( b' g! Q7 q+ e& r; D174
! H1 ]) p& x" N7 s, \$ Z9 r" R175
176
$ ^% P% l, U! u177
* h3 R9 \: b  D$ W178
179
' u# W  V+ x; \180
181
/ t0 {$ N$ n: O9 k182
4 n# J, W/ P+ _- e' \; H; {183
184
+ A1 K- K/ {+ d+ m+ y- }185
186
187
188
189
4 ]7 ~/ ]6 S  ^4 U' K) U190
1 l. l. D" ]% @  Y8 u191
192
" ^' P. p# k, M0 ?193
194
3 `- _0 X3 D: [# o195
; g$ k* H3 ?( ~6 i; S; D- d196
197
198
$ d/ P. E# N5 G3 g# H8 o199
200
201
  K5 |  V6 w& |$ l4 h202
总结
' ^2 L. c; p" j' M2 a自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

& G! \' o5 P4 M% S2 ademo演示
+ ]! s& Y6 A+ \( N9 N0 F后续的线上demo演示会放在
demo演示
完整代码会放在
" ?5 v# v/ r( l) h1 m7 h) P: ~个人主页

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

+ Q: O, k5 @# _; k! Z- M个人简介：承吾
1 c" o1 K7 b; C4 T5 w工作年限：5年前端
7 Y. ]9 `4 [; \" ^4 b4 x地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
  b; C4 s2 R* s! y" s. I, Y' p

( N! q) C( b* c" a3 _1 r) _* ^

9 y' H  D5 q9 Q# ?4 `————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
- }+ N5 G; p4 F, V6 A/ S+ r" ?原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847