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

杨利霞

vue3 | 数据可视化实现数字滚动特效
2 U) m5 X! I% N; }) h' o
3 ~4 h! d8 [  F  k0 m' I# }3 M前言
% ^3 e6 b6 o' vvue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
# t# Q7 [0 k1 J0 b7 P6 n的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
# D) `6 t& [  p

思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
( N/ R4 I' X4 U9 d" O; J& Q7 P8 ?. s
! r, v0 m- y$ J" k# Q2 W文件目录


使用示例
<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
, t4 |" v9 R& H* C0 w. s( s' A :duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
' ?( G5 r$ B% R9 E# E suffix="rmb" // 后缀符号
/>
% |  d8 U- V0 |7 o1
5 M# {( E! |+ V/ |" {% |! g/ s2
3
4
5
) H1 y; Z1 L& t! u) Y/ x6
& }/ E0 o% H0 a- x* q$ ^  [, Z, m7
8
入口文件index.js
" X0 W2 K% `% }4 I3 U0 \' q: D
( x* D) C) Y  w7 rconst UILib = {
  install(Vue) {
6 g" \" `0 o# E. q  c    Vue.component('CountTo', CountTo)
  }
2 L) v/ [, {  v" `) {}
3 y: h" X5 Z* @/ \- t) Q
export default UILib
+ n' k0 j; E, h# }
" e* q( O4 t' B. Q. x/ C1
2
& B, k$ h8 M( ^6 E3
( _* V: d% }5 i) |0 p2 M' `4
5
6
) u) y8 B% ?$ l) u$ n7
8
$ Q  T! |9 }# V8 d. b% U0 ]' K9
main.js使用
: ]6 c6 F9 U( O! m& d% Uimport CountTo from './components/count-to/index';
app.use(CountTo)
1
- n. ], e9 K( J; u2
requestAnimationFrame.js思路
4 a2 p0 H9 Z/ s先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
3 p8 q9 z) D9 w% z! V7 Qlet prefix;
$ I* S& c9 J4 d( Y7 {let requestAnimationFrame;
, C, x9 y# i; C2 {( ?1 |) _# Alet cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
6 J- |1 m3 i9 k6 F6 ^# U; B6 k  d9 ~+ j8 \        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
2 z& c5 q0 T# P- n0 n. O) P        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
0 n  R9 W" }' O! E    }
4 l+ P$ [- r4 D; y4 ~  i
  //不支持使用setTimeout方式替换：模拟60帧的效果
3 o- W' ]5 l( i" O0 V9 Y  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
" X! V$ n  Y  v' o! y' h            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
! y% k: ~/ J6 b) J, \) G. q            const id = window.setTimeout(() => {
9 O; m6 o" i. P) d                callback(currTime + timeToCall)
4 ~, Z$ ^* X8 ?# G- B            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
4 f7 I7 Z7 e  R1 M4 z        }

6 R+ }7 V$ K4 b7 X6 g- \5 c        cancelAnimationFrame = function (id) {
$ Z. K, j5 ^8 m            window.clearTimeout(id)
) g1 a" {2 H) Z* [. H& s        }
0 }- N4 a0 |6 x/ M    }
! U6 P5 X- n; v" y
" Y7 ^3 p, G; i" Q" l: M1
$ o+ A- {7 G" w2
3
( O2 b0 ]. f. u3 [. s' y+ F4
, U+ h: U9 r% K2 L5
, c5 M3 c5 m9 c9 Y" p6
0 D% {8 h+ j* o7 Q% A1 F7
8
, D( F, W: ~( c9
+ @: }$ [& Z, _: a, O9 ~! N) g10
5 C' A! i6 G; a11
7 l+ V' S1 Z$ S3 D/ E$ e  t7 p: F12
& c+ J* C1 E( n! _13
14
15
16
17
- L% v' B) @0 K9 i18
2 o- b! [$ S- I6 @19
20
  L8 T4 h- \/ d+ `/ V8 c21
22
23
24
25
$ f1 y6 ?3 p1 ]; p26
27
28
+ ]" h  {3 E& ~) g( \% v  F29
30
31
% G0 D+ O4 P' V/ e32
完整代码：
requestAnimationFrame.js

let lastTime = 0
2 _' R( n# m8 h0 Bconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
  Q9 P4 Q1 X; c
let requestAnimationFrame
, T. L7 |% r* L! \/ H) ]# m9 D5 slet cancelAnimationFrame
' n) q/ _' l9 ?9 r
' V- y4 z, Z" h// 判断是否是服务器环境
8 A  v7 B  ?6 ~/ ~const isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
3 L% U/ M- G$ K        return
    }
    cancelAnimationFrame = function () {
        return
( V4 I2 N0 c, b/ E# o4 u, M    }
& T# p9 }& g9 }} else {
6 r: L/ j( O, o$ g, w0 q    requestAnimationFrame = window.requestAnimationFrame
+ S. l' g: C1 W. O    cancelAnimationFrame = window.cancelAnimationFrame
* h0 F6 |! f0 _/ ]7 h# W' n    let prefix
/ ~. {/ Q1 L$ N) A) V! a& x    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
  B; G: R  ^2 m1 k- W% |0 U* x* ~' K        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
3 _+ C  K* P1 G0 n- L( B        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
/ `# F7 e  E. a$ K0 A    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
, Q+ J' @" Z5 w1 u8 c1 k+ v    if (!requestAnimationFrame || !cancelAnimationFrame) {
! {+ [1 r/ [9 R: u4 V5 j        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
" A* t% c, D, m3 S5 ^! O8 [            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
: R( `/ d  c- g            lastTime = currTime + timeToCall
            return id
- N  O; X2 J& B5 I        }
, a1 @9 x: ]  t: p& _: ^( n; N, Q
        cancelAnimationFrame = function (id) {
! Z$ |  x0 a# Q# S' }            window.clearTimeout(id)
        }
. B, c- i- N/ P: F    }
: J: `0 C9 Y& S) ~}
$ U) i: G$ q! c' U" X. ~9 s
export { requestAnimationFrame, cancelAnimationFrame }

7 E0 P5 d) t* ]+ I' D# \
1
$ `) Y7 O# y8 H5 b2
3
& W& `6 h, ]" N4
5
6
7
8
% P9 F! c. j: A& N% M; U5 n) j- c6 U! i9
+ k/ W, L% c2 \3 |1 v$ D! Q7 R! N3 V10
11
/ ^2 ]' D9 v9 t" b0 S+ Z6 Y6 e12
' x  l8 @. U3 Q* Q13
- `/ l1 X9 N8 T* c/ F$ S  d( @; r5 g% b/ y14
  _- n0 w. O$ y- R6 M15
5 d( r9 V, ?( s8 H" e* M16
# d, N# E  D; ^! X17
& a6 y; d3 f& A5 r" f/ e! ^) Z18
8 \  [7 y# g) q: Q6 j19
20
21
$ q! a& d, R$ l# s% s3 R5 S1 u22
23
24
25
0 g' z+ c- f9 @) M2 D26
27
* \+ p. F3 E0 \$ U2 _* l28
29
4 y8 y5 v* O5 f/ S; A, d/ |8 x: V4 ]30
' {# n9 H1 o8 q4 M! ~9 c31
32
( t, R) @: P5 x33
  _; k1 r" W$ K7 G1 _34
35
36
; E$ Y) I3 E- S) g. @9 |4 \. p37
38
+ e) X8 X% L2 m9 L; a1 e39
2 s& a9 L6 `& k3 v" Q# r$ P* `& `& p40
/ L9 `0 @5 F5 |( d3 W8 M41
42
43
9 Q! x0 s9 v" s$ b; Z9 z; B44
45
46
47
, V7 m" F. G2 H9 p; S48
CountTo.vue组件思路
! s  {3 _! T3 r5 x8 T首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
- z$ S  j+ s8 T' |# F, [
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
5 K1 ?1 a2 G# ~, P* J# M0 s" x1
3 {" {& b0 J8 R9 K! [, _$ x- d需要接受的参数：

const props = defineProps({
  start: {
+ S$ a, m8 D1 H+ w    type: Number,
    required: false,
    default: 0
' d& Y! d0 R4 e$ \% @( `& p  },
  end: {
1 r9 K6 I5 o$ S' ]. \1 a- K0 s    type: Number,
    required: false,
4 q6 {4 S& Z" E7 r; i5 T" l+ ?    default: 0
  },
  duration: {
+ a8 `3 f) i+ G    type: Number,
8 @  H  H( i) n  x6 T" P    required: false,
1 a3 Z+ G) K. \3 ]. P8 R7 G6 Q2 m    default: 5000
3 C- y) n( S! e  },
  autoPlay: {
    type: Boolean,
. R# {$ d6 W7 b$ s0 {: w# B    required: false,
+ x1 I7 @. \' l8 m) J6 v; |5 R    default: true
; u; p8 X7 ^; Z+ q  },
4 b5 o5 ^) w2 U3 j/ `# e7 `5 L. J  decimals: {
: |; Y* n+ s) @- y    type: Number,
    required: false,
    default: 0,
    validator (value) {
6 J' k: ^0 d8 F2 V      return value >= 0
    }
  },
  decimal: {
    type: String,
$ a- Z4 D4 G& K* d1 N) n, q    required: false,
: p" P8 K/ F: ]* F5 F3 H    default: '.'
; U4 U6 K# a- j5 P; c0 A6 u  },
  separator: {
% f) T% b3 b2 R& b    type: String,
0 r: |5 Y, F8 x/ Q    required: false,
    default: ','
  },
- M( \6 O1 a: X, ^. V  prefix: {
3 n9 N/ V+ h! U    type: String,
    required: false,
    default: ''
- q$ M6 e, L2 P3 l4 c2 e  },
  suffix: {
    type: String,
    required: false,
9 f; ]7 I1 o5 R- n- @8 X4 r" @    default: ''
. q0 X* d$ j+ L8 N: O* r& h$ C* i2 p  },
  useEasing: {
. E/ P! [1 X; E% H0 M' n. p( M  ]    type: Boolean,
  y1 @1 s7 R( u5 j9 q; r    required: false,
1 u$ w7 J0 W! v6 U) a; |    default: true
  },
# m# E3 t# Z3 o1 V, m( _  easingFn: {
    type: Function,
' S5 c4 k- t7 z1 {6 |, u0 a: C    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
* d8 u4 D+ N2 e& ^2 Q% E1 G    }
  }
})

4 T0 R3 M% ^) _3 p3 k7 d
1
2
: z, N5 {- E: M3
4
5
' b, Q' M& n% ]. q9 ^6
7
3 c5 d0 a! o/ ~* v/ y. S4 A3 A8
1 r2 r8 j0 ]' ?+ z6 q9
10
11
12
13
0 ~: C& o2 G: K/ V  ?% T) K* Y14
0 u6 \8 f5 p0 o& N15
7 E; B4 O! J2 U, k# L4 a16
17
1 g+ W: E( B: R$ l$ M18
( U. _! ?: E$ p% @19
20
9 s. m2 ?, l* N" p7 C: n21
22
23
" k0 d3 L- f) m+ m8 J% A24
5 C2 y8 H+ ]0 P6 ^25
26
# s: f. T; `9 X2 G2 Q1 H27
28
29
30
31
32
33
34
1 G4 l2 Y$ P7 R35
36
6 Z7 m" A3 S8 z: ~  {  |9 b( s4 B37
38
39
5 s% ]2 O) b: A7 h7 r1 d6 m40
41
/ T) ^5 V2 V9 o( R& \- y$ K42
43
44
- Y* b3 A, @1 a4 D) [9 c45
  H% Y( r+ A& l) S, I46
47
$ q7 J5 d7 ]$ w48
. T5 j) u/ v+ f9 R7 I6 T6 W49
50
51
52
53
54
55
6 q% ?; I& C3 o56
" L: k  L. W6 Y' _' G57
58
( @2 D2 @; B+ j$ ]59
60
61
62
, V2 I+ W5 B& h启动数字动效

const startCount = () => {
7 `" f4 z% {, v; }  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
1
2 [9 U, ^" u. t0 }2
3
" H. E% E- f8 G( g& Z4
$ n8 |( e( V1 P8 Y% A( J5
: W: _; l/ M) v$ p6
7
7 o5 ~* W6 V; [核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
* Q6 A1 A2 F6 l8 B, F0 k  state.timestamp = timestamp
$ B& |$ [! w: V  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
% f2 j; H- O; L! n" v  E' o, n& v  // 是否使用速度变化曲线
  if (props.useEasing) {
9 s3 G4 ^, H" A# x    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
& M2 x" J4 o) e3 k5 s      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
" {- H/ z' c& @. z: u$ `    }
  } else {
6 f0 v, q6 b+ |    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
: C- W$ N: q. d: w: w1 [/ ?8 R: u) h    } else {
' j5 q8 q* P' Q0 T      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
2 Y; q: F6 f* O1 d9 o: w. ?+ \; M  }
  if (stopCount.value) {
0 L2 B( |9 V/ M8 ~' j    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
! w  ^9 t8 t  d9 A    state.printVal = state.printVal > props.end ? props.end : state.printVal
7 O, K! r! r9 e0 \: I  }

* B1 l/ u/ J% H2 u, {  state.displayValue = formatNumber(state.printVal)
7 a% ~4 t2 S) I, V" K6 f0 A" r5 Z  if (progress < state.localDuration) {
7 j: E  p( M3 Y; P7 n9 @  l2 B    state.rAF = requestAnimationFrame(count)
  } else {
1 K( H* r  U3 L' X' G* [/ b    emits('callback')
3 {, x4 c* V4 e7 P( _  x  }
/ R& e4 R9 |  d5 }% a}

+ @( |  q" r6 O2 x+ ^
2 v4 \* @( y8 l  X: n; V' W// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
2 I, x; ?* _3 {  val += ''
  const x = val.split('.')
& ]; O- ~2 X1 P0 Q" _  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
( M1 O# J* s+ }- R9 y1 o  const rgx = /(\d+)(\d{3})/
5 M/ a4 o( b9 w( ?0 F  if (props.separator && !isNumber(props.separator)) {
( A8 U; h+ H" J9 K. P    while (rgx.test(x1)) {
* D, U7 p: }$ {9 S% i      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
) q( `" [3 x% h5 U5 Y6 l/ `( U( V    }
+ k/ d$ U( c  z; d- n- a6 ~- L  }
: t( q$ W/ H0 e- m1 M& G  return props.prefix + x1 + x2 + props.suffix
}
4 f1 w" q  k% ^  C9 x
1
* _$ ^7 B! {- B- O2 j. C# V: U2
: l) E$ k3 v" g; l! q9 ^/ I6 O. T3
* ~: d! d% |$ P4
5 i  q' u7 r; N! q7 U# a9 z8 n0 [4 u9 K5
6
7
8
$ x( w2 f& F& i- g& ~+ V9
8 r; Y( I$ X, K7 ?( N10
) C5 q0 p. B: d0 m( o2 R' ]# {6 v11
12
$ ]' w2 ?7 a/ ^5 `8 G13
+ w3 S# ]) R4 ^, o- ?. M14
15
5 z  d9 z1 R6 k9 ?  Z* u* \16
17
2 J6 |% R4 d) D. R18
19
20
9 n  M5 z! l. f9 h21
2 m" \( O% u& U! }8 i22
23
24
! {* A  M7 Y# y9 k& m25
# `+ t, [- x6 L3 p' X26
27
" G" F5 K# q4 u28
/ J& Q6 Z) F) V# K, ~29
30
- @! f5 M" I% k7 K+ q31
32
* A" q& U- d; z& |- v, T% w+ _$ L# A33
34
35
36
37
( T  L! y9 d# Y; r9 i38
39
40
# u$ q6 M  }) M' p41
42
43
5 w, h0 N) k5 V' |+ V) R6 w. s4 G& m' I44
45
( t' z+ ~$ y1 P+ l; g' H46
9 @5 I  |3 T- j% v" |( P47
. ?5 T) O& J: \3 y! Z( m48
取消动效

// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
) L9 i3 J0 I8 f})
1
2
5 c/ @5 }7 a) d. v) U( ~6 `' z9 w. Q! s3
4
完整代码

<template>
  {{ state.displayValue }}
' s6 k% K5 i% @0 b  K</template>
- Q1 G4 X/ j% @
0 \  ^( j$ e  J( G- i4 L<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
: Y4 g" z5 B0 Z. v// 定义父组件传递的参数
+ E5 F$ P4 u& a3 m" q1 S( f& Lconst props = defineProps({
6 s4 U* l9 O9 [4 v3 S  start: {
8 E6 F+ t8 r9 |1 i5 L/ N) T! F$ v    type: Number,
    required: false,
    default: 0
  },
  end: {
    type: Number,
    required: false,
    default: 0
  D5 P9 f, c  g8 l4 }  },
  duration: {
9 D' _- n% D6 F$ I; f    type: Number,
    required: false,
    default: 5000
  },
  autoPlay: {
    type: Boolean,
  W3 y* W7 T6 A, A. S    required: false,
    default: true
+ f( B) W5 x4 W  },
3 b% ^( x7 I/ W* Y; c! V0 r  decimals: {
' P% @2 t" x8 O7 L    type: Number,
    required: false,
    default: 0,
    validator (value) {
      return value >= 0
    }
  },
9 V2 t9 r5 x$ c! ?1 l  decimal: {
    type: String,
6 P9 X  d$ r. [  _: h    required: false,
    default: '.'
( J4 S$ d2 G9 O) e$ D* b  },
" ~7 X6 w0 Q7 V2 [; b: s  separator: {
& ]" l: h, C! n+ L9 s    type: String,
    required: false,
    default: ','
3 P4 p! R0 w( x. G) c  },
  prefix: {
) n" V9 W" k: W/ \    type: String,
    required: false,
    default: ''
' |) J' s5 e" v- {/ G  },
  @! H' S. D5 p  suffix: {
    type: String,
    required: false,
    default: ''
  },
  useEasing: {
' s) n1 Z: ~& E" U' }    type: Boolean,
    required: false,
    default: true
4 I' }+ Q/ D3 H! M1 g- h  },
  easingFn: {
3 t- T9 ~  r+ u) a    type: Function,
+ h& J* u3 u: E9 b/ j: N# G: U    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
3 H9 f+ c- M6 `$ h% b7 F    }
' }9 m3 a# e8 M7 O% `5 ?  }
})

const isNumber = (val) => {
  return !isNaN(parseFloat(val))
}

" h6 Y. S( U/ J( R( C  I* U// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
6 {+ s: G# A3 f+ F/ j  val = val.toFixed(props.default)
0 W) \, W  H# z' G5 z' w% e  val += ''
  const x = val.split('.')
: ^; B& h# g( h, O- {* F& j! I( k  let x1 = x[0]
, i. \! }: a. c' x% A9 _8 {' u  s  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
+ s+ ~! I5 ^% t7 p    while (rgx.test(x1)) {
7 w. i" l" G# H* B8 L; K      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
  return props.prefix + x1 + x2 + props.suffix
- q: l; @& l9 o- B+ [}

// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
1 d- x9 X' R( F) N' L! R  printVal: null,
. G& u# k, V. @2 [. P: Z7 x, ~  paused: false,
6 P, I/ E8 e/ G3 F$ {( \  localDuration: props.duration,
  startTime: null,
  timestamp: null,
- [/ {# E8 d: T4 X  remaining: null,
2 z1 u4 w5 U+ v$ E$ m$ V  rAF: null
})

// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
0 x' B$ Z( Q! G) q' i# @  return props.start > props.end
})
: d5 j( G) _  C' d; K// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])
- s1 {3 [! F9 g4 T1 p) _; e
const startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
% S# [, k) s- ~) h$ l6 w}

watch(() => props.start, () => {
  if (props.autoPlay) {
6 c! G: p: h+ I+ ]    startCount()
  }
})

watch(() => props.end, () => {
- N( D5 S" _' i3 \  if (props.autoPlay) {
. b; V8 i0 @2 M9 [1 V    startCount()
7 W* e* M% p8 u4 Z  }
})
' v0 G& i) S9 F// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
    startCount()
$ f- J- r% p$ q  }
  emits('onMountedcallback')
% t% z3 X$ `: i})
// 暂停计数
: |8 o$ [8 ?& z& k' Z% h1 k' gconst pause = () => {
4 N! O+ w1 b3 a8 `  cancelAnimationFrame(state.rAF)
! P7 Y# O& ~8 E: {/ f# K. l& C}
// 恢复计数
const resume = () => {
. s  O8 d, r7 Q/ y. u; o5 c  state.startTime = null
' ^+ T7 I* t4 e' g1 q  state.localDuration = +state.remaining
( V, L: R/ W* F( O  state.localStart = +state.printVal
  requestAnimationFrame(count)
}
1 S/ H0 o' S# w$ t9 Y' }8 P$ w
7 n* M# [5 ]+ D3 s% Z- Y# Iconst pauseResume = () => {
  if (state.paused) {
' N3 z7 b7 {$ p7 e6 n" \/ X    resume()
7 S) {9 R8 g, e$ b) u! u# G: z    state.paused = false
  } else {
! [; r7 ?# Z0 s1 T    pause()
! O8 {+ q! k/ s5 U8 T0 {9 a    state.paused = true
0 Z7 `; ~1 O0 e/ t" t  }
}
* G/ [6 R: s9 H5 ?/ m
const reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
}

( g  i2 f3 v: O7 x# ^! f& Jconst count = (timestamp) => {
, S2 d; l3 M" h3 f* [  if (!state.startTime) state.startTime = timestamp
0 W9 x7 K! Z9 s- s; u0 {6 Q, D  state.timestamp = timestamp
. O  d- m  r/ ~  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
& K1 q7 Q$ `3 M7 h2 Z& \7 e$ l    if (stopCount.value) {
1 K6 s# {9 ^2 b/ M      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
( ~1 Z( l, T) C( k  q3 C# I. J    } 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))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
8 k7 s3 N0 q0 m' ^- K2 q  if (stopCount.value) {
7 x+ e5 Z4 F3 [2 C    state.printVal = state.printVal < props.end ? props.end : state.printVal
) N! s+ G. P# a, ^5 `  } else {
! L/ q% @* f, |2 s    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

1 L8 `1 n" e2 d( P- y9 ~! I  _  state.displayValue = formatNumber(state.printVal)
! N( Z( C% E. f9 k# G7 M4 {  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
( B3 n: s/ p. N$ G( C! D7 K  } else {
! ^( N- E3 W6 Y& K" n9 m+ q5 a    emits('callback')
  }
7 G& {8 s; F! H$ z/ @& O* L}
// 组件销毁时取消动画
onUnmounted(() => {
6 W% c. @& h) L, N  cancelAnimationFrame(state.rAF)
})
</script>
: ?" U6 V9 M: u0 G- |3 l: g& J
! g6 H: h( u/ c* L) V1
2
6 Z: G0 E# N+ y# h3 G0 d3
4
( Z- W" M' k* G, f  Y0 U/ q5 T5
, w. z1 F, e2 r" ~; D6
4 _. S/ y: r: l3 t/ Z' X6 Y# _7
8
9
: W; ]" X1 f& F  ^, l+ o10
3 T1 N* b& s6 a; B# }& F11
" q, P1 j) w& p5 U* g. W, o12
13
14
15
16
17
" G. r: Q: q6 S  ^5 s" y0 D18
( w$ |1 O; a, N+ ]19
" n" \% t" \8 B: J$ G20
5 o2 A- B+ o' Q* ~7 x21
22
& R3 m6 O7 H( O9 Y& N! P- D& V23
4 X5 z( O3 b4 f' J24
25
. }9 \% Z! |% a! O26
" `4 K2 J1 _. N" {27
28
29
30
31
( F) a# |8 m* |6 Y32
33
34
35
36
37
8 J" n+ V4 }3 i, \5 `% k38
) r  U) F3 z( o! n( f9 s4 D39
40
41
) y* \. m6 o. r42
& Q9 j$ v3 {1 ^- F) c  `( r" o9 I43
3 `4 g7 c* O; ?4 L! O# X44
, ]4 h0 \/ ], {3 y45
46
! i! D8 d) n  _; f5 `47
. ~" n2 ~, a3 b48
; y1 S1 ?1 o0 d* ]# l9 J49
50
3 h3 e( I9 t4 z1 ^  B# Y' E# s  ~  }51
/ w/ |' E" s7 U: |$ T3 ?52
53
54
55
. ^& C; A! B% t56
57
58
; e0 Y( i  B0 d0 z! E59
60
% k' l! a8 F+ M5 f" |61
62
- A6 P1 `8 F, J! a6 d63
64
3 a- q, j& g* N, Q65
66
% z# Q. a: F# O4 g: @" ]* Z3 G' ?67
$ O. v/ z' v" c& s2 X68
0 D3 R7 k4 W2 A; S+ U: p69
70
7 _' f9 {3 @% ?( B) ?71
72
73
74
75
76
77
8 O5 m' E( _" p8 |. b: U78
. S9 [# e" |7 }; V' g' N0 O& d4 L79
80
9 }, O9 w" Q/ [' [5 o8 T9 z$ j81
82
83
84
85
3 V; R* d# K0 {; Z/ X86
9 p* c4 c0 l7 P: n% J+ k' x87
88
6 I3 t( I' m  x2 V4 v- \89
8 V5 X3 L( X: S/ K3 I3 H% @! M3 t90
" b8 h( V, C: p  j" R8 n91
92
93
94
" A3 L! `5 C  A" }1 v* c0 n# [" D95
96
; n( }1 p6 J" m( x- }0 l97
3 c. E4 y: M  g4 N# ]+ ]3 R6 S" M  o1 s98
99
2 T- m7 ]: ^2 O0 W* N# Z- A100
101
102
103
/ d# Q  S: _( \' u' H5 a104
: i. |2 U4 E" [$ m105
106
# P3 C9 Z  X! ~9 F' z107
3 [+ c$ t. v% Z8 u( R. V5 @108
/ x' _  Y2 `" Z: D109
110
: A: B9 C! f6 x7 i" f111
112
% e; t8 t% e& W113
, X1 z2 {5 X/ v4 i. k' p114
) r: g  Q4 N( ~+ t115
116
117
118
119
120
3 ]( {; V! d: S) u* y2 G121
1 P( M  h4 r4 `122
$ l7 k& j+ w1 O123
124
125
, o7 V  n; Y# N2 E6 U& |/ l126
6 E1 j  X2 |6 U# c127
5 T6 q- X4 [  E3 b: k128
129
130
0 ]7 {& ^1 T" ?- o" y. u131
132
$ ?2 L! P& i, p2 W* n$ ]133
134
135
136
137
138
139
. {  i- B3 y; ^4 Q6 P5 L140
141
142
0 x1 z8 o0 N0 ^- O4 }" l$ |; `2 j143
144
0 Y6 ~: O+ t3 ?2 v# R6 Z145
146
147
148
149
0 c7 R4 C* q! l! s) w- {# }- N150
" k' I& E: J4 W  y; e, Z3 ~5 o. h- h151
+ @+ O0 N- Y: N, X3 Q" c# p152
: u; f" |* Q& R7 O* q. W153
154
, ?7 W; g  d. H3 ]7 p+ I155
2 B5 N5 z% F3 y) B' t3 Y* O# R156
- ~5 z5 l$ W$ |4 A: p# N1 o157
158
+ F% @! y# f: C# b5 z159
. n6 s# l  T) k7 |160
/ y7 T+ f9 X+ ^: Q% T! ?161
+ N8 J# @. Q0 q6 Q; {: d5 B162
163
  o, G" g/ o, e, S164
165
166
! \- s- q# ~0 E9 ?6 B167
168
+ N3 D4 ~7 j4 ]169
" Q7 g5 f; `; g. D( h170
# U; N# e) \- J- F; q5 M, k" ^, ~171
; _; i: ~- F; x8 W+ T4 p# p172
6 V9 j' E8 `- B! \) b) Z, U) J173
174
0 Q3 `3 Q* o5 w1 _: x2 k% {175
4 X) }3 L' @' B% z1 l9 W& m176
177
178
3 |9 ~1 X: ~; L( F4 g; K) N# q) C9 r6 m179
; T0 t! S0 E' ~1 p7 T3 ~180
5 |, y. h1 n6 k181
182
$ H' J4 I% ?7 Z% f/ C& }6 K183
! x# l/ {4 J3 Q184
; D. z; H, _2 z: n9 B8 J185
186
187
* _7 p# [4 r# h3 J) V; Z188
189
190
191
192
193
194
$ T3 W2 `: O, a$ p! @6 G5 b195
* y& Y7 R2 r9 i196
197
198
199
' P4 m, V; `. u3 r7 T200
201
202
: w& @3 M% b  |- k3 B总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
后续的线上demo演示会放在
$ a4 d1 U" m. x5 b4 E8 T" y( ~' Rdemo演示
2 l) V. J3 ~" p+ D0 g1 a# c% k完整代码会放在
个人主页

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

4 B' d9 }5 W" S+ }个人简介：承吾
/ Q0 V# i; ~" ^# y: {/ U4 X工作年限：5年前端
地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
  x9 N8 g& j9 w2 L
* U. g2 x% Y5 x% o
$ `5 g$ Z& z  p3 E/ J1 Q3 A

) G7 J+ _9 n5 [- s4 v————————————————
' t- B3 ?" v5 }9 t版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
4 b6 }, ]; Y# t, D/ q) f  g原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
0 {+ \$ L' p! D0 L5 u9 X& y$ Y
" C- g- @7 J' O- t( P6 D1 K% m
7 b$ r0 K. |( Y! R, k