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

杨利霞

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

& b% A/ S" L  E; m: ]& N. ~# @5 ?前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
+ D9 Q: L1 ], D: C" N" _6 H4 uTypeError: Cannot read properties of undefined (reading '_c')
& \! C& U5 V( w  Q* M" _) S的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:

1 X1 }. T! |. u) i- {: O3 L0 O# {% L
  f( m4 j2 `/ }& Y思路
+ E  K- ]& Z2 K  Y0 ?使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
7 h2 s. _! h) `7 C0 p3 O
文件目录
+ A& @( k& [' Z8 S
" w/ i. {( b: V5 W
* g# J; ]* d, V- T" o/ W# |, Q使用示例
1 n1 }  H% I1 V$ {) P<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
" Z" b% U2 J+ H5 I1 j5 O prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/ @: E3 S/ M) l1 ~4 @* \ />
1
) l8 E8 D$ h: T$ e: ~2
: Q4 B" O: L, ~* e6 I$ }* M" f$ W( D4 `3
" J8 [9 V* T, `; T4
+ @* }( Z' \4 [' ?* p+ ^) h5
6
7
8
入口文件index.js

const UILib = {
2 R7 l; N  A/ {% B: R& F- s  install(Vue) {
    Vue.component('CountTo', CountTo)
3 W$ p% K0 T+ N+ f1 O8 G! \7 n0 O  }
}

export default UILib

' m* P/ b1 X& L4 n1 D) H$ r1
3 u  I5 p# M" l' ~6 a2
) v. p  g  [: ]* U5 d" u6 u; k) s3
3 L( j7 \) X( N; ?  ]( z4
* C: Z9 O$ }/ j$ d5 C5
6
$ ]8 y. T2 T9 j  t7
8
+ o  K  x) ]. |/ w, g8 p9
main.js使用
# F9 z# f( }4 H) y/ H  Gimport CountTo from './components/count-to/index';
app.use(CountTo)
' O0 ~2 k* [2 w4 f) D1
2
& r6 C5 v# O1 u6 Q7 l# b/ ?% j& s, trequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
+ z' @: e, }$ E# O4 P( K如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
5 `$ T& ?  B7 E( G8 z, s0 }导出两个方法 requestAnimationFrame, cancelAnimationFrame
1 F0 x9 n; M4 I* x各个浏览器前缀：let prefixes =  'webkit moz ms o';
0 R4 e( |0 V/ x  d判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
let prefix;
0 u( \0 L# ]. |* Tlet requestAnimationFrame;
let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
7 L3 \- {$ U0 b' u7 p) x0 H    for (let i = 0; i < prefixes.length; i++) {
7 k1 ]. K/ P; m8 p& R        if (requestAnimationFrame && cancelAnimationFrame) { break }
  ?; ]$ Y1 r5 p- l/ y7 b. U        prefix = prefixes
! P+ e* W) D3 _$ w0 W1 {( `% P        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
. c& [% W3 g! n        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
; u- v+ Z: t- Y3 ^( a    }
, I# s/ o, V& r1 G( F* w/ q6 W
2 M5 t3 i. n/ c/ h& a/ |! Q  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
7 e. p2 S3 T! {: C9 }0 s7 n            // 为了使setTimteout的尽可能的接近每秒60帧的效果
/ o6 h2 D/ h4 N  o' q( N            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
" [9 a; \; P7 ?+ y                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
& t! Y: d  B9 G8 n  w5 L% f        }

        cancelAnimationFrame = function (id) {
) T5 [) P9 t8 C/ Y9 i            window.clearTimeout(id)
        }
    }

0 O: {) l# Z0 Z( ^1
2 s/ I) x# ]4 V8 x, C5 Y1 m) l2
3
4
7 N9 x  x9 G" W/ g$ H6 n4 B: f5
6
7 R+ K2 p! l# L; B" U7
8
9
10
1 d2 d6 _+ N1 {* P9 v7 @) y11
12
! q$ G4 H2 V  D' G# |5 P" G0 Q13
14
; \: D6 U( W) y15
, i9 ^) P" ^0 H+ f8 U9 m16
17
  `( @2 v2 P; ]& A18
9 i3 j/ R3 n; s# L  S19
20
5 M+ H- n: Z, h6 r5 L* X. i: w21
# g& [  h+ c6 e1 W5 q0 |22
23
24
' d. D+ m8 s4 P25
26
$ C4 k" l7 o: }1 V# y" C27
28
* t  `/ U! ~; p' z8 N! |# q4 U29
  K7 k* e# @) i& }4 F30
( r0 g+ H% v" X' x31
0 ]' }. w3 X" d4 S% y32
完整代码：
1 v0 u2 n) s7 ~- {" `requestAnimationFrame.js
) Z. b) G4 r5 W" b) o
let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
+ ^" v& |4 k+ f* p; T' e: w# F9 @
let requestAnimationFrame
let cancelAnimationFrame

// 判断是否是服务器环境
* D. K1 o+ u  H* d  ^const isServer = typeof window === 'undefined'
if (isServer) {
* B" u! F/ i8 V2 l, L    requestAnimationFrame = function () {
' m$ e1 g( T" |# V        return
    }
    cancelAnimationFrame = function () {
  X4 p: ^# c+ y+ q/ c) B5 c% m        return
' Y5 a. Q; B7 J# _    }
} else {
    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
1 l. C% A4 |# [" I- x    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
9 v, N- [. l' B% o, v$ l0 ^        if (requestAnimationFrame && cancelAnimationFrame) { break }
* e7 |1 M) l9 r, B8 T        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
8 g4 P9 R2 y6 u4 C1 C3 p2 @            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
. @! L% W- Y) I8 n            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
% B( a' a+ h, h" G: y1 a' \% `8 ^. c                callback(currTime + timeToCall)
0 A5 x! c3 C- @$ @            }, timeToCall)
+ v9 |* `5 W  G; l# R% ^, \            lastTime = currTime + timeToCall
( x- E& `3 f! d3 A. }; V            return id
        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
: V1 C- w$ z2 p# E: B! }* P    }
}

9 r3 J, O3 @# Wexport { requestAnimationFrame, cancelAnimationFrame }
$ q. H( w0 G/ z7 _9 h) N" K
3 `2 z# P( O& ~6 o& r
1
) ~3 j- x( J2 G6 x7 M; w4 z: H9 T2
3
4
# s0 A, [" W- C3 K. ?5
6 R) G5 L0 w" S, I, D% n6
4 n& Q! P5 f; ?% Q/ t* n  U: V7
8
( w, T$ f, W2 F. a  a7 z$ N9
10
11
12
13
14
15
16
17
18
19
8 J+ c9 p7 w- k7 D1 m. ?20
21
22
23
24
7 m- i% ^5 `. V' d) x- p25
7 R* R# s. |$ V- R; k4 o26
; N0 d$ j+ p! q27
28
29
30
7 _, S! B& W6 u% y  @% ], m31
32
5 l2 a# I3 B( x6 i6 @: E33
  o) }  v- e- |8 Q& X+ m* o34
% s& v; ]* g' B* \35
) n& v) {5 i% q- T( T3 x: r36
37
38
3 b3 S; K  ?2 y* t, B& @# K39
# q9 M; X. [2 @40
3 B$ Q9 K/ ~( D4 x. z# j41
- @" r4 g$ U1 }4 L. x4 {42
43
44
4 z# K# ]* H- @% O7 z/ \45
46
47
48
7 _9 Q' W$ X4 o/ WCountTo.vue组件思路
! ~- x' o5 i2 x" e/ ^9 @! F: f首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
3 p  d. ?* B: L8 p: G  ^! r/ j9 ?  |
5 B4 D' H0 }) u8 u  Q引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
0 H( t2 x: ?$ P' W8 |3 [! E需要接受的参数：

const props = defineProps({
" ?) q( @3 }! g9 S  start: {
! n& k& p! w( K$ ~( j* U    type: Number,
; c# V$ G7 t1 ?$ e    required: false,
  R5 N% X5 W3 S, A# R9 j" L0 O; u6 J: ]    default: 0
1 _6 h1 H7 d, T6 B5 J  },
  end: {
- l9 ?4 p; l: \3 T) k  Z0 n    type: Number,
    required: false,
    default: 0
8 I$ M0 M, a5 Y0 d: V4 _  },
! J8 j  s# Y3 L  duration: {
# |0 ~) R  J; w5 o    type: Number,
( {0 K; s( K4 ?    required: false,
' `. z" H- t( ?    default: 5000
" J9 ?$ B% S) H0 G2 Z  },
  autoPlay: {
: k, v' f! M, v* c7 Z! m    type: Boolean,
    required: false,
( P: S6 k$ i- H3 g+ L; B) t    default: true
  },
8 q+ b% F/ q( n* e  decimals: {
    type: Number,
! |2 T( w7 r2 g3 r5 B    required: false,
    default: 0,
    validator (value) {
2 ]' [5 \  x; ]* Y* |7 o7 o      return value >= 0
! r9 }- {$ G" C, m    }
  },
) ~( g2 t/ K; K1 d! L* P  decimal: {
    type: String,
! m2 k2 O& c, K0 C    required: false,
    default: '.'
  },
  separator: {
    type: String,
    required: false,
    default: ','
  },
  prefix: {
    type: String,
    required: false,
    default: ''
4 ~' S- u- K$ Z  },
% V* O6 d% j3 t+ i, z  [' R, @  suffix: {
: ~0 f  \2 P- M  o    type: String,
- }* S' ?- v7 \1 S# f: A$ l    required: false,
, l9 g0 m7 U" p+ |  ~    default: ''
8 t. [; S; h0 r  t" v  h* P  },
  useEasing: {
    type: Boolean,
- C4 h4 [; x; b: }6 D/ C+ D    required: false,
    default: true
1 H5 B& K  l1 U1 d" M  },
% u5 q. S+ D* F% d  easingFn: {
    type: Function,
( E2 d6 i" E& Z* M% `7 ?  h) H( g    default(t, b, c, d) {
9 @8 R' x6 J1 a8 {  M; r7 L! x5 D      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
- l; `: O3 f! t) Z    }
- t# T/ Y% x( m2 U  }
5 s( j1 h( H6 i* R})

7 S9 d% J3 h6 D0 g% y$ _% b$ O+ n
1
2
3
4
$ Y1 z/ q' a' v9 K" n: Q5
6
7
8
9
* M6 ?! c0 p# G: A7 a- l10
5 `  h5 V# `" P1 n11
8 O' _" `6 U  W0 p) K) E6 v12
13
& t! B; ]  q+ C/ w- a, ?5 v4 Y- d14
15
16
( o3 P, c% I3 Z2 f$ C* {, H2 S. W17
" G5 y( x) J0 o8 {- y% p18
4 F" g% ^- h2 [, J1 W8 v19
20
21
22
& n! V% A# P# i  R23
, j) s0 x2 i) |* F# @) ?24
25
4 Y) N$ z8 x, v& A9 q- T26
* L6 p" C6 b! X: b( O6 ~27
28
3 M/ o7 k( D+ V6 V* \4 ^) e29
7 J$ k; N  h4 T  o* ^2 m' |30
31
$ ]8 y" O: B  {; e: M# o32
33
34
' \: E& T9 _5 u/ O) r2 j" M7 j35
3 W5 z! @6 E2 A% n' d' W36
37
38
6 l9 o0 k( K% L39
40
41
42
. M3 o& i  c5 D6 \: j$ Q43
" p7 v# I( S, L# q44
45
. r2 c$ G$ Q! `) I46
( F( }: H4 q% ]: w$ e6 i& u47
48
49
50
51
+ C9 L( V9 m3 B8 Y7 D- t7 B# O52
53
54
55
56
57
58
0 G6 s7 G2 |4 T59
! C+ r7 P1 U; H60
2 c8 C; |5 u7 i' e0 O. t7 A1 o61
! }( W: ~8 H. T) s5 @. c- K' w62
启动数字动效
% z6 u2 e8 B, ?# \  t4 y9 |3 v& n
const startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
8 h' l5 g8 `" H1 c: s  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
1
2
; o) g/ s7 y# R3
4
* K) q' b9 D/ q+ N5 N7 D5
/ A% H% Q: U. t0 R, g" c6
7
  A% [( Y+ g5 w! C3 Z" z核心函数，对数字进行转动
! m8 _  E# m% z5 |7 j
9 Y0 j1 B. j- W0 w' ~  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
* y/ V4 q! }* s: G: ]/ z9 a  if (props.useEasing) {
    if (stopCount.value) {
9 k" a$ k! M5 ?& ?4 ^/ ~; D      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
& {6 Z6 t6 n, _2 w8 I2 S    } else {
# S$ a7 w5 l. h+ z% M      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
, Y5 r  I+ s+ S& s2 U    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
6 ]8 _% h) e8 V; u8 y9 l5 g    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
3 k; o8 v0 n5 _; z# ~    }
  }
  if (stopCount.value) {
5 s! k- C  ]& @; [" ]    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
8 N% X. S0 p% n% W
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
8 i! E2 e0 c4 m( P% n- [+ d) o    state.rAF = requestAnimationFrame(count)
  } else {
; z& o5 u# F& G" b$ d: Z3 O    emits('callback')
. Q& w4 A$ `4 g4 f, J( j0 g3 H3 u  }
+ D8 D+ H8 F# X}
7 y9 x% ?1 [* ^6 Y4 \4 W) E6 W: d

& m3 J9 `  m  }# X! K4 n4 b& L// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
& y1 c. ?! t! f" q/ V  E  val = val.toFixed(props.default)
  val += ''
8 C2 T1 P, B. g- {) b+ X8 o  const x = val.split('.')
2 w' b2 v. d' f, V9 j# ^7 b  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
# o- |" j0 c+ U, w* ], s4 r* v: H  if (props.separator && !isNumber(props.separator)) {
1 v, i+ _% |/ s- \) ^1 Z+ r    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
, @. [3 Q' \. m; X! R/ k$ O% n  }
  return props.prefix + x1 + x2 + props.suffix
}
* J. R% J- E2 Q' p# A, ^
1
& `/ W% D( E' F( ]2
3
4
9 Z! _; d% M( G( E2 d5
; n) c9 v2 K& E" a6
7
- s4 W8 }! e9 M. \' j$ M6 u& o$ i8
+ q8 k! y5 s  _; H% w5 E9
10
2 E( n' m2 M( y  S11
* W9 `' X) G1 L/ E% L, g12
( x6 p! H/ m1 X3 r8 a13
14
. N( G" y) b+ Y+ J5 }+ t15
16
17
18
, F* o% ?$ A5 e3 s* N7 b19
20
21
22
23
24
25
# t7 o; h) D$ g, B% o. m: |26
27
% {" w2 u5 p1 p1 m, d9 H* c& w28
6 o" j# a5 Z% Z: d! i/ X29
) _/ }6 x9 u* f/ y' m8 D30
31
) M7 _3 o& @& O  z0 U7 R32
33
- D& ]' k* v) t# `+ m34
. v  l' o: d$ X% H35
36
$ l8 x/ I4 g- h  y. o: B37
  X, P; g( k/ y8 D1 \38
9 G  k6 s5 T0 |5 N39
+ s- ^! [( l. ~& r" z  [# T. p2 ]0 d40
( z: H' Q- f4 Q$ ]' y- b+ l41
4 ]. Q  w$ v. b* G7 C' ~% s# F% R42
/ U; M- D. o# b' d43
44
% u$ c9 f( i9 a6 n* q45
46
47
. d9 @7 u) ^; e- g, s) R9 n% x48
取消动效

// 组件销毁时取消动画
2 G$ O) z5 R2 ^& z6 a' x) {onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
1 u! o) R$ \8 A% P  \# x' _})
9 j: i3 z& M# g5 b2 ~! Q1
2
1 `: U; z* O/ I, Q5 I9 ~7 L9 I9 X3
' G4 k. \5 [" ~4
完整代码

0 f0 ^0 u8 L! b( R. k5 U2 I0 d5 d<template>
  {{ state.displayValue }}
</template>

+ B  ]: H7 o* f  l9 N* {: P8 U<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
( e4 j* q/ ]  b// 定义父组件传递的参数
$ O, Q, [; Y, H$ ~) A: c* \const props = defineProps({
  start: {
    type: Number,
    required: false,
/ a8 D3 m! e( E' c    default: 0
  },
  end: {
, k2 @" U3 [% H, m0 F6 W1 E1 I    type: Number,
    required: false,
    default: 0
7 ?- c- c! [; o* @5 Y4 b5 U6 S& H  },
8 ^% r/ F# ~8 U/ U  duration: {
6 o" D, P( h8 V3 Q$ i5 W    type: Number,
    required: false,
; x! x7 b3 r$ \5 S0 V7 z2 H    default: 5000
  },
  autoPlay: {
    type: Boolean,
    required: false,
5 n: i* Q. K* D6 e: a, [    default: true
  },
  decimals: {
    type: Number,
- k, h9 c. [/ f* A+ `9 z    required: false,
    default: 0,
    validator (value) {
      return value >= 0
    }
+ w9 Q$ c7 r( i" v/ ~  },
+ _0 j1 [2 {6 H5 W  decimal: {
' n, S0 I" _( t* {9 {    type: String,
    required: false,
    default: '.'
7 x! v: @) e4 q) D2 h  },
  separator: {
    type: String,
    required: false,
    default: ','
  k5 h: o; @6 t* ]) _' u" d  },
  prefix: {
    type: String,
; X3 |" L+ g2 e% T5 E3 {    required: false,
    default: ''
8 Q- _" ]( m9 y$ ~( R5 m! O+ `, X9 I  },
  suffix: {
( z& R' T1 _% {) U3 y0 c! v    type: String,
+ O' u; V/ `2 D8 a0 M( k    required: false,
2 l' }9 H4 Q1 ~  C* N. r+ w    default: ''
  },
  useEasing: {
    type: Boolean,
    required: false,
    default: true
3 w& g; f: k4 D8 U3 r' q( V  },
  easingFn: {
    type: Function,
    default(t, b, c, d) {
3 J0 S% v$ Y  G      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
, a7 v# w4 ~4 o$ F, c})

, e+ G7 S) `* k0 K' Z$ @" r5 T7 Cconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
6 l9 G$ A* Z0 q; N4 S+ U- W}

/ R( w$ L( o: H5 d1 q5 y0 B2 b// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
; ~" u, ?! L$ c% |  val += ''
0 |; |/ R3 D& @  const x = val.split('.')
) i9 j' o! ]/ ]4 k+ B& h  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
7 ]( n/ r/ ]! B, R1 B' ]% S  const rgx = /(\d+)(\d{3})/
( q$ I( e7 S' \7 g6 l  if (props.separator && !isNumber(props.separator)) {
- c* r  o0 J* c$ }  j    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
% P9 x' d& Z& U$ H  _- \% r  }
# K7 k; T) V3 m% R  g0 |, v  return props.prefix + x1 + x2 + props.suffix
}

// 相当于vue2中的data中所定义的变量部分
& r* B2 z) X* i- Econst state = reactive({
6 K* [1 E9 K. R+ z8 g, N1 r6 u3 O  localStart: props.start,
" j% N( T; e8 z# K, e  displayValue: formatNumber(props.start),
, e% l* g: g0 v# D+ H. P8 C  printVal: null,
  paused: false,
1 k* ]! g2 y- a3 _  localDuration: props.duration,
6 I9 v4 t* ^  H  startTime: null,
  timestamp: null,
  remaining: null,
  rAF: null
7 `5 Q7 t" Q2 X5 v})

& _1 p4 D2 B6 X4 L: c( R// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
})
& c7 f# |, a+ K' F2 V// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
' {3 M% m; S# [+ M/ Uconst emits = defineEmits(['onMountedcallback', 'callback'])

7 {2 Z& c% M& _8 V2 a' Jconst startCount = () => {
+ v. O+ e, m, `8 s' J1 j  state.localStart = props.start
/ M& Y; ?( E/ a8 y: }2 {  state.startTime = null
) E& t4 e; a( U5 Q1 {+ n! G3 R* Y+ m  state.localDuration = props.duration
  state.paused = false
0 m: |$ y" ]( L( ^0 v  state.rAF = requestAnimationFrame(count)
}
/ i! m: a  H4 r& Q
watch(() => props.start, () => {
  if (props.autoPlay) {
* D* @# X( r3 W% L7 N8 Y    startCount()
  }
9 D% Q: b; N5 G})
. H% s+ h4 P& I1 M0 C" L
watch(() => props.end, () => {
" o$ A7 A5 X  _7 |+ a' s  if (props.autoPlay) {
) w3 j9 n5 y! ?4 K$ W* t    startCount()
  }
' L1 e5 c1 z8 M4 W! O( |/ w})
// dom挂在完成后执行一些操作
$ d9 F6 ]- w0 q- y" V  PonMounted(() => {
$ N4 B* b  L1 o1 L  if (props.autoPlay) {
* }, ?- v, W* C$ W    startCount()
! d3 o1 G) l+ y* C1 }; ^  }
  emits('onMountedcallback')
})
) H. g$ h4 h3 ~+ I# w2 b// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
/ K' b, r& T. p; Q! J& V: w0 d% B6 Y}
5 {# J+ D& [5 E// 恢复计数
const resume = () => {
7 Y; V5 ^. Y) t+ A  E  state.startTime = null
, K$ t/ l5 P7 T3 h0 f* K  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
}

const pauseResume = () => {
( i% Y3 f% l% G( _  if (state.paused) {
- P9 {  l  t" @) d    resume()
7 k( u$ e0 N$ l  S& f, l; L+ H    state.paused = false
  } else {
    pause()
    state.paused = true
' q. h! X$ ?, R9 |3 U( K4 T  }
}
7 s7 Z6 B0 N, r( D' F
& E- v9 c' N9 |# r, A% L$ f) Lconst reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
4 J6 G# }' B* c" b% \1 n  state.displayValue = formatNumber(props.start)
6 o5 ^7 a6 t1 a4 @) K}
( X: Z* S) [3 \$ z
const count = (timestamp) => {
. [* U+ K8 U. r8 ^- [& b+ T( O, M  if (!state.startTime) state.startTime = timestamp
' Q( l$ l1 l" S. @, K- e/ d  state.timestamp = timestamp
  const progress = timestamp - state.startTime
: ?# \" n, m- Y, f  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
3 @' }( G- @1 A, q$ K7 H    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
# U; N  A! I$ v' W      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
9 ~3 d, Z3 [: z# n2 L$ q) [( C  } 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)
    }
  }
1 r" \# Y1 ?: k% F& |$ f2 c  if (stopCount.value) {
; T! ~6 c1 p* L- K    state.printVal = state.printVal < props.end ? props.end : state.printVal
# V$ H- G! g( b2 T  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
( z1 ~# E) u( d% x, R0 H0 W7 r  }
5 Z0 C; C1 f# O9 c+ U
. H. k& {  m7 g* M! W7 A+ x8 d  state.displayValue = formatNumber(state.printVal)
) ?8 L+ i2 M3 h" U, [2 l! @: P  if (progress < state.localDuration) {
" H1 @+ n2 u+ h3 J    state.rAF = requestAnimationFrame(count)
: m, V  l  f! _7 p# r/ g* o$ R  } else {
    emits('callback')
/ Z$ u/ U, r# x: N  }
% n; O: B. y3 m9 `. m}
// 组件销毁时取消动画
onUnmounted(() => {
8 z( _, h$ ~4 C2 P5 t+ q  cancelAnimationFrame(state.rAF)
9 P, ?( P; Z( V# e. i+ A})
</script>

5 Q! |3 a; @8 G- v: f$ J1
& J. T% N7 n9 c8 x# r2
; U) `2 V8 C# ]8 M2 `3
4
/ X8 _( d: X" Q" r$ N5
6
8 J/ m/ m+ G; j7 A5 Q7
. m. S: J& o7 M3 x  A0 l8
8 Z- r% h1 [7 r/ C: C# r# x- O9
10
: E6 o9 Y+ Z6 w11
+ j* g( _) w( V5 v, }2 ]) c12
3 w1 j8 C  S2 v! {13
14
15
16
8 {" ]) `1 o- r( W  @/ W+ @17
* }7 K3 Z' ^' q1 M3 T! \4 b18
19
/ i; g9 ^; |& K; ]20
21
22
( S8 ^& g) i/ H: `) y- O23
9 k0 P) U5 ?& B  m) T; W! q24
# k; c: j) L" w7 |25
6 s" o" g! K  o+ ]1 U. u26
27
( {3 o) L4 ]2 B; a* _" a28
6 G3 Y/ N2 m: Y* E9 v; G# W9 Z29
5 T) U" a7 q" z! P  Z* x- t1 T30
31
32
0 J- g( a5 N4 x7 \  r33
' ]9 I& }$ z. F$ Y- O1 P( k34
7 \/ I: A7 P+ I35
36
37
38
# j9 K+ g# y0 Y# L39
40
41
( u/ N& J( W/ _1 b" A42
43
44
45
46
$ w2 X$ S2 i6 o3 d: z47
48
- \$ j+ K; n4 ?49
50
51
4 ^% C; e' H1 @9 B$ l52
6 B4 j! w1 ^! b3 `# x- k53
- F: K7 q7 o* d54
55
. z- R* j" g! I6 W: n6 A* \56
57
58
59
- u; H! R' v2 I60
61
3 @  W% _1 s. ?6 c" a62
63
2 e! s& w, c4 `1 |; N64
65
66
67
68
69
" [  Q0 n' H7 Z( [70
71
72
73
74
75
3 B: M' ?% w+ e8 q; C# T76
) T4 s  m8 K4 p+ f8 R7 ^! b77
78
79
# j3 L4 w# Y! f80
81
82
83
2 q( H: k% G, P84
85
86
87
; [% A+ _( Y" d8 q5 Q88
$ y! |( w6 n& Q, d% H89
90
91
92
. z& N# X- y. z( |; d# B! z7 g93
2 I& _4 T7 Q9 Z- q94
8 b" B' s, W% R% _3 J95
2 k9 H5 ^. l6 J9 N: _# e96
97
- x+ ^7 R3 l& P: [98
, q1 }5 y+ j+ P/ a99
2 ?7 W2 b1 o' C$ W4 j+ Y100
101
102
( f2 v2 c3 p+ l+ s103
104
105
106
6 `7 J( O) R( m! D107
6 n2 A, ?2 @, c2 C4 X) h& s3 ?108
9 h# I1 ~( [5 s$ d. X8 z1 |6 b' L109
110
111
! `. G$ z6 R" {; Z' r' \4 P112
. A2 ]9 S2 i! E. V: r( d1 g5 k113
114
/ R* p5 K" `# |3 I( q115
116
( X0 C6 X! b- R* t+ M117
9 g4 n& T6 f* v; k' r118
% t( C  x  a" s; P8 G119
120
121
+ S7 o; d6 {9 E) ~# j122
. u$ \9 v7 I4 B! t2 J% A123
124
9 C8 m7 a/ K* g125
126
4 ^& J; f+ a! ]127
128
/ a' @2 ?9 x6 {" x! v! ]129
8 w, F7 j* U1 r- p6 n! A7 p  e130
131
4 A$ l: V; R, D9 I0 b7 d132
133
/ J0 n( `! d& V# V2 R- t134
* O/ w/ `4 f3 W9 I135
136
137
138
139
140
3 f+ L5 D- d. v  b141
8 N) N- ]' ^/ V4 _8 ]8 a- Q, e142
143
% [! q* v  l9 |& G' s  K144
+ S4 w- Q& `8 P4 ]9 b2 g: S& ]4 S145
7 w+ Q4 D9 B, |146
3 h0 b6 _: U4 {! k147
148
149
6 \& K: S3 Z0 V6 H9 D+ B+ u150
. F) g$ w8 c+ W& V! k7 P+ d151
( J7 c1 m8 e; k152
7 g% i) c. H: v8 U4 S  h/ W- ]' ?& p153
154
155
3 Y! E* z3 `! G. ]( R0 _( B156
7 ~: Y& H$ T- w; K' W4 y157
. g8 C5 y$ A4 `0 L158
" m* B/ p9 M8 I2 e( i159
160
161
; s/ W# [+ o6 ]& `162
163
164
165
166
. s# ]. L5 V' T$ f/ w167
168
' A& S6 K7 j/ z1 v169
  \; R; H7 y+ S& e170
171
. D, b9 X# N1 I7 Y% n* `- e  N172
173
  z  Z% X" _9 ~, f  k. d8 w4 g174
( l" O! Y2 [" B8 N6 _7 w; N" M175
176
177
178
179
+ K; O/ w, r( T180
181
182
183
184
  T/ ~5 T+ A) Q( v* f185
2 W6 o3 p& J/ i, }6 N186
187
' M, M- W- b$ C* b/ x4 i188
% y; h" x' @& [) Y189
3 E" b, _0 e1 a6 }190
191
192
193
7 z2 U& L2 Z; t9 c9 U194
195
0 Y1 L+ L* o2 [8 F3 P' _196
197
198
6 r  k, H) H4 i: \7 r& p2 U) z199
. q; P) m3 i! D" G. V200
201
# Z+ A4 M1 {+ ]3 |! _202
总结
* f" N9 x& H$ d2 Y( ^1 w自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
后续的线上demo演示会放在
demo演示
9 V4 }" p7 u7 M* g; z2 E! k完整代码会放在
  r+ L7 D) T) ?. W" N  f7 x个人主页
$ d9 X7 [! E+ |5 C. ^8 H. A
希望对vue开发者有所帮助~

) u( T  c: n* ]4 ~$ K' O0 f& Z个人简介：承吾
工作年限：5年前端
地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！

5 o" A/ V5 f& {# I1 n


————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847


$ o6 s% F3 U4 n2 E* n5 f