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

杨利霞

vue3 | 数据可视化实现数字滚动特效
! N' \3 G# c: e4 k  J+ p1 I5 {
1 d# M* ~0 K/ d前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
4 j/ U0 R) i  U- d" V2 P# L( ^的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


3 Z. \% j/ e* K& {思路
( O+ c* |7 l- @使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

0 R4 X4 q+ z0 L! B文件目录


% U: X! C! W9 J使用示例
<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
$ E) h+ J( Q# T0 Q% X; P suffix="rmb" // 后缀符号
/>
1
2
3
9 l- \% X! i7 A: r3 _4
' S4 a- Q( b! D* b$ f5 D3 h5
6
7
8
入口文件index.js
6 ~3 R( V" r$ Y/ ?, |. F1 g
const UILib = {
  install(Vue) {
: ?9 j: |# R  F5 T) m    Vue.component('CountTo', CountTo)
2 |, t: `* h% ~  }
}
" Z- b+ w: H& \+ r
export default UILib

5 T) [! r" V% [' e8 I: L1
/ V- x6 j2 ]/ p2 t/ @3 Z* W2
3
8 g7 A8 ~. {, o4
- n7 r. `% Z6 Q( y% f5
4 C' [1 M5 d+ r- ?6
( N% {! D9 _4 T% u) D7
6 M0 Y) c0 B6 E3 L, F4 w8
9
- J# w3 T, m* S8 ~6 e& xmain.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
' v/ @  G. b" G/ K1
$ m  X" i0 h' h5 \, g2
. @( W) W; i+ ~1 t, X0 X" qrequestAnimationFrame.js思路
  j+ C5 K  L+ I; @. J' Q先判断是不是浏览器还是其他环境
, \, q/ E, K4 T+ O. E如果是浏览器判断浏览器内核类型
1 y/ L. B' o: h2 G& u) P/ r如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
8 c, k" [  f* a' T0 W2 {// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
2 O. D# I7 E' M* J+ j( k    for (let i = 0; i < prefixes.length; i++) {
( R. J3 \* m) m8 c        if (requestAnimationFrame && cancelAnimationFrame) { break }
* y  k1 V) |! n0 c, a1 X$ n7 k        prefix = prefixes
: P5 m& O9 v: v0 o) F        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
& E" v! E6 d, E( \$ d        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
# {1 L% e9 P6 K
  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
* _: a4 z6 i, c! X& X" P! m    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
4 `( a) S' [8 X! J& f0 a            // 为了使setTimteout的尽可能的接近每秒60帧的效果
6 r% p) q; R6 A. U1 l) D            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
# X( E1 ^0 r, l- P. J; H! D3 d            return id
        }

$ ?8 b4 r6 ^5 {* c& \        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
" W4 c- r9 H2 k3 ?2 Z/ [        }
    }
% @9 L) v5 j: ?  J  H: \
7 n8 ^( ^4 M6 g  N) R3 j- C, h! _1
2
3
4
; G' u! N! m4 n8 `5
6
9 l3 z/ [$ Q' l4 M- b7
8
+ ~. M% V; x' ]  r. E* x- \9
10
! x( l' m4 ]* e8 f3 U  Y- T11
$ r+ i( z" E$ }. a/ x' Y/ O12
1 Y9 }! W5 b4 N# |13
14
15
16
! a( D" y- s9 s" |% m- W17
$ l6 ]4 W+ X1 a18
6 X/ B& t$ Z; B" N2 Y, U19
; w- d0 y( r' S8 X20
21
22
2 ?/ i- R, q2 u. Q. r  \23
24
5 S; j8 h/ s5 g5 g. Y25
26
27
28
) I* E8 ~! m( L7 m/ R/ \- X! {29
30
# p1 A7 m, K, o31
32
" o4 e" ^4 j; c" ^$ c; Q完整代码：
! Y5 n/ p4 R: H$ S: h. ErequestAnimationFrame.js
3 A/ n) \  Q3 E: `3 K/ d
* H$ q6 b' W6 ]let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
$ F$ M" |- `# B9 Q% A
; u5 S! V/ a8 x+ ylet requestAnimationFrame
let cancelAnimationFrame
" f- p. F3 N5 g" M- N4 W
$ v9 a: D: @3 D0 L// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
( Q1 A4 P1 G, `if (isServer) {
3 a) S6 b% w/ D0 Q1 S    requestAnimationFrame = function () {
        return
    }
    cancelAnimationFrame = function () {
        return
    }
} else {
3 ]8 I' E( J) g1 X4 R* w    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
& }# O4 a2 F" H" O; h! t: D  c5 p; T3 U        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
5 I$ S$ c; v4 W        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
+ Z) e& Z% B' E$ H  @
0 N) U  L: E/ g" l; C: Q    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
  o# L  R( _; r$ I) K    if (!requestAnimationFrame || !cancelAnimationFrame) {
: B8 A* E; M7 z        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
4 i6 n/ z3 Z8 |  F& z. y* g            const id = window.setTimeout(() => {
$ S, E* r$ U- q+ I0 |& z$ V! m2 V* G                callback(currTime + timeToCall)
            }, timeToCall)
/ K! h1 _$ i% |- h+ ~            lastTime = currTime + timeToCall
            return id
        }
7 B; @5 P! m6 I! p5 T% H
4 `) H# e) e5 @8 _* _        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
, p" K! t, [( L( h# F        }
; Q$ y, F( S- x4 c  d8 i    }
# V9 G# b+ h* u0 W}

! G% B4 x+ C$ nexport { requestAnimationFrame, cancelAnimationFrame }
% b8 J1 Y! u0 T; T- }6 {) c
6 p6 {. _& w. ?1 a# P/ E
1
% g( ~2 \" ~9 @5 U2 o, r0 |2
. N+ U4 v. z4 L  a6 C3
4
5
6
7
* Q/ E' x" J& i& P* G' W7 R6 }8
9
8 L; i7 W. u: g4 \+ L10
7 \% K+ e- p9 c0 d8 f+ b% c" Q11
12
  {! x3 p, K, w9 A13
14
15
% [& F! s& W$ x16
17
" ^) ?3 \/ N; x- T* X; {18
19
0 Z' c; B% ~7 W# X8 A4 M20
21
22
23
24
8 ^# ?6 {) ]$ E; X5 q; B$ R+ O' M25
26
' q- L. L1 I3 z, k9 M0 R1 m27
: H5 N2 S; E" P5 {% @5 ^28
29
30
31
32
  c) X4 }7 n/ N( Q33
34
; J/ l6 y! [2 M- e3 t5 t0 b% C35
8 j2 L  T& D& L" m' ~( G, W( h. Q5 N36
3 k3 M$ @5 t" R3 ]! |/ X% u8 N37
38
39
& z* {9 M0 i; [2 r( k40
41
+ {7 `3 {1 O. A' X2 s/ [42
43
44
* z$ v* v7 l* i' K9 @, d* `" W45
  H$ ]# t. f/ ]: ?( z46
# ]; n" c1 `! H7 ~1 @47
48
CountTo.vue组件思路
! u! [4 F( `, X( x  F首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

. j6 ?. b: d, N9 v- Z引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
  R, N. P) W- [# l1
需要接受的参数：

const props = defineProps({
  b4 S2 E  z- D, X  start: {
) G- S4 W1 ?1 i, |# ?    type: Number,
    required: false,
3 B( \4 ]* A$ {0 p' C    default: 0
  },
. W; x! p0 O! R- d$ X9 F  end: {
    type: Number,
    required: false,
    default: 0
6 B% n/ }3 t6 u7 O& p  },
% X- e, S' V# M( f' {4 X" |- r  duration: {
    type: Number,
    required: false,
    default: 5000
' F9 T  V6 n4 s; A  },
; l6 `5 F* B% u  R# {" V! |  autoPlay: {
* ?2 E( _8 o0 b* [    type: Boolean,
    required: false,
    default: true
  },
$ a4 j2 n2 Q5 Q( M$ y. s  decimals: {
    type: Number,
! |$ h- L8 O% e9 O: L9 ]! Z    required: false,
    default: 0,
    validator (value) {
1 o4 {8 Q3 M# V/ ], ~9 H1 C4 M      return value >= 0
, ^: t6 m3 s% R1 G; ~: Z    }
  },
  decimal: {
8 W  g( K5 x. m    type: String,
    required: false,
0 O6 s3 Q7 F& I: }1 q    default: '.'
  },
' E. ]: `! `/ l& c4 j  separator: {
    type: String,
    required: false,
    default: ','
9 r" s  C5 N- l/ J8 L. L! w2 m  },
  prefix: {
    type: String,
    required: false,
& B) z' j6 X, [; m4 h- p5 s! L    default: ''
  },
  suffix: {
. }; B) t3 P5 S4 {    type: String,
$ v) T, B/ ?; V! d/ D6 X( l# O9 z    required: false,
5 w3 X$ p7 e9 j% t5 K    default: ''
3 l4 l3 r  t  l: l/ K+ z- P. \  },
  useEasing: {
    type: Boolean,
! B# \6 @- }/ l5 D    required: false,
    default: true
/ c/ y+ Q) b0 {# w9 R  },
- v6 H3 M% M) v& u  easingFn: {
    type: Function,
/ i2 z, d% m: U% k; y. A    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
( L8 `; q. Z; \# v})
! W) H7 b, V* O  D# Q: o1 Q& b1 |

2 |8 Q5 X! F5 M7 H% f. g1
2
3
4
5
6
0 s6 C7 D& F& [/ y2 ]8 ^: T7
( f2 G! v0 p& o, O% ]8
9 Z7 d" L& G' s9 l+ |9
" P2 Y* Y# q  \2 \. M10
( c1 c0 b1 t& B! G+ M) @11
12
13
; M! w! F0 y, o* V; X. v14
15
16
17
# n5 B2 D4 ~) m( G: ^* h18
- ], Q/ T; E9 V6 O+ F+ ?# ]! j- D19
- b- T3 c- @- s! H1 v2 i20
1 ]: A8 d1 Q) u6 d. ]6 `21
22
23
3 A# G7 l: a0 O5 C24
25
6 B; {9 g) V! ~3 R26
27
28
3 k# M) o+ }# H: w6 j29
30
. l6 A0 _0 d% f) y: L! j31
7 K; u" H4 Y/ c2 x32
) W5 b. ^6 k4 D. p# g2 X33
34
35
+ D/ B# C. v. L! y1 ~4 y/ A36
37
; Q, L! Q0 e: O4 Y2 T38
8 Z, X) @. R6 t0 _; m7 O1 X9 Q& L- w39
! z' y) E( ?+ ~! e0 E/ U" G40
41
42
43
44
45
46
47
48
+ Z  @$ v% D4 |49
. @! k! N. B# Z50
' d# B) @! T/ o' _) ?5 _' I51
2 z3 |+ C) ]8 C* g: e; W52
( t( e& g2 `  G0 R( s53
" l. L, ^; `$ T$ U54
% `4 L9 f, W/ o. v- m" v55
2 U, h+ `& Y1 G' O! p( B* q56
1 y) O& _# g2 Y; S' p57
( t" v0 x+ ]8 _6 t0 S$ `58
2 A2 u( f3 n' G: {% [5 @59
! K4 H; S; z/ m3 l60
% s" m# O; C2 c  O+ v7 @8 [6 y8 m61
62
. U5 k* ^9 d! B( l启动数字动效
- @  n/ O5 J6 u* R) j
const startCount = () => {
; o! g( U- l% `3 m' L( Z2 Z  state.localStart = props.start
  state.startTime = null
0 z6 `" _1 y" M  state.localDuration = props.duration
+ W5 E5 j; N+ b) e) f4 Q  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
1
2
- q( c/ i7 Q+ J0 X1 d* r  O5 ~3
8 ^. ^5 y; t& V0 Z( K* i8 U4
5
" m, `. D  K. ?. y, Q& c6
7 x! o: z; `0 S7
核心函数，对数字进行转动
0 _  z2 p/ ^; D5 |  D! h
  if (!state.startTime) state.startTime = timestamp
, b8 Y( U8 F1 @; W! t  H, u  {  state.timestamp = timestamp
9 A7 |1 |) ?* h0 J3 t1 {( p% i* z  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
) s! d  I3 [  J& d. X* }  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
6 G0 X1 H3 o1 `0 f! F      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
: i+ c- w. }, F7 z5 M3 t      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
    if (stopCount.value) {
& Q& z9 v0 T9 F+ L) b8 \% R2 Z, w      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
% X- i+ x: i0 Q: r# X3 p    } else {
  W* v" b( }% }1 n# v. v' n7 B      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
1 n# Z$ t( s5 U8 H    }
& _7 @8 X$ X  {  E  }
  if (stopCount.value) {
! J( Y  T( M( c# C# h9 v4 b    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
  v- p( D; A8 h0 X
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
& t& \  \0 z/ q: Y; t0 y( i    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
}


// 格式化数据，返回想要展示的数据格式
6 i8 T- a' b- ]* i9 Gconst formatNumber = (val) => {
# x; s9 {8 ^5 d) l& [$ p& j  val = val.toFixed(props.default)
  val += ''
) P) m, G) I( |+ h: s6 ~  const x = val.split('.')
  y7 v( |$ H, |  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
4 d+ ^6 R/ }8 U+ h' U  const rgx = /(\d+)(\d{3})/
, z; t& U$ F5 i4 V- \  if (props.separator && !isNumber(props.separator)) {
* J/ F8 g! a6 c/ q" m- [6 j, F    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
* n) W+ D2 G! t& m2 h    }
  }
  return props.prefix + x1 + x2 + props.suffix
}
' r" Z6 N/ w% o8 u6 G; s$ R
0 K) e. Y, l8 V: @, A1 J. N& o+ U1
6 I: ~1 [, x  e6 x- Z0 B0 t6 C2
7 J3 `0 {7 }. W7 [3 @6 Y/ `3
$ i1 L1 J0 W/ P8 p" m7 k! y4
4 S# `- F% Y5 U5 I9 D5
% |0 r% q4 ~  x0 T6
7
8
% T0 @$ e2 i# q$ h% }* k& y. S# g9 `9
* x4 v% e! j3 o1 t9 @( h% Z- ?+ x10
11
12
! ~* `6 S9 ~: z' r2 h$ }13
: N' _, ?+ T( O: g14
1 h! p& x. y4 n" q9 _# T- w15
1 ~1 D! c3 Q" v2 s& [: X4 y/ e16
17
18
3 e$ m7 O5 \) Q& j6 U19
20
" }& d& p6 R  r' t21
22
6 ~% u( T" c* i9 M" _; Q& `9 O23
24
25
26
& n5 r/ r6 T2 `# g: m+ l4 O27
% m1 p- k3 J) p8 v) N# V28
" v3 ~( C7 E( r29
30
31
32
' L: t  F0 K& t% |# [8 @2 K33
34
35
36
- T6 @5 r% n1 v- N37
% [) `! [1 V0 p4 v: w* @+ P% T38
39
" w$ c! S- [! d, d40
. Q- p" H4 l9 j( r! K. J41
0 L, U+ I! ]; ~7 u7 ?; ]5 ~42
9 `$ c3 I* Y3 K5 h4 ]& w43
44
, f, K/ `9 N- s6 G9 Q3 h) h( X45
  l2 Z. ]* i, P4 ]3 v46
47
6 w) N* t5 N" @% B, z48
取消动效
! U9 w: O9 v# j# \
// 组件销毁时取消动画
$ Z$ s' {5 b5 O  \2 aonUnmounted(() => {
  cancelAnimationFrame(state.rAF)
" k+ o/ a) ~- Q' h7 h( }, N})
6 O" C7 A# e* M: l- j1
2 K8 V! S1 r; J# I( M" o2
- P" j0 @0 M- ^; j9 f+ t6 w3
2 f$ G* m' M0 Z' t9 d- W* E) N4
完整代码
( F  E5 E" e3 s  a, x1 J: }- W- c
2 [8 ]& Z* @* @8 O: y<template>
  {{ state.displayValue }}
5 Y; G+ z. o% Q  N) Q+ a+ Y. u</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
2 l' S* D" w& Cimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
9 c. r, Y/ D2 r" b8 ~6 [import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
6 T; F! L5 z6 }7 c! K* r// 定义父组件传递的参数
const props = defineProps({
  start: {
    type: Number,
    required: false,
  O+ g) }5 p8 `+ [    default: 0
, a& K' A% f. A) S. A$ j  },
( g) D' R4 S- F% H, \$ Z  end: {
    type: Number,
    required: false,
    default: 0
$ h% Y& \! P* j; H, H" L2 u  },
  duration: {
    type: Number,
4 K$ }: A5 w: L$ r% T# z& b# u    required: false,
    default: 5000
4 n, z$ f! \1 v' O  },
; K( T6 \; O- R  autoPlay: {
4 |9 b" Q  f# D5 C    type: Boolean,
    required: false,
    default: true
  },
6 W  U0 _: c( i& Y  decimals: {
    type: Number,
; c- W! T$ \% _- F7 x  V% R) X    required: false,
    default: 0,
0 f$ T$ v- Y& I" \& f8 E( Y    validator (value) {
7 p- j% u9 E2 s# ]6 y. n      return value >= 0
    }
  a5 y. l+ I/ E- W) R  },
  decimal: {
    type: String,
    required: false,
5 N9 c* H! _! U+ x    default: '.'
  },
  separator: {
    type: String,
( {/ v% V5 c( I& T" Q# L7 q    required: false,
9 w! h: A1 s" }3 G( h    default: ','
  },
  prefix: {
    type: String,
    required: false,
    default: ''
  B$ K  g* r, `* G0 x. x  },
  suffix: {
    type: String,
    required: false,
    default: ''
  },
  useEasing: {
4 c: x& |6 Z7 b  P1 }    type: Boolean,
    required: false,
    default: true
  },
) m8 T2 J: N; P& r# ~! b/ N  easingFn: {
7 s  m" L6 R/ D4 d% H$ P8 I3 V, @    type: Function,
! k/ }4 J2 ^* |2 }& F/ y    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
) j2 S. ]: U* t& Y6 ?$ ]$ R    }
' q+ D/ T8 V( L$ H) N$ n7 R  }
, f- Q8 T; Q8 x: F  C})
5 [, [3 d4 D. f+ q
& s% q2 j5 d8 H! `6 a  }: a. econst isNumber = (val) => {
  return !isNaN(parseFloat(val))
}

// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
& `" F+ M5 M3 g$ v) V% e& H1 S  val += ''
  const x = val.split('.')
  let x1 = x[0]
% p7 S1 `4 r4 q+ z/ n& O  const x2 = x.length > 1 ? props.decimal + x[1] : ''
/ W0 r% K- i: W6 o7 I2 P: |# S  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
) i# i& l1 u- q% E0 B    while (rgx.test(x1)) {
7 {' A) T5 U# b0 s8 K$ i      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
4 M$ l& U9 E( f5 x! s- [" j5 Q  }
  return props.prefix + x1 + x2 + props.suffix
. J% [& o$ K) N# O* q}
. }  j3 V9 `; p, f$ `, q
& x  m7 n9 L; I1 v; E2 \: T! \// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
  printVal: null,
- n, X# G* z; ]) o5 y! h  paused: false,
  localDuration: props.duration,
, G/ X( o* x, v$ ~' |) J0 f" O7 i4 X  startTime: null,
, V: D4 m6 w' ?2 I  timestamp: null,
$ W/ @# d  W& U3 V$ s8 F, C7 H, r  remaining: null,
  rAF: null
& w  u) t3 J, i/ s: F})

; }% A* a! `0 ^* D  W4 I7 L( L// 定义一个计算属性，当开始数字大于结束数字时返回true
) N' l/ `* E# N! wconst stopCount = computed(() => {
  return props.start > props.end
6 @* |/ K1 m' C( R" `9 z})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
% J% J$ B5 A* @) l2 a9 ~const emits = defineEmits(['onMountedcallback', 'callback'])
. c- n/ D$ F/ s$ Z6 {% S  Y# I! \
const startCount = () => {
9 t+ V6 T/ X0 o$ x5 ^  state.localStart = props.start
. N( ]. m  I6 N7 T2 _  state.startTime = null
  state.localDuration = props.duration
: ^+ n2 f& r8 |- |% T" z0 p1 ?# O  state.paused = false
  state.rAF = requestAnimationFrame(count)
; b# B" F6 o; F}

+ v. f, b' j$ Q/ y2 Swatch(() => props.start, () => {
0 v2 @' H$ n' X( G; l( v5 b9 J. h+ r  if (props.autoPlay) {
    startCount()
  }
})
9 H% r: D3 I/ k* [5 L6 R. H" }
watch(() => props.end, () => {
  if (props.autoPlay) {
    startCount()
  h) I# P2 @5 ^7 C( E- L4 q  }
})
// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
    startCount()
  }
  emits('onMountedcallback')
})
// 暂停计数
1 ?# V( X1 b9 p8 }const pause = () => {
3 K( `4 c9 W% S( S  cancelAnimationFrame(state.rAF)
}
// 恢复计数
) b: J" x  _1 H" e0 X0 zconst resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
, g3 P0 W, H+ J" ?" Y, i  requestAnimationFrame(count)
}
7 u$ B( s3 ^: X, y
2 Q7 ~: D7 ]: _/ c/ Qconst pauseResume = () => {
  if (state.paused) {
    resume()
    state.paused = false
  ~- }7 B  p- X3 m& E" }  } else {
( Y, F7 K- }! @# Y  N    pause()
2 B( T% |3 Z6 K- C( D    state.paused = true
  }
}

+ J" V! t& {8 _; E8 [const reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
! G) ^& U4 h/ y  state.displayValue = formatNumber(props.start)
}

8 i% ?" _2 g) q! c6 kconst count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  O+ }. k" G# n7 W6 E* N. o# z  state.timestamp = timestamp
  const progress = timestamp - state.startTime
% G1 y+ N: m# r( K5 Y! G  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
' E+ z, g3 E+ h* V5 D8 Q' H    } else {
, x; |8 ]0 G( ]) f- f( L      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
2 [( b+ A9 ?# M. t" J: `    }
$ n- u+ S2 f- K2 m6 @' z& x  } else {
0 B8 K( N! [9 g# [    if (stopCount.value) {
. s: W2 H# n# b# g, p( M      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
8 w9 @' Y, g( L: C6 b1 W    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
) e$ Z6 ~' K4 P1 X( C/ [. b) ]  if (stopCount.value) {
! U: ]& z: V& V0 |7 h) f    state.printVal = state.printVal < props.end ? props.end : state.printVal
/ N* s; x; V* \& O4 H8 o. r  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
5 _' [; Q* W2 R. V* g8 t. L  }

  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
9 ^' u& [7 L9 i, E, q+ @) G    state.rAF = requestAnimationFrame(count)
& O9 _1 Y8 J2 |6 i7 }  } else {
9 G* t9 m! j6 V) [    emits('callback')
" ?* G) o5 h) f; |0 B  }
# C: o9 S  m( P7 Y! f- j( R) }! Z}
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
</script>
6 I$ y. w  v/ l* m! A' i. Q" u
. M. {+ R1 X% f* z1
+ P( J- {. A/ |# W1 {: R# _2
3
6 s2 m3 Y4 Z: r  H* I4
5
* q. H7 h! ^. L# e6
( R- R& f- p8 w5 B) c8 O4 ?7
  y$ [3 [' o8 R8 r+ l3 ]4 b" j" A8
9
  }; H, _2 A1 r9 K" p10
11
/ @5 W7 f& z3 m; P  `12
13
14
15
16
17
18
19
% K2 u6 m' o, i/ N20
21
% P2 J2 b6 N  M- q  F2 q% r22
; |; ~1 T. U5 f23
24
7 J+ [/ K; f$ C% L. N+ ~25
26
27
28
29
30
/ u9 M1 Q! k1 g. h& i$ u31
32
7 i+ A; O8 f& M2 {33
8 Z! B$ Q& W8 j; [( L3 V34
* T+ }% I: R9 }( @35
8 s/ S5 J" \& }( J$ s36
37
% P) f/ }+ D) E* d38
) s; x1 B0 m& N. J. d39
40
41
42
43
  l3 k  t) p+ L6 c; o44
; k" a' t5 R0 q! f45
46
47
48
49
. P' N2 y! K( p3 N50
51
52
53
9 p6 S% Y' O; d$ t8 ~# l0 S% q54
$ Q6 Z6 v& D/ t" B4 g9 B* {55
* J9 G# S8 n$ m6 h56
57
58
! T% t* f: ?/ r( i+ p0 P59
+ M6 a. a% v6 w/ T60
) K" c( s  q5 `8 ^" O* M. P61
4 M( N3 ^3 R! R0 c1 X8 y62
63
64
  v) Y, ?) l3 `+ k+ O+ F65
% {8 A$ |. |8 l& p( p) R66
& D" G" m) o7 t$ f67
" q/ n" W6 ^% m5 i68
' M) F& m) G, W1 _4 }69
70
71
72
73
74
75
76
77
+ {3 H& B& o8 ?( g5 v" m- {78
& |8 X8 _/ A4 v; {0 E3 l79
80
81
82
83
84
0 i7 W) R' u- @3 c85
+ g4 z: V% G+ f8 C& W. s7 p86
4 h% p* L& S+ L: F# }87
. [3 g! A, a2 a2 e0 ]3 L5 l! m0 T88
* M" n0 s' m% n! u' J2 h89
$ |( G5 [, Z; b' L, L$ p90
91
& f9 B# Z! u3 i3 [3 g8 u3 o92
93
$ ^# s4 c3 N7 q4 V6 v" f7 t- j94
95
96
97
98
9 R5 ^$ ~! c1 u9 t99
100
101
102
103
104
105
106
2 Q, m5 [% N! x3 ]107
108
109
6 N5 q. i" {9 w110
111
112
  S, X! w; \8 ~113
114
+ |6 g6 T2 s' o% ]# ~* v115
& p7 _4 n3 {) l. n* p  _7 U116
& u* }# ~) I2 d. e, q; i5 s9 d117
118
" g9 g* d; P& J" G) O, s, i119
/ D4 f  Z( p$ P# ?' A% u120
121
122
123
! h  ^" R3 s/ J124
125
126
127
128
2 t. V8 O. R1 G' O6 i+ _4 ]) X. M129
130
131
132
+ |9 k9 o9 q- C7 I2 b% \$ p6 T133
134
9 g% K( i$ G4 O  }135
136
3 K. u2 b4 b! n; l- V2 z1 H137
138
5 f2 v  M" g3 I3 o# H139
140
5 ?( n" F  d- R  }- \5 m! Z. V141
1 f5 q9 T4 C* C142
, Y5 k$ T0 ^  _4 B; }; ~143
2 o' Z! C5 b8 b% F) V9 Q144
2 c- q/ c/ b6 Y# _145
8 S& s6 w/ h4 S4 v" @+ Y146
147
148
149
3 j% u7 B& u& _$ P5 l( |150
6 l5 ?! `# K, h2 m151
152
$ q- t- y3 M" X$ c# t153
7 r) @/ t% O% s$ X' r5 w154
155
" m, e0 q7 S1 v6 p/ d" L! z- A156
157
: B0 O, n9 p9 F3 }/ S$ }158
/ Y( i! f' V) s) l7 }* {  y159
160
161
# P# R* j% d7 ?0 P1 k162
: z$ W1 P, a) w# c2 U; T& p163
1 _& V3 t4 l5 Z% e$ X4 A3 t7 I2 B164
! t' H4 O2 `& q5 Z. D+ H165
) L* C1 |$ v5 c: F166
167
2 p7 C4 w5 f( D5 X& R+ b168
3 q1 s: ?6 v: ?8 w169
170
171
- s/ R, S2 `) _, ]+ o. Z8 b' A6 j172
173
. E$ P  O. ]; e' z* V  h  {- _174
175
2 X$ {  S! @6 k, S, U( V7 A176
+ i/ i4 R% d1 `( F) d  m( y# W177
178
" K% E& W: c$ x; m2 w" o179
180
181
6 S6 [% w: x& |& m. G' m' v182
183
184
1 u4 |7 G; _4 f9 v; y% D6 j6 @185
3 G# R0 P+ x1 g/ y' q4 ]186
9 N5 I* ?* \7 E( I" E( l; B187
188
189
190
8 ^/ }( T( ], W2 V: V191
# T. V* M$ T# Y, X# J, y# b192
3 y; W4 i" S6 o0 J2 i193
/ {% G% v- e3 a, `0 L4 h194
% Y( I, G# l5 z: [' l. i0 w195
! [! C) _- i% i$ R+ u196
197
198
6 Z$ y9 t3 `  z- ^8 O199
. I; A% k' r3 ?2 e8 a' t200
3 Z0 i. S& }4 O& _201
202
总结
8 m/ t4 Q. p$ F8 r7 P. _自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

. O3 t1 P8 U" m6 m/ \' @% v5 Xdemo演示
; N) M; T/ ~7 P0 y后续的线上demo演示会放在
demo演示
完整代码会放在
/ T# }, J* [7 u( @9 I- w9 t个人主页
0 T+ J1 q5 E" b9 L  X* N/ C" Q1 c( T
希望对vue开发者有所帮助~

; ]2 B; p; [# d5 A个人简介：承吾
: E1 e; b3 N& k工作年限：5年前端
地区：上海
8 Q' P' }+ @3 c, ]) s' a" ^个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！

! ?& ~( e. a. y+ |2 P! u7 \1 I) Q
5 R0 V! p6 `+ ]! c8 m* s

5 |! k  a& C7 r2 H* }. Y% ?" T————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
6 f- Z5 @7 c* m* b
7 [- k; q9 K' x: n4 D5 Z
& F! s0 g2 C: s: q% J