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

杨利霞

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

7 y3 H1 c* N; M; l前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
* V0 k( \, |1 H& Y5 @$ b0 {$ YTypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
* X1 ^3 d, B6 P
& R7 C  _, X  d% B( E1 Y
思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
* E( e- G  U* `) V" Z
# B  P2 c, E4 T& k文件目录
4 ?, U+ u% ^' x
* y0 U/ D/ K9 R
! k  m' W5 Z+ H' x使用示例
<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
  h4 ?, Z0 p! l* h3 n; x0 d :autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
* f' C# I& z! E$ N+ d" p prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
: v* k" ^5 `; C />
: X" P* ]" E" H; _/ R1
2
. Q. v* _0 U( [; f5 m' B. H3
4
5
6
7
2 M7 A% k8 s/ M4 E1 K( H8
3 v  A1 f* w/ D( D0 t2 M, l- [. c入口文件index.js

/ v+ z, h) Z% k9 x4 _+ Kconst UILib = {
  install(Vue) {
    Vue.component('CountTo', CountTo)
  }
}
" }; t( [& C4 U6 W3 w2 {6 P( u
export default UILib

9 h: X8 A# ~% m  F0 }1
8 F( P6 d+ C. h! K3 w6 U9 p- ^2
3
! v- E7 a2 j$ {' _- C& `( s! z' T$ |6 G4
7 q$ F9 ]6 D* H. m5
6
7
8
- i0 W  R2 x$ W/ n' j# Y9
main.js使用
8 k; ~+ N2 |: W7 H1 Z% jimport CountTo from './components/count-to/index';
  t- D/ }" v7 G2 `app.use(CountTo)
. Y% u- Z2 l+ r% C% A1
2
requestAnimationFrame.js思路
! u3 {2 y' D) @$ B先判断是不是浏览器还是其他环境
7 t; K5 I% G. Q如果是浏览器判断浏览器内核类型
/ a: N' ^8 y7 o0 _9 L如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
3 t7 n' {! E3 ]增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
$ b- Z+ U/ V6 a/ ^, clet cancelAnimationFrame;
. @" N# `8 D4 @+ |// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
( u4 h3 A! q9 z, `/ f* b  I    for (let i = 0; i < prefixes.length; i++) {
7 w/ O- U$ F  g$ I4 g' a( m        if (requestAnimationFrame && cancelAnimationFrame) { break }
  M- T5 M; ^' K        prefix = prefixes
1 u) B9 `+ w5 }: f+ T6 E        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
! X' H! x/ R- S
$ w4 H3 Q: R% m4 Z+ \  //不支持使用setTimeout方式替换：模拟60帧的效果
5 R0 F3 r8 M, O- d: O# L1 u  x  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
" K6 l- R; L  J$ L        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
( M. b3 b  P( y. y. t            // 为了使setTimteout的尽可能的接近每秒60帧的效果
* N1 W2 H7 f, R$ c$ |/ J. y            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
7 R* [; _; O0 \; K& W+ @            }, timeToCall)
# \) ~% [0 Q) u' X            lastTime = currTime + timeToCall
            return id
        }

        cancelAnimationFrame = function (id) {
* A" W+ }) O; B& p( U% s: j) K            window.clearTimeout(id)
5 ?0 Z/ r) \. ^! O3 V/ h; p        }
    }

1
2
. z( K. a  n9 u. _) z3
* G+ `8 V8 @) @5 W0 F) V4
5
7 g" i7 i4 W9 u6
7
8
/ a% K: G$ W& [. s/ b" w9
" q; p* a' q, \10
11
) R' [! F) [# O: C12
1 A# h! ^, ?2 q5 R: x" n5 _6 H- y) Q13
' P$ T- B4 ^2 m6 @- {2 c9 a1 }14
15
16
17
  P5 ^1 \+ I) I18
( ]4 d* G6 s7 x. z1 G19
0 f# N$ ?- o5 P20
0 {& {) u5 j3 J& q# j3 m* S+ `21
9 i2 {9 L0 M. l22
  M4 `% U! Q0 {; ~/ V$ o: O23
24
0 B& Q- O: o$ A: {25
" |! m! G2 G6 A" j% m  l6 r9 t26
9 `. B, X' W- B) x0 ]27
28
29
# I, f1 j! P$ W  k30
31
2 `9 Y( ^! i' ]; u3 L32
完整代码：
+ H9 F8 f  S- s* i  R7 FrequestAnimationFrame.js

let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
6 `. K: R7 t# U4 G6 O, A0 T- j. b
let requestAnimationFrame
let cancelAnimationFrame
* g5 K$ R1 o$ I+ l. k5 N
6 ]( f! ?, U! n3 A5 y" Y5 e// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
        return
    }
. j6 z& _9 {' x: f8 P5 g9 G# X5 T    cancelAnimationFrame = function () {
        return
4 p: G  G( c' k    }
} else {
+ }7 Q' u6 X0 ?+ S    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
% X- ~+ Q" w$ Z+ o5 g9 V    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
! r' L6 C! p& }        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
  c' ^% e' w; X' `  n        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
. @1 y& D: U) H  L: M    }
% s) p; q2 ^. h, P! U3 Y/ Z5 _6 N
    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
0 S8 k" j6 x4 D: u6 w9 y# A  T            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
& ]1 B* V6 z! O  T            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
: g% I5 G3 \: m0 n0 T% H5 l            lastTime = currTime + timeToCall
! T* l2 |# H6 {3 q. W& _            return id
1 _) Y4 [; d7 M/ D        }
! w9 }. b3 W. S9 C) m
        cancelAnimationFrame = function (id) {
; Q/ \2 d) l8 u' V            window.clearTimeout(id)
' w6 H8 V2 `7 n+ U2 H5 l7 p! z        }
    }
- B0 a) M( z& d) [  _) Z" }}

+ L- W5 R4 t" K. B9 {- Lexport { requestAnimationFrame, cancelAnimationFrame }


1
$ O, o2 ~. U! \  k/ U4 _* L- g2
3
5 z) F0 ?7 M9 G1 `, Y4
* g1 C2 q1 i! F# e9 F+ L+ a1 `. C5
6
7
; y& x# q! ?) S$ ]3 z* @: h8
9
10
! }: i, }# {" H11
12
$ T( p' W5 d: w1 S  N- J: ?9 U13
14
. w& S1 \8 U$ k' k15
. d) c. f; J$ s& O/ F9 U' e16
7 u! S0 v% z: l9 Q9 D/ T. l17
- v6 L, M) x3 H18
19
20
1 p, Q5 R; @- c21
22
5 G! R, o4 j) ^8 a( x3 Z, b5 z+ Z& m23
24
25
' F4 N0 e( d0 W26
! `" F5 E( s) a' L7 E" _8 {27
28
2 w& ~8 s# X$ z0 [29
+ F; T: C. x) a( h30
31
4 y- [7 n; ^- y+ t* U6 M2 D32
( ]1 x3 k: I0 q7 o0 O33
34
35
1 p; G( ?$ H2 M& c( @. i36
# p$ V: U/ W  Q8 n/ z/ D! X37
38
39
40
41
8 d$ A. D: Y, a3 S) V( a% T( q42
- r8 O5 j; `6 C2 \, @/ C43
44
45
7 X7 I! V0 C  R8 I, c$ O" R46
47
  K, U* g, I) I, `6 g4 ]+ x48
; R8 g0 j' B0 J& I  B2 RCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
5 D; e6 K8 Y$ s0 ]. ?
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
* F; `# B+ ?1 L* G5 {& [3 _/ p1
( x% W# Y7 E  F% G2 \  t- M需要接受的参数：

& n/ r7 h$ P4 w8 T* z9 ^const props = defineProps({
* g5 X7 X6 K. C, [  start: {
    type: Number,
; V% ]: A9 N0 u    required: false,
: ^/ i& c+ D" n; y    default: 0
  },
  end: {
* q% m1 T( Y" c& b7 u: q& r    type: Number,
    required: false,
; N- J" Q  _# s9 i. v6 h# w' \. R    default: 0
  },
. D6 `9 q' A2 M  duration: {
    type: Number,
    required: false,
0 }  f1 D: W8 T" ~6 H3 r- K& t    default: 5000
+ ]$ {" }2 s, p' {6 ]7 p  },
. \; T" H5 t& a( {- k5 G, m, ^  autoPlay: {
    type: Boolean,
  S" Y5 J3 ]6 w0 N    required: false,
    default: true
  },
, b0 {& R6 u& O! T  decimals: {
1 W6 Y4 N7 Z. M% P; u- ]% m    type: Number,
: _+ Z. C# |) d8 j  F+ _, V  j    required: false,
    default: 0,
    validator (value) {
      return value >= 0
    }
  },
. l# w- T& p% [* G' }1 L2 K  decimal: {
; H. J. o+ R" Y8 b6 Z% i    type: String,
2 _. w4 ~' P' M# Q) N$ n$ A2 T0 h    required: false,
. I6 z9 X6 H* Y, Y$ e0 u8 \* Q. |    default: '.'
$ L7 G/ x  j' ]) |7 r* h  },
  separator: {
    type: String,
* H6 i/ R3 D6 z    required: false,
    default: ','
  },
  prefix: {
    type: String,
7 W% a) S8 U/ K: s: A* |2 U* ^) w    required: false,
    default: ''
' n  W& K. q1 t3 x  },
  suffix: {
+ W. S6 L% X; A2 |" O6 i    type: String,
0 A, h7 r' e& r) {    required: false,
    default: ''
1 ~% a: E. |& k6 a7 p$ H0 a$ f! H3 n  },
  useEasing: {
/ ~. K8 }# y% \# Z( l6 i$ Z    type: Boolean,
    required: false,
( A, @0 K. ?/ R$ D6 m9 m. {' x    default: true
' C, \4 f' J2 B' M9 Z8 F  },
  easingFn: {
    type: Function,
/ q3 z) b" v7 w( n9 ^2 o    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
3 u: J( c) O0 ^' N3 B: ]. c0 o  }
})


! s% x* i: f1 O; M; c2 X1
2
3
4
8 F6 \" @, H% D( g2 ~5
/ p8 Y3 A0 @# O! \( w8 G; b6
* A& u5 R8 S1 b7
8
  @" H" N: `; J9 ]: H4 z) F9
10
11
% b7 Q- S) L* i. _1 z+ f12
13
0 {# @- X* j7 ?( e/ X# t14
6 {2 H8 V5 T" s3 M15
9 R# c+ F7 b9 L: c9 \) H0 x16
% }" K/ q' H6 ]1 Q6 Y9 S" j- G17
% `8 @  \5 I1 t7 L2 o18
( B1 d8 R+ p  f3 |  b4 `. L: D' k) H19
20
' e  n0 P5 \9 A0 n7 C4 ?! a- Z21
: Y! @' [+ E* i8 M22
4 s' t" }& |+ @& c% L: r  N3 F23
' L5 v' Y& D# N& a8 c9 a24
25
26
27
7 H/ V+ d. f& g28
$ k% k0 O: u/ W/ |29
30
" H! m, j  T' S- C9 h( ]- g, a31
32
33
5 a3 I' I6 z- E. p" p34
$ Q2 T! a6 ?5 `* t5 m35
6 k! [3 @' i. S! d1 }36
37
38
  Z# I" b1 B, J# R( @, |- v39
40
. T( G& U# Z0 v& l& i* ]. b/ n! y- n1 x6 R41
" ^. u, f- U( _' O/ M: N8 t42
/ O& C% [8 l3 [43
44
45
/ J) D! w4 Q4 m1 V- \. f& q6 T46
47
48
49
50
5 H* I: e/ N. r8 Z3 ~6 B51
52
53
+ r$ s3 r$ \2 V7 ?' j3 C54
55
56
57
58
59
60
61
62
3 M/ a3 ]- W: ^( `& z- N启动数字动效

" w! C, h6 L, Y8 gconst startCount = () => {
/ W1 h8 D) b1 m# @0 B  c( }% Z6 f  state.localStart = props.start
, x- f" r& g" O; q/ E  state.startTime = null
  state.localDuration = props.duration
% m& J5 C* c% ^4 X0 n' `  state.paused = false
  q0 }1 |4 G7 W! X  state.rAF = requestAnimationFrame(count)
}
1
2
8 b) ^, Q0 d, D. u  N+ T3
4
/ y1 U$ P- r0 F8 w  h5
6
. ?* s3 g( q+ G8 `7
核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
1 u" i  \7 E7 v/ z; z5 Z  state.timestamp = timestamp
& H( L% b; }) E: [  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
" R  D! }1 e; J: [% G/ i, |9 {  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
5 ^# ~* W4 K0 I6 e" ]- j+ Q" G5 ]" p      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
7 Z, X( O8 b4 d6 Q    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
) T! F5 A9 u- g" G    if (stopCount.value) {
, b0 [( _7 w2 S9 [1 G5 S      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
6 ?) {2 e& I+ e1 R& Y, [: i    } else {
6 i+ M4 ^4 Q: }' X0 h      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
. `( Y) {- W, e8 r; d    }
  }
+ r0 D6 n  y7 x# C6 o  if (stopCount.value) {
/ v& {& w0 _( Z2 ?3 M  q) o    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

  state.displayValue = formatNumber(state.printVal)
& S3 B: C( O7 b% Y8 _  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
% c7 }, n' H; |9 Q  }
}

( a. Z- {/ r5 a; R
. `$ }# P/ _; F) T6 F  |( L( N// 格式化数据，返回想要展示的数据格式
, H2 Y7 H% g3 q6 Pconst formatNumber = (val) => {
- H7 q. C$ A, }. e  val = val.toFixed(props.default)
  val += ''
3 x( b5 H6 m% W  const x = val.split('.')
  let x1 = x[0]
2 q1 @# l& W4 F  const x2 = x.length > 1 ? props.decimal + x[1] : ''
8 e- I6 o# u% L" ]1 o% c& b+ w  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
; ~  M! F% H! w8 U  h3 v    while (rgx.test(x1)) {
# w1 p, N5 z- L! @      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
5 r- @. V5 H. s+ a4 i  }
  return props.prefix + x1 + x2 + props.suffix
1 |* }/ ~3 M  Y$ w4 N4 y}

! @+ D& U* I* Y& y8 k* w9 [" O5 g$ x1
2
& n: p; |7 T" l5 c& w! m3
4
5
6
0 f; K+ L, {3 n8 ?0 C" I7
7 N$ A: T* d* Y) }( v* N! x+ m8
9
10
11
12
9 H0 g6 \* T  Q( c$ T7 J0 N13
" f& f# {+ T  u0 g14
6 {; }! o$ v+ s. R5 k7 b% p2 d! Q( B15
16
& G* ?( Z3 b2 o  e+ N" J17
18
19
  \- H. G, o% E7 e/ Z& {, y20
: e) W) D: J' w5 m2 i7 {21
. k4 B* W# f% ^$ k( r22
23
% i% z  H& Y' C5 @- D' @: I( _% a24
25
- r7 ^, J0 q8 v26
( c# T  W! Q% d27
. V6 Z+ G7 W8 {9 ~) |7 N: f28
29
; h1 Z; e3 a! b+ r( [30
31
: O3 U* S# Y0 h32
* l% P; q. H2 {/ F; z# ?" J33
34
/ T1 ]; J+ f5 m, m' b, w35
36
. G2 `4 _7 U2 l( b& t: S2 i( `37
38
39
40
5 p, O% Y$ Y$ w. w! p7 Y# T2 ^- |41
% r% k: C3 x8 @' d42
, s6 ^1 w0 T3 T9 p4 _/ [9 }2 u5 Z43
7 ]* B# e, C0 Q3 o44
45
46
# c7 A9 X+ s( @. h8 t* n47
48
取消动效

* l( }. p) J7 h3 a. N& u! x* r// 组件销毁时取消动画
onUnmounted(() => {
) ]0 v, ^6 n& B  X2 V  cancelAnimationFrame(state.rAF)
8 ]' M: p, |' y" U' i# F})
6 ?8 n7 t: b' Q1
2
8 G4 E9 s7 E& {. {$ L- ?3
4
完整代码
* l1 a) ^7 |7 L9 @8 |" q0 `: t3 s6 g
<template>
7 E1 n2 q' C8 G+ `; {  {{ state.displayValue }}
</template>
0 R8 D1 E- y: H% o3 W
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
4 h- F8 q4 R) F7 l) G& Lconst props = defineProps({
+ s4 `& G: Q! p: i; x0 M  start: {
    type: Number,
    required: false,
' c! k3 ]/ Y5 {# v4 P3 s' _    default: 0
  },
  end: {
    type: Number,
/ o! ~( S' e' N9 j9 C: j    required: false,
    default: 0
  },
- @5 b' X5 O# @8 X8 O8 ^7 J9 P  duration: {
    type: Number,
    required: false,
7 m1 x6 ]% y& W- G: q    default: 5000
  },
  autoPlay: {
; R0 a& O5 @( O, x7 W$ ?& S9 q    type: Boolean,
+ s4 i, m" n$ g" J- X) Y$ N    required: false,
    default: true
  },
  decimals: {
    type: Number,
    required: false,
9 r# i# T8 K1 i" M1 V1 t    default: 0,
    validator (value) {
      return value >= 0
, Y, m4 `9 e) O% ^  C, {3 _* A& d    }
  },
; k! X/ s/ M; k7 G! X  decimal: {
    type: String,
' F9 l) r1 `8 W; x" K    required: false,
# o8 s2 s9 h7 L: Z" n+ f, \    default: '.'
  },
) L" n$ H) |# j+ k4 X3 l  separator: {
0 V+ N6 U( O5 P' T" C1 r7 W    type: String,
    required: false,
( q( P$ P% m" I1 B* {    default: ','
  },
  prefix: {
2 v5 v' l$ N9 y% s1 ]; S$ S    type: String,
% g3 W* k+ z* k9 G. z    required: false,
' g9 ^9 G; k: g- V    default: ''
# Y. b& ^' m4 Q+ W3 f  N( F  },
) X9 u! a( @/ t/ a" t0 k  suffix: {
    type: String,
    required: false,
- k7 @7 F3 e* ~" p& ?: ]    default: ''
  },
9 L8 D4 ]# g2 o  useEasing: {
    type: Boolean,
' S3 `" n5 F# M4 B3 k& y7 e    required: false,
6 f; ~8 T5 r( e; R    default: true
  },
  easingFn: {
9 I) C" J. M  R3 Y5 l5 d) P    type: Function,
3 y1 d; f' H$ }    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
5 {' {  M: P' k7 e    }
5 Z  F* q& A+ P$ q+ N2 K# \; ?  }
6 S5 @& F: p* U) x})

const isNumber = (val) => {
  return !isNaN(parseFloat(val))
}
" {1 z) ]$ _- |1 o3 P: d% f
1 f; h# C; F: Z8 v) l) M9 R// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
0 b2 b; W3 l) P+ t+ n  val += ''
  const x = val.split('.')
: i$ o: U2 |5 k. g  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
1 ?' ^; l! V6 r3 v% a* C  f      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
2 N) Z7 y* i) _- W" w8 ?  return props.prefix + x1 + x2 + props.suffix
}

9 p% k; w8 B/ }+ N5 a/ d- F, Q// 相当于vue2中的data中所定义的变量部分
( l6 k0 K6 W+ m* G6 iconst state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
+ c6 ?! L6 S9 ^& ]% N  printVal: null,
  paused: false,
' G/ |/ H! V# U& e* ?7 y  localDuration: props.duration,
, D6 q; W) a0 p0 _  startTime: null,
  timestamp: null,
! A' U% ?( L4 z- h1 g- D/ D  remaining: null,
  rAF: null
+ v. H! L- X- X3 x6 e9 o3 F})

2 V# H! o7 b0 E% t! h' v// 定义一个计算属性，当开始数字大于结束数字时返回true
$ b7 w( b. R, a2 F# `const stopCount = computed(() => {
  return props.start > props.end
})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
7 i# v) O" B5 C& F3 Iconst emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
7 @2 f: x( G7 E+ j5 r7 h" s, C  state.localStart = props.start
  state.startTime = null
" b0 s3 _+ B- ?7 \9 r) d3 ~" k  P4 B5 a0 z  state.localDuration = props.duration
4 ?4 B0 f2 e) c6 S7 ^: C# T- Z# v  state.paused = false
  state.rAF = requestAnimationFrame(count)
  x4 S; h  e9 N  e! M& C- ~}
! i1 ?4 S! B: R. l, r
watch(() => props.start, () => {
" x/ q: N9 t/ T( ]; w- x  if (props.autoPlay) {
    startCount()
  }
})

watch(() => props.end, () => {
  if (props.autoPlay) {
) W( h5 f9 S7 y    startCount()
" x, e  V8 T4 B3 i' ?  }
' D- A3 s* B$ e4 W$ ?1 [7 i$ g})
// dom挂在完成后执行一些操作
8 }: o/ F0 ^/ B+ [5 b' S, zonMounted(() => {
1 l) f4 N& W" c3 Y7 p) W# f  if (props.autoPlay) {
( w3 M. f7 s. C- U! x' Q    startCount()
  }
  emits('onMountedcallback')
5 [: S3 g6 @0 h3 ~# K})
// 暂停计数
4 ]# j% p6 K5 J2 i5 Qconst pause = () => {
  cancelAnimationFrame(state.rAF)
}
& G7 R% N- |1 V: O3 X+ s4 D// 恢复计数
const resume = () => {
+ y! i& Z) ^- o+ E0 @- u$ d  state.startTime = null
  state.localDuration = +state.remaining
6 @6 U* A% o# X1 L9 f  state.localStart = +state.printVal
  requestAnimationFrame(count)
}

const pauseResume = () => {
  if (state.paused) {
    resume()
+ `1 M5 |  l% c; t9 H' m    state.paused = false
  } else {
  u3 T; R1 v+ u8 m7 J    pause()
; C, h* Q3 u) p0 r& G' M) U    state.paused = true
1 l6 i4 H6 k9 T  }
  i9 w! g+ G- W! N0 I}
* M" Q  D0 j: z5 l: B' d8 z
const reset = () => {
0 @4 Q8 e. L; a% ~- w6 X8 g* n  state.startTime = null
  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
}

1 p5 d+ [' l: N& D4 Sconst count = (timestamp) => {
! g1 U" z+ R$ R' R, X* a  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
" a3 M+ Y; Y& s  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
9 |: Q0 u/ _% r" Z) E  if (props.useEasing) {
' o, z% h- |0 h) c; \1 o    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
2 U) M& f& R+ G* u    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
) l/ }# y' h9 V' T    }
  } else {
    if (stopCount.value) {
" J- v% ^) l3 T, B- J      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
2 j$ b/ i/ v0 B- g    } else {
  Q3 _! `) b5 {  T      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
8 P: d( V7 i( Q0 I7 t) b1 m    }
  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
9 ^' p+ `% r  e  }
/ m2 y1 b4 I4 H- P9 j7 j
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
" y2 _# x+ @' ^4 M- Y    emits('callback')
! p' T4 e7 D: H9 Q2 C  }
}
// 组件销毁时取消动画
) U) I$ ^2 B. b+ s$ k4 Q1 DonUnmounted(() => {
3 r9 z. \. Z. u0 L  cancelAnimationFrame(state.rAF)
})
0 J2 z) F! H/ O0 }0 H# m! e1 L</script>
( B' P/ Z3 j9 Z4 |. x
1
, r$ n3 U+ y# |. U2
3
4
* c5 ^; G! P" [7 [4 A) G. c$ o5
: f# O! p. r% X3 J* s: v6
7
8
9
9 h3 Z( e3 O$ w0 ]: @- D. m10
: H. P  q& y& D11
1 Q; E  r0 M7 o12
. i3 o( d2 b9 ]5 b( a% a' Y  T13
: @/ P: M1 M& w/ H# ?: }14
15
) R( |" Z' a  p3 e: G! A/ a/ ~16
17
5 L. h9 a1 P/ w18
19
1 K7 n# n8 V4 `: I# m5 A20
21
22
% @. _! j+ J4 V9 ~' q! k, M23
24
7 c" J4 n+ b4 e' ^5 o25
26
5 {. r5 k6 @% }5 r27
; ]! k5 P! X' H+ P+ X! p28
9 l6 {+ `9 V9 A29
30
31
. P7 {* V& o! m% q4 Q3 o32
33
34
35
36
1 X5 r( N1 q$ ^+ H* Q37
38
3 K' L9 Z6 V; n' b* n  ^39
40
41
# v! [$ b9 n; N3 F1 E, I/ _/ C, e42
43
44
45
" ?* @) Z, U: d, ~& x7 r46
47
48
! _. b! L6 Y+ U0 _# C1 X49
: P3 R8 B! o! O50
51
52
53
54
2 q' w# M. [) v. I) f/ M2 W55
56
57
58
; ~/ b7 J& \1 \5 S0 p2 \59
! z, L9 `) S/ Z! \$ g8 X3 t7 q60
5 G6 n# W+ ~) H" k3 @61
& v& C! o- D" ^6 B62
63
64
+ }3 ^6 ]7 S# }" ~( x0 B8 l65
4 W2 t* C. ^' q; K4 O66
67
68
, M0 g2 X4 }8 H69
* A/ m( u/ e9 M70
2 Y3 X$ j) E- }# X. }8 R71
72
73
74
75
' s% i5 e3 T$ G' B76
77
9 ~: ]- K+ T/ ~' r4 [7 a# V8 p2 z78
79
1 Y5 D' X/ o1 _  N80
) H+ q( Z7 h) L81
" |) {& R' Y. m: ?7 ?; N+ J82
6 S4 |* t4 K1 z; p+ P83
84
85
86
2 n5 ^( Y5 w9 K2 I! `/ y3 ~( J! _9 C0 s  V87
/ N: I/ l% T9 G) \88
* A% R3 k, F- S, [89
90
91
& s+ @5 a8 Z0 Y& O! Y92
- E& M5 ], E$ y93
3 ]3 ]) P. w0 z  E+ l94
95
( p1 \# o* d5 T& S9 s1 h: b96
97
: Y/ c1 L' t0 i! l& a6 g; X98
99
- O, l& v7 B) ?1 W100
% I8 ?! C$ ?/ v; ]  l# ~7 M0 z+ I101
102
" l+ x+ O% j- r0 e. ]103
104
1 S  Z" i, R; T+ y4 M( t105
- a& X$ j8 ^0 X9 e- L# s7 N" w& w3 [2 Y) @106
; k% |! G: q: r! t. m* d107
' i4 K3 U4 G' P3 ]0 e108
- o3 C! }& |5 ~/ I109
110
111
: O, A0 M+ @2 ]6 L6 w5 U& }( v112
( `% z& W& f9 \2 ]; D113
114
. m5 h& N6 W, G2 l* m115
, s5 ^4 G$ Q: l! V116
# g4 M* R( I1 V) P5 r% H+ g117
7 q" g- h" l5 ?7 q# c- J5 F$ k8 K4 M6 |118
+ s1 V5 n" Y( @( n  R$ I119
+ C) z; t" a- Y; G9 l) r* H6 L8 L. V120
& R3 O& m) Z7 b: j8 d/ L4 M121
122
123
5 I! q. Q+ A3 M' u: D$ ~124
7 z$ Z2 P: x' u$ U/ h125
126
8 Q1 c+ P  a  e3 N1 q5 U127
128
7 P9 o5 h$ {+ k$ G+ K9 \! T129
130
131
132
133
* p9 |# H' X+ r; o  p" \* P134
135
136
137
138
139
+ z. M, z' H* U140
, G# T2 a  v' @) Q141
9 [4 d7 |, I- q& a142
- D! _) l2 O$ E! ~143
144
145
1 e5 \4 k- y# U6 u146
- S( u- O* ^. x$ ^* m8 h/ S147
148
2 K8 L3 B) }# Y6 V& D- H149
150
151
152
153
154
155
- e* \1 y5 I, z+ [! D+ ]156
9 \( Y- a9 q, |, g( T157
158
- m& h/ t" Q8 \$ d9 o159
160
; ~% @9 B$ Q6 A7 J+ A4 ~161
$ h* M2 Q# X( p0 x' Q+ d+ D+ D+ [162
7 A3 _1 {' s9 m( r9 H3 X( i7 _163
164
0 m$ z; s8 z$ @165
166
) ~+ [) S- c9 Z/ z! Z& ?$ ~167
168
* r, Y/ X& S6 N& w* }/ Z$ x% I169
170
7 K. h  g  G+ _; A$ [171
172
2 q# V' Q' d' @. M/ q173
174
175
176
177
3 ?/ ~& A' r3 q3 r178
, C6 w/ f, t3 z5 A4 L9 G179
180
181
* E& L' L1 {+ b0 r* n) r# G, _182
183
( q) }5 x4 o" \/ {: u/ I1 m7 D3 M184
  o7 q: p' W/ d. a1 O1 R8 |3 q185
186
6 V( I3 y/ J" x" ?/ I- L187
( l0 n. `3 i( E& ^& V188
189
190
191
  f5 i% P% x5 m( ]/ [. @  |, o192
193
! z4 G! W2 h! T- w194
195
196
197
198
3 E0 ^1 t( P9 n3 J8 \199
1 B1 C! Q" W: E200
201
' X& `) b2 {. y& I) K202
  B* l7 z4 F, A1 T1 J总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
0 J0 ~, F& C3 t; U& c后续的线上demo演示会放在
5 r) o; T8 i- Gdemo演示
完整代码会放在
2 b! D6 R/ I) F( z; {' C+ }) x个人主页
" j' r0 e* z0 V% \& m! g" H
希望对vue开发者有所帮助~

5 b2 I5 U- R! a; V) b个人简介：承吾
工作年限：5年前端
/ Z% i" V+ U  p: }8 B地区：上海
9 b) W, P0 z, a8 O- W- y个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！


; Z- Q' ]/ M' k, B9 h

————————————————
. o2 G9 s: q2 E5 l版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
5 w( ?7 o, h) w; x原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
% n2 q, m+ [( q+ s
, n- q( U$ }8 l1 r" s4 ]