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

杨利霞

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

9 a% J7 c7 |9 b( P- X: I! r( X前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
. ]! v( d7 O9 `: }TypeError: Cannot read properties of undefined (reading '_c')
4 u* j4 z; \6 w- B! C的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:

: j  p# O* _* C# H$ ]3 D5 W( ~
/ V5 r( }! e: u' N: p思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
0 W, U1 ~/ Q% [9 Y4 P
$ u7 r5 v% S/ C( Q9 ^- A& ]文件目录


使用示例
<CountTo
3 j2 Q0 l- ]+ Z' ~ :start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
) D4 Q! @' x. _! n :duration="3000" // 过渡时间
( k8 C% @7 r# D! m! I) k prefix="￥"   // 前缀符号
% g0 P3 c# P8 e& u; ~- c suffix="rmb" // 后缀符号
# G2 }2 W  ~- M3 i />
1
* @  D3 O; q: j. b( a0 H2
3
4
. z' U; P) ^. v3 n" j5
6
1 i+ x; n' p7 k6 \7 p* S9 f! j7
+ N  \/ }7 b7 I6 r8
" i! J+ O' l, N8 b入口文件index.js
) s, g; ]3 k  U# y3 t5 q
8 X1 ]% N0 l# \% k) }const UILib = {
! c' _6 M5 g: y& G  install(Vue) {
    Vue.component('CountTo', CountTo)
; {, {" T: e8 q; `& C& C" j% \  }
% n) _+ T, O( o; K  Z  W}

export default UILib

1
2
3
4
5
6
4 i: h/ d$ O' r* D6 k4 E% N5 E% |6 e7
( V% w! D9 F( j8
9
, X& E, j# M  Pmain.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
" Q9 O& y: i$ ^  y1
2
* d  y  U2 Z' R8 R1 b. srequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
; {" @7 G( }" {) e4 l+ d如果是浏览器判断浏览器内核类型
: t8 ]+ ~* ?6 H' Y4 o& T; r$ P如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
let prefix;
5 n$ R  m: h1 x, F  Olet requestAnimationFrame;
let cancelAnimationFrame;
+ Q$ V  ^* t' M/ W// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
' G9 d( v1 F2 C        if (requestAnimationFrame && cancelAnimationFrame) { break }
$ ~, v7 |4 Y- ?/ G: I! S. I; M/ e+ v        prefix = prefixes
- l  p# x8 o2 k        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
7 c+ n( }* e* [# t% f* {    }

  //不支持使用setTimeout方式替换：模拟60帧的效果
- ~, X9 z" U: v3 M  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
% |! h+ v4 Q8 U" E0 z    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
6 f4 I8 `- [7 v" F! `3 ?4 r1 F% y            // 为了使setTimteout的尽可能的接近每秒60帧的效果
6 `. q& h* V# a5 [! p; [            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
6 x$ {  Q0 R, i. T) f$ O) m% a            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
8 h) Z( \3 s/ m1 U            }, timeToCall)
' W) L& p1 C; G- u; H            lastTime = currTime + timeToCall
: Y8 u. S$ @9 X" \4 ^            return id
3 S9 O# {( C9 S# {+ S: U        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
    }
; N0 E* u- V! ]9 \2 @
; G5 }- z, T# Q! F% s1
2
3
4
5
6 {/ _  R* J1 h8 {0 D' ^4 p6
4 j. {* }/ D0 m7
8
9
( L: [4 {  ?& C( A4 H10
11
12
13
% v8 Y3 h" K( v8 T4 z4 \14
- c8 D% u" e2 c2 N( L15
16
17
18
19
20
21
22
7 z- H: m0 b" o$ D* \23
24
25
26
! g& ?: J6 `2 z1 z4 n3 S5 ~  h27
/ y* B$ ?( ~  G( _28
29
30
/ {+ E" B) E6 S' A. B& A; @4 @31
, d# O' I" {% J7 [6 @; N32
完整代码：
) b  }. Y8 Z- ~requestAnimationFrame.js

let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

0 a) B4 r  `3 W0 ]$ q# }let requestAnimationFrame
* r% [+ g4 @* v' ]$ Qlet cancelAnimationFrame
( S8 |" g4 M) `2 L9 c' t4 Q% w4 h) z
// 判断是否是服务器环境
' q! `* m7 X7 a1 ?# F% |; q8 W3 }% Pconst isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
        return
    }
% s* v3 P" [( K1 l. u    cancelAnimationFrame = function () {
        return
+ {2 g- m/ {; n0 ?& m8 n    }
} else {
    requestAnimationFrame = window.requestAnimationFrame
8 J. ^6 d! U& C- |# n    cancelAnimationFrame = window.cancelAnimationFrame
) N0 X2 [* |+ n, u/ H  h3 H    let prefix
: i! f( w' L7 G$ L, l* Q( }/ C    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
1 P: g! {, i. o# w/ h5 R    for (let i = 0; i < prefixes.length; i++) {
; L% U. e; r3 k% [        if (requestAnimationFrame && cancelAnimationFrame) { break }
2 {' L6 f1 D* |/ v0 l* c  X        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
* O: C3 c) E; M! v" M        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
2 ~6 B: T/ }0 m. S0 k" {' P" s1 g    }

( m/ A! z' [* R8 x+ v    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
8 v4 l4 m3 c( x* x  M: b        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
+ o9 U- j% E" w& b) {+ n  D            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
" W: ^8 e' p  f) {& V            const id = window.setTimeout(() => {
( n2 r: y! G2 D5 E+ {                callback(currTime + timeToCall)
            }, timeToCall)
) b- @0 U3 y8 Q2 B; [            lastTime = currTime + timeToCall
; R) u8 |5 m: H            return id
2 g% ]' k; \; Z1 d        }

& ]0 T7 V, U8 N- T* D! F* |        cancelAnimationFrame = function (id) {
: @  ~6 h- I4 p; k1 |' H/ Y            window.clearTimeout(id)
        }
    }
' k7 _; T6 `. c* e8 e) w1 p  v}

) K( J4 U( Y: U9 m. }export { requestAnimationFrame, cancelAnimationFrame }


1
# |0 _, i- y- C- m9 Y2
$ U. A7 W$ a4 K6 p+ L6 @3
4
. Q# S! n- \/ x) q5 q/ P' V5
7 b3 t1 ~# ]/ A: X7 ^, d( a6
7
8
9
10
5 n9 J6 U# G+ B11
12
! I% W4 t$ F6 P% k: a13
# s. f3 u0 Z" ~* W, M14
15
16
17
% b4 E: j& w+ m( _- L18
) C6 C: H2 k7 b& x+ L0 a4 F3 w: N19
; D  d' V& F- r& d' z20
21
22
) h- J2 \; y2 B, \/ V: |# W23
24
25
26
27
( b9 S, J! L: I# m" g) L28
29
30
31
32
33
7 |( l& w$ l: Z( V34
6 O5 k7 C7 R  c35
( l. n' ]" I6 V- n: \. t: n4 D4 w36
37
/ z" E1 F2 d4 U# m38
2 O1 e0 n9 I. a+ S39
40
41
42
! i  w$ k3 i- U; s( d( F43
6 s. @8 `" o" D! P7 s1 c44
5 L( `3 ]" B& y* \! `5 ^; t45
. S1 D) t- Y* Q6 i46
47
48
CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
. w) X' p8 I. R% U% b" c
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
* e; U  s& d' K% T1
需要接受的参数：

const props = defineProps({
  start: {
    type: Number,
/ u8 E; }, P& n( n7 |+ {" A    required: false,
    default: 0
. |* @0 p3 h1 z1 o  },
. e$ _) l. t( a& V) S1 a: o; a& ~* d6 y  end: {
    type: Number,
    required: false,
9 H( v- T/ C& C- X* u. g* O    default: 0
* p- l9 v8 i8 X2 i! p  },
8 ?; K  D$ s; y6 J" r  duration: {
; ?3 m5 e$ [  T* |7 R    type: Number,
! Q! [9 Q; J) K1 B6 C: ?8 K  V    required: false,
( X$ K2 e; l- Z# H7 c    default: 5000
  },
  autoPlay: {
    type: Boolean,
5 K) T6 N2 c8 l* J9 V9 z; g) o% r/ A    required: false,
+ V: G* {4 m6 D* ^    default: true
$ n$ G0 A- a* |8 U  },
& y0 V% o- m) U. W  D0 F1 h  decimals: {
* s9 [2 R# ^; p/ y6 Q# K    type: Number,
    required: false,
    default: 0,
    validator (value) {
      return value >= 0
; L0 j0 Y  c- g0 u) F  ]( T( `& q    }
7 A, w  _. q2 y/ A) T# X  },
. s4 }2 Q/ E0 j. A' I7 J% x  decimal: {
( D6 l: @$ q! ^; F2 d    type: String,
+ F8 r5 Y' c3 p/ Y0 D    required: false,
3 Z, m2 n4 ^! Q# }    default: '.'
  },
  separator: {
    type: String,
    required: false,
5 C! O5 T" F9 R0 a7 k    default: ','
! Q/ s4 t) e# L1 _  },
2 t. A  g/ V5 e$ I# h6 ]  prefix: {
1 `. V& k  t0 V7 T" x1 \    type: String,
, \) u) p$ s! L9 a6 A- f. d) U' @6 w    required: false,
    default: ''
2 z+ t: W: Y" ~' n: X3 U/ u  },
  suffix: {
    type: String,
# F- j4 t" d! x# S# O# S    required: false,
    default: ''
  },
  useEasing: {
  L1 g% C" c) ]    type: Boolean,
    required: false,
; [; R! V" @( M    default: true
7 W- k7 n1 P/ a  w* C  },
  easingFn: {
    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
. e. Z4 C  p( J: w0 i' X4 r+ m  }
})
: I$ X4 b( e3 @: ]4 `

# p9 c" k+ z# z9 N4 P; a1 E9 @1
2
% z) p0 y% R  X% [3
0 f, j) i1 Z; A% y& f4
5
6
7
8
9
. p% \6 d  o. M4 ~  i10
11
) a- f5 I9 B* f! b. g+ U12
3 J; U4 i; u5 F3 h: K$ |0 [13
2 Z+ u, I' v& Y5 A. j6 U- J2 O/ t14
15
7 k. q+ V5 B+ R( ]! A16
4 f" Q+ s$ M' o. o17
18
7 p" K/ b& k9 s/ M% b1 F19
20
( b; a% Y% t# j% Y7 w21
22
9 s7 a; v! U2 X& `/ W23
# R+ ~2 x6 l) [2 o; m: Y. z24
25
$ n' I2 d4 g$ f, C26
27
6 e+ I2 e  x4 {# O) Y/ ?28
29
* j$ y! L6 u, ]  w+ ]+ G$ S30
( M0 r. L7 b. ?31
1 g. M; l5 Y9 s/ ]! Q- Z32
  f5 J; X$ A7 ?% G2 G33
/ s# h* z+ S% h# u; R3 y34
35
36
37
5 g" Z8 m9 B* u' u1 ?( T' r; h, k38
39
+ E4 a3 Z+ \6 U" `( v- s$ R40
41
1 a# |) A; n4 o& h* O6 Y42
8 n- `  h7 A$ ?% t9 R43
44
45
/ i( r$ H# G9 p46
47
0 t2 ]+ b! a4 T) L# x48
49
" L+ @* K4 F$ S50
* `# M7 q; H1 r1 ]51
52
5 L9 x* V. i7 o( z/ r53
% }/ u+ j& p8 Q: p. J; E54
55
* d6 V- }7 [4 J56
! v3 a& X, S' A1 ~. w/ w57
58
1 K/ [$ Z  V  [9 K9 ?6 W59
60
61
62
- `, L% x- T/ @. {* g启动数字动效
2 \3 Z- {6 D2 u$ d; c6 d
3 L3 `! Z- g7 }. w5 t0 }const startCount = () => {
  state.localStart = props.start
1 T7 H" v7 E" s1 J& G) P  state.startTime = null
  state.localDuration = props.duration
; N8 \9 U8 [( O! `' g( ^7 K  state.paused = false
( X/ o0 E* @" V9 _  state.rAF = requestAnimationFrame(count)
  k" H& }* J& c: x3 j$ X}
1
2
3
4
5
1 [3 w4 P! `4 [9 ^. r6
+ S0 j2 l1 @) R: r! Q" p: k4 H7
核心函数，对数字进行转动
  [; `3 P0 w2 X, [" C+ i& Q5 Q3 n* u
* G5 Y: [3 i, J  f" k5 E9 H  if (!state.startTime) state.startTime = timestamp
$ n8 K" M2 t/ n/ S. d1 ~  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
6 @/ D' C3 ~. \* |; ]" }! G  M  if (props.useEasing) {
    if (stopCount.value) {
1 u8 {& f% @9 K. P) L2 F8 C2 h& _      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)
    }
  } else {
- E8 v; U  u, g8 A    if (stopCount.value) {
# E, h! {9 q0 F/ _) v- q2 Z      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
( a6 h& Q0 s: E0 a; ?    } else {
4 q4 R; u- ~, w' D/ B; t      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
7 w( D# f: O) a% T5 U    }
  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
6 y" ~( u- M. I# }6 q4 o
  state.displayValue = formatNumber(state.printVal)
* y* {4 p- r/ \  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
5 b# x& ?" D- U7 o  } else {
    emits('callback')
1 a, }2 i& X+ G. t+ C- y3 c  }
3 z! e; }$ i& ~0 G3 O! C+ j8 K& n}

: V- h( D4 N5 p4 C" h
// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
0 d' O: \+ S. h- P4 r0 v8 g* x  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
. }; ^: v9 a3 T6 j* w# J& z  const rgx = /(\d+)(\d{3})/
! F: d, ^! z& i' g. E- N- v4 [2 f1 x  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
/ {6 O3 G8 u* h4 X      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
) f; ?  p0 C* l! _3 T" a3 ?    }
  }
+ X1 G+ w5 k( ~2 K$ c  return props.prefix + x1 + x2 + props.suffix
, q: D+ K8 @6 A& t7 W7 S4 Z5 M9 o}

4 d6 S% @6 C* r! U. m! A8 y1
2
3
4
5
6
- ?$ p9 p3 D  U! M5 ~% P$ y$ e7
8
9
10
% f" U/ M: H& u! d$ J11
' [' }5 E( ~4 z2 d7 x) R6 r12
13
14
9 q8 \/ U  V& Q# `, _* p- W15
/ x* w% e: q+ M  j4 x' U# l16
/ {% v! m4 z1 Q: \7 c$ d17
- v4 p9 C" U* a; Q: ?' h18
19
20
21
* g- W% Z5 g  f& o  o22
23
24
25
* K9 X& p4 e$ H- r26
2 T: c1 S8 l- a# T; j$ Q27
, S; w1 i7 @- ~; W28
29
30
) K# _/ |) s9 D9 K. M31
3 ^6 a, P" R9 o4 e3 O2 K( ?6 }6 ^32
33
34
( J( {! \* x* o* \5 F* W+ \35
36
; Y2 ~/ d, x7 d0 v0 C' J+ l37
38
4 U0 F' X- j& ~  Z39
+ i! ]! ?! f6 [7 X% F! {; H40
41
42
; w3 X# Q9 k6 P# d2 }( N* r43
3 V/ ]4 n; s: d9 D) T0 ~44
45
8 j, e$ O: {, q& A- N3 H; `46
47
48
, w/ h# j- R( b$ ~取消动效
! D' v4 Q4 M1 }( f
* N9 e+ P5 d2 X1 k1 V4 U- m// 组件销毁时取消动画
. g2 y: D$ g, B0 a8 c: F4 u" s) eonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
. \8 J' t/ ]% L: y1 i: a( u  b1
2
3
4
' z1 g! Z$ r2 {4 g. G完整代码
- h1 l+ T# x9 W5 A
& C7 C% O1 M* Q/ \<template>
, M/ F' Z. s( Z. Q  I  {{ state.displayValue }}
) B+ k5 ~0 \8 N+ _. C. L</template>
/ j) G; ]4 W% g! x) ]) ~. K( b
/ g  `7 [5 e* b) Q1 y$ m& ]<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
# t% k8 c: d' V, }1 u0 X// 定义父组件传递的参数
. `8 ~6 Y! p3 Y: q; Sconst props = defineProps({
2 z8 s2 G) l: Q% ?9 I  start: {
; {  ^# N2 J' o; e; ]- X    type: Number,
" y% x" Q$ {2 Y+ @8 Q    required: false,
    default: 0
3 d/ g: v: ?5 |. ~  g# G" m  },
  end: {
    type: Number,
    required: false,
    default: 0
! ~# f0 |- {) N3 h" W& W  },
  duration: {
1 Z% t6 B/ ~% Y    type: Number,
0 b! {. a# E$ G6 U  E* P    required: false,
; c9 j7 N* [' F7 n3 I* [    default: 5000
0 N6 @# \, U4 p! W, ^* y$ E. y  },
  autoPlay: {
    type: Boolean,
) N8 r4 M' \. G: o$ @/ _    required: false,
    default: true
  },
' N7 j7 C5 \7 C: s/ o  decimals: {
    type: Number,
    required: false,
, f, J7 j3 u, b8 b# l2 U    default: 0,
  J) O8 R& @, N  q    validator (value) {
      return value >= 0
) D, x/ F& i' x1 t" F; Y1 x9 [6 _    }
  },
  decimal: {
    type: String,
- U; Y7 k2 _& d& s" }    required: false,
8 t% w0 y" [6 z+ D6 x    default: '.'
  },
- d: f' W& b* P8 x& H+ B! F/ g  separator: {
    type: String,
/ d% i% s5 s4 {6 V! ]/ s/ m    required: false,
! O3 |  n6 X2 M9 x) I, j7 h    default: ','
3 @8 N" D; `9 v) \/ A& G8 J" V  },
" ?9 A; S; |  ~1 Y1 c2 T  ]  prefix: {
    type: String,
    required: false,
; U% j, @3 o5 C4 E6 A3 Z: P    default: ''
  },
  suffix: {
! t; H0 G0 F' C    type: String,
9 r) _9 m/ I/ w7 f$ G. I3 i) k    required: false,
  c; E: a' `: k" W- u    default: ''
  },
, K6 ~4 a* `$ ]. p8 D! D0 o8 W- ]  useEasing: {
    type: Boolean,
    required: false,
3 r" M" T! F; V) R* o  e    default: true
- E9 F4 I3 \; d& N- p0 U  },
  easingFn: {
    type: Function,
3 P0 g% B0 i3 D    default(t, b, c, d) {
  r3 Z9 _/ M0 ~$ h* M' }+ m      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
$ l" f( R9 G. Q9 t# R4 ?    }
! R. i1 F$ D1 k5 }5 N. i  }
})
" H9 g$ B2 ~2 I* e4 k2 A
, I$ E: p9 ]' u7 b8 U2 T7 Bconst isNumber = (val) => {
/ ], N) x; M, Q# z/ D  return !isNaN(parseFloat(val))
% s; a1 S( }% s+ K/ d: g/ |; Q$ r}

// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
( O+ y) c$ J1 @: g" I/ \- a% j5 D* l  val = val.toFixed(props.default)
' W0 X# n: \  e6 |  r5 c  val += ''
  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
4 y9 q7 f6 N+ [9 Z- `2 V' \    while (rgx.test(x1)) {
, `1 e6 {; q& R: N1 M6 L$ p  D      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
  I, L" w! L$ Q    }
  }
1 O. K$ G9 _& b+ r  return props.prefix + x1 + x2 + props.suffix
" F3 }- k( O- ~) T}

0 T, \7 f+ J% i) \2 @( Y1 B// 相当于vue2中的data中所定义的变量部分
5 A; J" t5 t2 ]( Hconst state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
7 [2 ~- W7 C# o) C: q  printVal: null,
  paused: false,
& `0 O3 w( g# t# ~7 S  localDuration: props.duration,
  startTime: null,
) f" V# h& a9 J9 w  timestamp: null,
  remaining: null,
  rAF: null
( W' G% g# ?& {})

2 p2 l* a8 H6 N: z// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
- v; {8 H/ n1 o1 q# l' k; L0 }})
/ a+ O9 U( S; g. [. C: t// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
4 l) S" B  g) }" Cconst emits = defineEmits(['onMountedcallback', 'callback'])
0 H9 s1 t# C, M" l9 m* W: P
const startCount = () => {
  state.localStart = props.start
  state.startTime = null
: |8 d' B8 z% y: v! |4 L  state.localDuration = props.duration
0 y: g+ E1 y/ y9 @3 f0 C2 p  state.paused = false
  state.rAF = requestAnimationFrame(count)
}

" S- r% p7 N- H* b# M9 a4 E6 @watch(() => props.start, () => {
  if (props.autoPlay) {
0 n" B& P4 j, [" Z! F$ B    startCount()
, }1 G1 c4 |0 y) C2 }  }
# l! ~. p/ ~. }+ c})
+ ~2 H" v3 q9 P  y3 r; _
3 e! u' O; n6 C3 pwatch(() => props.end, () => {
" G1 h) {& k  y3 \  if (props.autoPlay) {
( P2 d7 `5 h+ f# R, T* @    startCount()
9 u7 H' v, u1 P- I  }
% l# w9 W7 ~" X/ k, j' x: @})
8 j2 ~2 R9 k5 z// dom挂在完成后执行一些操作
* @) F) p! I, b$ O$ TonMounted(() => {
% A- [$ v. K; \) E6 Y: z  if (props.autoPlay) {
" }8 k3 X% ]. y) d$ \. n    startCount()
! x7 B6 j7 U' t2 {: U$ ?) ?4 {  }
2 B% Z. }' _- w2 a7 Y  emits('onMountedcallback')
})
// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
1 P" }- \& |7 t$ ^+ |( |, T8 j}
// 恢复计数
! }0 h1 j5 B% w3 jconst resume = () => {
3 H3 O; Q+ N$ n  {, y/ x2 r  state.startTime = null
2 l2 M9 ^- y) T* |& ]4 X% o4 }  state.localDuration = +state.remaining
  state.localStart = +state.printVal
% p5 ?$ D* m9 Q. f5 ^  requestAnimationFrame(count)
7 k+ z+ S( ]" p* g. Q8 d9 U}

8 a  Y: R& p2 @+ r% |. _  F& G- Fconst pauseResume = () => {
  if (state.paused) {
+ s- [2 I1 v# G& V    resume()
3 x  r" {& Z' z' }$ a6 ^2 L6 A    state.paused = false
  } else {
+ C: ?" x! O7 I    pause()
    state.paused = true
; J) X8 N) ^) E  }
( Q  ?+ [/ |8 x# l2 M" z' r% o}
& v6 ]7 k% |! V
" }$ X  z' w" z! f5 Q+ ^const reset = () => {
3 n& a! ^. F! W% d8 a3 F/ I- U  state.startTime = null
  cancelAnimationFrame(state.rAF)
" M8 p3 J4 C, E2 y+ D* P  state.displayValue = formatNumber(props.start)
}

const count = (timestamp) => {
2 d+ M- T9 @6 ^% J0 F/ P3 k  if (!state.startTime) state.startTime = timestamp
, J5 ^+ u* |' X  y  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
+ m- J, Z0 c/ l& Z8 y( W    if (stopCount.value) {
  i" D3 q! ^3 i, q8 w# b- _9 y5 E7 T4 w) X      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
0 |4 Q* X# R' b0 Z* X  w; V$ Q    } else {
" R% J+ s: C& L6 ?      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
. a" s- x1 ^" h' E6 E$ L  } else {
    if (stopCount.value) {
7 U; @! M* x/ F' [0 j( Y      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
* `4 C' A+ D. W6 c7 e- d8 a      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
; k1 b# Z& V6 ^9 M9 a  if (stopCount.value) {
7 v! g. [% w0 F: E    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
' g/ h8 c+ E0 u, ]  }
3 i8 u+ L+ r! B4 N9 r2 j( G1 q
& O. G8 y' \! P  w' ~& F- w3 E) [  state.displayValue = formatNumber(state.printVal)
" u& v( ^# q! S  E: I  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
}
: L; s0 I: g% s  e& d: W$ n// 组件销毁时取消动画
onUnmounted(() => {
  X# G# s: E% a1 ?: x  cancelAnimationFrame(state.rAF)
  U$ M, X0 z$ R% ~% J})
6 {. I" v% d( T& G4 v4 q5 n" D& v</script>
3 V0 Y8 Q7 a4 H$ Z) V/ o. C
1
2
/ ?- i: l, t5 M7 h3
4
9 ]2 u( R& {+ `; q5
6
7
8
9
, U/ f9 i& f/ [9 @: k. s10
11
12
13
14
15
( T: o' Z! f, L. f' v16
% I4 V" |4 z9 y8 h5 Q17
, A$ a- ]7 d1 ?- J7 [5 u$ W) j" y18
19
20
0 z9 v9 T2 }/ Y' a21
6 x, p/ w0 @$ ^5 n22
23
24
25
3 `" O* H) f& N6 y26
27
7 T% E. V$ b# Z7 H( q% J  b28
% ?+ Q( E, ?. h! D29
7 D7 _! ?+ \/ K* q) P3 [) m30
31
32
2 u3 e: c' L$ I2 B) @/ ]0 K2 N33
1 T6 `5 s  J# t- S34
; _7 o5 V! R6 Z35
. J. b8 _' G8 E4 ]36
& U: h; \* f+ ^% V) d  _37
38
) m; m) v3 Y# A! O/ T) f# d3 J39
40
41
42
43
  S# X0 \# Y. h) t& ?+ a8 i* ]* C! d44
) q- t' s$ B/ _45
% L: x2 j( [9 ~* {5 r46
7 l1 D7 w7 A; m; q/ k47
48
1 X$ ^8 L1 K3 Y' |& F$ z49
& v; \9 p2 V8 m1 T5 d$ U3 z50
51
' ~( ^2 L) U  o; @* x1 C52
# J: W9 B$ ]% P$ d53
54
55
( f; M2 z; M% z  v; u* y56
% W) u1 \. N; e7 X  j9 k2 L57
58
1 U5 C# G9 c- C. ^* v% O59
60
61
3 N% G7 i. c- P9 D: j6 M62
. M! K" N1 L3 J3 y7 ^* A6 v# X( A63
64
; z( \! S: U9 t/ n/ L7 W7 W+ W  b65
0 J6 @; \7 w- h  V, o4 o( i66
67
0 m& l, v) E0 j" S7 C68
6 k* c8 k7 u7 ?# k& J69
70
71
; b+ {7 X6 }+ o- r72
73
7 x/ f* P! i  U9 P74
& E# O5 C& h. \/ i8 R75
76
% t2 R4 b% r) k# b77
$ p8 e* D) O4 y2 d3 ]78
79
! G# L0 _3 m; H0 v' e80
81
82
" K8 B0 z1 N+ n& \1 s83
84
85
86
87
88
89
$ T4 n! B! N& l/ Y; R1 R& K90
91
92
93
/ N7 F" E1 }  }, G' |# B) V' _4 L94
95
96
+ W+ s6 D# s5 u7 {97
  g9 M2 Z4 m+ |; k' M98
99
100
101
102
103
  n6 D" ?) H% {* o104
105
/ M2 Z* h/ A& E% E7 ], u. c106
: Y/ c" j: s2 W# D* {% [2 d107
108
# T8 x: h  g- N109
110
111
5 I3 c+ C6 G. Y! e' J/ S: a112
113
114
115
116
$ O) j( Z0 ]% A! w# x- ?1 I3 |117
' X  P5 \+ W0 D3 B: u% V118
, s' @" U! T  t119
- Z- u; q8 {. ?120
8 O9 L) ?2 N, }5 l121
122
123
124
125
! H% h3 m5 `; q% b+ W126
9 I5 `7 p0 [2 V+ D% x- e  L( H' b127
2 d& N0 @- D. _4 r128
129
130
131
# N! X; _9 ^. {3 u132
133
' ^3 b$ K( p+ m: X+ h4 J& q6 P3 z2 \134
: v. k! u/ d; f) u3 O& t7 T! [  p. O135
136
137
138
139
140
141
8 j5 X, i% M9 Z- x. h  b142
' f0 }& }) [, ^# l. h9 O- B* r143
/ Y& O% z) o3 v# ]( |144
- S- K, X# n$ ^: _- C, x145
' K# A4 C( H. X! p2 l146
6 X7 Y9 @7 Z6 g8 u; d& s% y  n# v! o147
148
149
: z" V1 v7 R/ T) S' r, r% a150
151
5 y) O/ l9 g: Z+ o- k& h3 A# e152
, O$ P  C( p' R& l2 M9 j2 c153
154
155
1 C9 q+ q! ?0 F- e, v156
# \- E3 V4 S% V7 S* z' m157
158
4 k: d& Y1 ]& _+ U8 M159
160
! e+ Y  p) u- y; V$ f4 i: |* ^# }161
- M8 }) y) O1 S2 m. `162
163
; x8 F. [& f& Y5 v. Y1 S. o164
165
166
; R( m4 Y; b5 @5 P' s0 z  y167
168
169
170
171
' Y" g$ \% d2 x2 e! K* s3 u6 E172
7 ~( P6 M7 S, C5 d5 m173
174
: P! Y6 b7 Z" l/ e. G175
2 I  p+ B3 y# k- Q+ g. |% M176
% Z6 v+ l$ c; ?% F+ g6 g177
178
8 i0 {5 q3 A6 O2 T0 ^3 {6 i179
4 V9 H' F& V* N5 h$ _180
181
& @. F1 |( T8 o6 N8 V+ ?4 W$ m4 E182
183
184
( ~$ K2 m! ^1 W: G) S  H185
186
. _$ Q7 A5 z- |& W3 L, f% L187
* B; e7 X* C, P* c) G. D188
0 _4 X8 S/ z+ t  `+ M( [189
0 Z, H4 s, T+ V* e) |190
191
192
# _& O+ u/ _- w$ x193
194
195
196
197
198
199
0 J7 r2 s* v' e$ c# q200
201
/ P- }2 }  |) n# T3 Z3 U202
" ]' o. B8 M3 t% W7 n. G( t总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
2 C+ Q1 X5 U( c# f+ f! n后续的线上demo演示会放在
demo演示
# J$ O! Y8 i7 W- j完整代码会放在
个人主页
5 E/ \* r& U) P- k* e+ u& }
希望对vue开发者有所帮助~
2 {; ~+ R% v; Y: z: ^5 j
- P) Q8 X! ~8 J, A- g个人简介：承吾
8 o# F8 K: t9 Y2 l# C; ]工作年限：5年前端
- f# Q! G3 |% c9 |地区：上海
  \6 X; S; n* i& G  [个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！


  S9 x4 d$ M" L% y

8 D: T" g; F8 ^1 _* d————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
' Q# r0 F# l2 o

8 \- A2 |8 T$ ^! _$ t' Y