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

杨利霞

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

前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
( c" ^( r1 b: g$ X2 hTypeError: Cannot read properties of undefined (reading '_c')
2 V+ z8 c+ z( ?8 y# M2 C1 V的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
7 `7 T) y8 ?" q2 `. C

% `: |; q+ U4 t* l5 J思路
9 A) S# e. `: I: E' V/ C( \3 r使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
1 b& y1 F+ \$ j1 U) {
文件目录
4 H4 ]; U5 d: A& x% }- h
* f6 ^' N( B8 W* H" e1 i9 t
使用示例
<CountTo
" e) w6 ^7 ^0 N4 h& s. T# l :start="0" // 从数字多少开始
4 s4 L+ P4 y  ? :end="endCount" // 到数字多少结束
$ d7 y2 a7 C& R0 T :autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
/ Z9 f/ r7 v; V' S8 E1 T prefix="￥"   // 前缀符号
" R% `9 d5 l' w0 _# k suffix="rmb" // 后缀符号
; q$ w" f/ J: P& d$ v  d8 v9 G />
1
: N+ u# u/ n# G' ?2
3
2 t0 b- j8 k2 h' j% c8 S4
5
8 k3 }  k3 y3 @% r7 Y* v: G" i6
7
  S, O8 [5 x- E; g: c8
# Q+ ^( @2 y# g1 k4 B  x- y入口文件index.js

2 L( Q- W1 _6 ~; t' H  `8 h1 ]const UILib = {
/ C* I* k) p0 V/ [: L  install(Vue) {
    Vue.component('CountTo', CountTo)
- y# U/ p9 u2 H8 N2 b: ~( F, Q  }
" O7 b  {- ]; d( S* H1 \}

8 F) |0 _& m9 s9 Texport default UILib
$ C7 K6 C* p) `/ j! s+ L( G
1
2
3
5 |1 y$ I( d% {4
5
+ h4 `, ~# m( q; v6
7 U: c, r9 a* ]) C: Z7
8
9
1 ?9 l7 ?$ t+ C1 i" e/ L- V0 W3 Omain.js使用
: P. n3 Q; o" q$ X8 @- G* ]3 mimport CountTo from './components/count-to/index';
3 h- i& X8 ]0 @app.use(CountTo)
1
3 p2 E; k4 s3 R% b2
8 X8 F% }* j$ j( d. n# n: HrequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
/ H$ q, n: K7 c$ U/ j如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
$ _' q  j6 k( H9 q/ V1 ~# m* A各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
let prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
! }% Y2 ]0 Y7 A0 G/ G, t// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
7 T( k1 L: U1 N- l2 S    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
% `2 c' F% `3 @( u7 j        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
$ m8 r& s( N7 c! m  c$ d) Q4 P    }
! |! ?/ j) E0 F2 i1 R1 ?" A
( H6 p) J" i+ L3 a  //不支持使用setTimeout方式替换：模拟60帧的效果
/ q$ v0 c2 _5 ]; ?  r  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
# i3 ~( L$ [0 E9 H* u3 V2 }    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
: f/ O; l( q6 g5 }            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
2 E. }- I+ N: L            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
, C8 ^: o5 b, b                callback(currTime + timeToCall)
6 X: _  G' V  v) h. q            }, timeToCall)
            lastTime = currTime + timeToCall
& I5 k" J1 d8 t  G            return id
0 G4 y* @/ b, y( `0 V6 c8 \        }
( Y- Q; I* s( |" f( ^& U
        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
# n7 N! E6 b+ n        }
    }

1
& \0 a% x2 E1 {2
3
4
. T6 X' A; g8 m' Z( ^' j5
/ P- n  v; Z* f6
/ G% R! H2 h$ x) F$ A7 ]7
8
9
10
, I) R5 W2 n4 \11
12
' A# Q9 _9 s, D. K; ?7 ~, z' B# H4 e13
14
15
16
17
18
19
* c' o4 P) ]- v/ B1 |  W20
; d. u/ y! I  o21
22
23
24
# ~# Y4 Z4 O6 t25
+ K- x, S! S8 g: z  Y2 l26
6 @, M. v  \; }1 m6 R5 x' |27
  i0 y$ D, D& O; k$ _8 x, D28
: l5 [7 Y1 j; b29
30
31
; R+ @0 Q4 \# a0 b; Y+ m3 ?/ R( K32
6 z  H* a$ C- C/ q7 @& Q2 l完整代码：
$ i; f3 r0 i  D9 E: @% I. \requestAnimationFrame.js
4 Z% u; e# q, _) _
let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
& G6 ^  P  z! O3 V. F
7 i( ?9 z% x" K! b' Dlet requestAnimationFrame
) K! n( T* A+ ~/ o; `let cancelAnimationFrame

# f7 Y# V. \" V4 d: R. ?// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
    requestAnimationFrame = function () {
        return
    }
" o  [5 ?, x' w# m6 @. z    cancelAnimationFrame = function () {
9 u6 F/ O; y  |' ?4 v) ]        return
    }
} else {
: j6 H& ^! j% M6 S" t2 |    requestAnimationFrame = window.requestAnimationFrame
1 Z$ }; L  n. z( o    cancelAnimationFrame = window.cancelAnimationFrame
' u% }2 x6 e: ?. N# s( m    let prefix
$ T1 j/ u! t3 b6 ?    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
7 F$ o& d9 J; W# ^! n0 k7 x        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
) m$ g+ R, \1 ^5 l: i1 D    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
% @! h9 ]. T- p. u# _' P) S: [        requestAnimationFrame = function (callback) {
  O; m' }$ v/ j  V# C            const currTime = new Date().getTime()
9 C1 ~; x" W6 ?, I  W            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
2 g7 \7 }1 u" s! w+ ]5 [$ n            lastTime = currTime + timeToCall
            return id
        }

/ }0 Q; i- E, H+ y/ q        cancelAnimationFrame = function (id) {
, B6 W# V" x* Y0 ^8 K. {            window.clearTimeout(id)
        }
4 a5 L: @5 K1 S: }3 w1 q& C1 g# n' G    }
}

! }# v* D+ n; V& Yexport { requestAnimationFrame, cancelAnimationFrame }
8 y" j& K' T( U- [

2 C5 g0 U: z% J7 j5 |) ?5 p1
2
9 B2 A/ B8 D/ s! @& Z* K3
4
5
6
7
" A" w7 w& Q$ q, v3 M: z( f3 C7 {, w8
9
+ u6 o! ?0 v# p10
6 e- M! M0 P$ s% \$ m5 r- ?11
12
13
14
15
4 I" A2 D6 D3 U( R5 v& A0 w16
: h' @) \; z3 P7 X7 ]17
18
19
0 d* Q$ w6 X' m/ s) C20
7 _" I0 [: P0 c' v. h+ o21
  u$ C( g! D# K+ r1 D22
7 W. K: T+ \8 O0 s+ e6 M23
24
25
26
27
28
29
; H- i8 V- _8 ]7 V30
! r+ R" q4 t' z31
6 N% D, l% [+ d5 x/ A# \' V8 _32
33
1 D. Y, f5 [! i7 w34
( q! a. _- g) E3 {7 f% O35
. F9 |& u9 q$ \; u$ z36
37
38
39
40
4 e% w8 ~' W! d* d2 ^1 e8 d/ S) P41
42
5 R9 o7 I' j0 x! ^! R, A* a43
44
- L& r( w( D& a% }: a% ~* x  Q6 x45
& [& Q6 K# i+ c$ ]+ v/ X: ^) x1 X7 [% r46
4 Y' G- C3 e/ \5 z* O3 u, J. a# n47
5 z/ w3 l, S1 h/ D' e4 |. g) N48
7 `: C  |, h/ LCountTo.vue组件思路
6 v  f1 j) q) [! J# Q首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
1 p0 X. ^; m4 K0 O, R
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
; ?3 C4 s/ I( R4 B  p/ L1
9 j: B4 e" M( z; ]9 P' H需要接受的参数：

* A0 u, l) r  h, h$ k4 yconst props = defineProps({
  start: {
+ H* [8 Y) X. G+ R7 O+ d& g: k9 `    type: Number,
    required: false,
0 F3 h2 I& v+ Q3 _9 i( a    default: 0
  },
  end: {
    type: Number,
3 l+ ~9 u; \# ?5 f9 k" L    required: false,
1 R' _# L/ q+ S/ d    default: 0
' P3 I0 M! u+ d& M) t; Y9 w( Z, J. H  },
  duration: {
    type: Number,
0 q: s6 d6 x1 {- i$ |% K    required: false,
+ W9 Q1 R. q& M! `# ^& h    default: 5000
  },
& M) k! s8 x% `2 [% o  autoPlay: {
    type: Boolean,
    required: false,
    default: true
  },
: m" H: T& a. z/ \2 w  decimals: {
    type: Number,
    required: false,
    default: 0,
    validator (value) {
      return value >= 0
* M. b3 o4 `: j- T0 s& D) C2 s/ }    }
8 e( Z( T1 v9 ^  },
  decimal: {
    type: String,
    required: false,
    default: '.'
  },
  separator: {
) P( X. F( |( m' _+ Q0 h; k! d- C    type: String,
9 ]' g! _5 b% }6 m5 ]( p; h& L/ {    required: false,
! R5 C- x% t1 t: T& I) T4 v    default: ','
  },
5 ~6 m7 L# V0 b; ]  prefix: {
0 A: ~7 _2 N* j% T* y2 I    type: String,
    required: false,
    default: ''
  },
; a$ c& e; ?5 m  suffix: {
    type: String,
- \- ?; M' H( H3 {" a1 M8 K    required: false,
    default: ''
  },
  useEasing: {
    type: Boolean,
- B- K) \! [; m    required: false,
    default: true
+ F, v3 I, Q$ t& h  },
; j+ z0 W7 ]7 E4 N, T  easingFn: {
    type: Function,
" S- l! @; r9 T    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
; l$ J- d8 w; m& A2 j* t    }
  }
})


& ^% T! Q1 j: X5 j: z1
1 L8 Z+ L; C6 j! Q" f2
3
4
5
6
1 E/ |* `3 j- p+ V: F7
8
9
10
11
1 X" u/ M5 V4 I' l% u( }$ ]12
13
14
( S& I1 V; D. Z( q' U5 e: w15
16
17
( E+ U7 j  m- X$ Q" i5 n18
* [0 R  c! o" k  @" ^19
$ B' g. C! h" c. T8 A20
21
. h# F; Z) w: l. N+ K22
23
, E! @& G. H9 ^24
25
1 g; T3 v) C" A, K3 J$ x26
27
! I6 l7 A% J, y. G28
4 e6 e$ q$ H, x- D# E  R' l29
30
31
& R2 j) Y/ p1 f: l32
  J0 ]% h  g! D/ @& b9 j( U33
% Z9 M0 V  E! l  N1 ?0 S# `34
% ^# }% U; P+ z2 d9 J- {4 D) D35
: V( _$ {% @. r  {- z5 G36
37
$ U8 q3 y/ r6 d6 J2 J" U& @38
( |. R1 o( V0 ^' X* o1 E; r& h/ m39
40
41
42
$ |  ^5 r, L4 e" Y43
3 t7 X% M7 E0 W2 O2 J44
45
' n5 p! G: [, P46
/ z5 }7 s! |' I3 F. }47
48
* u7 ^# }8 j$ u/ |% B! O49
50
51
$ j! q  U: i% b! b52
53
* E9 q( g* B* S3 Z0 ]54
1 m6 l" k: M, w55
56
; J% y% ^( x5 V! H( j& ]7 o57
2 N' Y& {5 w' }58
- n9 G: T% o0 g9 k8 W59
60
61
, s6 T- A2 ^1 _: f62
& T) h) ?. g  L1 z6 O+ X启动数字动效

const startCount = () => {
  state.localStart = props.start
+ W0 `) R) Q1 V4 y! o1 ]" P  state.startTime = null
  state.localDuration = props.duration
4 I& J; R6 u5 {  state.paused = false
+ m" E& k8 L/ ]% O' _3 n  state.rAF = requestAnimationFrame(count)
}
- S: r2 B& ]4 v' y1
2
3
4
) V. g3 J: X9 L/ [, I. M5
6
7
4 y( x" g; c$ [( f. Q核心函数，对数字进行转动
$ [1 c* |4 V1 O' H  ?
  [+ \$ B( R- P' v9 n! D6 s  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  `( w3 r4 e# V& ^" K! }  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)
; n0 Z) M) i9 ~! a* W    } else {
/ l# t. j, {! p, ]      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
3 |- M1 [# Q0 E8 G    if (stopCount.value) {
, |& f  V% \2 n5 s      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
" \$ S, A; E& ~5 Z    }
  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
0 q% N, r6 \" ^: ]2 P    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

( |- z3 m! G) B* m  state.displayValue = formatNumber(state.printVal)
% @. L# N+ P2 \& s& k  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
# U+ @  M( n; P2 ^+ S+ @  } else {
5 x) A% Q9 x1 F; S% ?: r; E2 a1 s    emits('callback')
4 |/ ^# O; Y% X5 n' k  }
}


// 格式化数据，返回想要展示的数据格式
3 O: X* O# ~1 E: y3 ^# cconst formatNumber = (val) => {
2 ]* K% Q( @  \- h7 t/ g- @- m  val = val.toFixed(props.default)
- w& I6 d6 [3 X  val += ''
% _: F, E2 R" ~2 t  const x = val.split('.')
  let x1 = x[0]
; ^. |9 I) K5 m  [! L. T& u# g/ x  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
& A8 F& b% C( x1 I& S% I  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
7 }4 S% N0 y7 l: g' y6 R; [      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
: P6 r6 c3 d2 Z7 V5 a% D  }
  return props.prefix + x1 + x2 + props.suffix
}

1
2
6 ?2 E! O  X* A5 y* z4 s3
4
/ _3 q) ^' w! {5 K$ F) L5
6
8 [! m$ Y" y% a4 m5 f- x7
# s8 i. H5 z3 Q+ A% _  K) z8
3 p4 }" [* a3 C( b4 y4 g7 a  h9
10
% M) u: ~% q, @2 n* w; Z( ?9 a5 l2 p11
$ O# y* q. @1 o% f4 {12
13
( h! v0 }/ U7 B* v" |14
1 _: O/ r3 J9 F: i, k2 W1 D' k15
16
17
18
- s9 W3 t) d- u  b) G) N  I19
0 R) r3 S% A- L# Y20
21
- q* a& `) t& _. U: g9 C- F, c22
" @2 c) Y  O& j3 I23
- Y* {+ S7 l6 ]9 l( \' I24
25
$ z  T$ Y7 R9 r2 q3 l. N5 |26
3 Z% |$ a8 X* m/ T* a0 p  a27
28
  [3 \- \( q9 l7 j. G" R& R29
0 {/ a8 M( K0 b/ {. h% J( f+ }30
31
' B  u. W5 G' k32
33
1 a9 e5 O* {: k/ N34
35
( t  f! f6 `) f, o36
37
2 v- X" p) m% {1 k8 \. o8 W38
39
40
3 L' Q/ q4 l; m/ c41
7 i% p" x0 H* u4 y42
* x- L4 V. D5 n6 i' S0 a' r43
+ F) p3 O7 a3 N8 N, b5 [$ e6 C. g44
3 q& q# p) o/ g3 V45
46
47
: S8 l: C# R2 R) r% D48
取消动效

// 组件销毁时取消动画
( Y9 I+ O  ?- u+ m& I2 OonUnmounted(() => {
3 A0 V+ J& }4 X3 G- E5 n" }  cancelAnimationFrame(state.rAF)
})
1
2
3
4
9 e% U' w# a3 ?! D! c! {. U完整代码
" S5 g. I- _: U$ @
0 ]; r0 m/ e+ _& j' h8 i<template>
* N$ F  h" G5 Q1 W" s  {{ state.displayValue }}
</template>
- C) Y& D" m. ?, w9 J
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
" w1 I3 j9 U# K! g8 A5 q2 ?import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
( \) e) n/ _! h. Timport { watch, computed } from 'vue';
. ?" B2 e' E0 mimport { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
const props = defineProps({
  start: {
    type: Number,
- g/ z7 n, \: P: Y# V3 x( o" N% I  l    required: false,
# T  ~% w" ~' o$ V% q$ P1 i    default: 0
  },
  end: {
    type: Number,
4 t' t9 u; ?- \, N; @: v# c    required: false,
+ I' a3 ^; B; k% s' y$ l    default: 0
- A% N6 |  W" V+ k& u: x  },
  duration: {
6 Y, i1 g$ @( B' [" J    type: Number,
    required: false,
    default: 5000
/ L. X& F5 q: F  I$ A5 n) y  },
  autoPlay: {
    type: Boolean,
+ o% G( S4 S3 s5 O& v    required: false,
    default: true
  },
, i" G2 Z, R9 q/ ?  decimals: {
7 c7 Y! |( [, A7 d. V: F    type: Number,
    required: false,
, ?' O9 X, t0 P  E    default: 0,
6 Z$ p; j; F+ k+ t! J    validator (value) {
      return value >= 0
$ g: e( p5 b. `' c    }
  },
  decimal: {
8 F% U; B# b/ D6 F; D/ k    type: String,
0 _+ f+ c6 Z' P- T    required: false,
! d* e* B+ \. n, y    default: '.'
  },
) r$ e4 W( H0 b3 H& U0 `( [* g  separator: {
! N3 S0 Z6 a2 e    type: String,
    required: false,
    default: ','
  },
: c8 k* W. K6 C+ ?* a; `  prefix: {
3 g3 c! E0 I% b; X/ Y2 n    type: String,
' e% C# S7 {1 m! s- S    required: false,
  \! @& E1 Y# W. C/ T    default: ''
  },
# T. [. N" Y% [! N: m% C3 k  suffix: {
    type: String,
    required: false,
    default: ''
7 R. x2 M' m2 t  },
7 [0 t: T1 i  \- v6 C) x  useEasing: {
    type: Boolean,
: A0 f# g2 L- k8 r8 ~* i9 _    required: false,
    default: true
! @& `) O3 s% F. a+ }  },
  easingFn: {
    type: Function,
0 q- q# S$ A- x% k- P1 x$ U    default(t, b, c, d) {
. ?5 Z8 t; y- M2 r8 p. }) H; G      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
, D# W# `$ _$ C  }
})
4 F( l8 K( ?, k5 r# x
; z1 |) B& }$ H% Jconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
}

// 格式化数据，返回想要展示的数据格式
" d, o: ~: c/ R6 `1 @const formatNumber = (val) => {
  val = val.toFixed(props.default)
4 R- X( L. X3 V  val += ''
& C: s/ j( D+ f$ G  const x = val.split('.')
% h0 o7 I/ r/ m; s- I, B0 s  h  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
1 o9 T2 S# e/ v3 D' A' z/ x  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
; \% c: E7 Z3 R1 G    }
4 b6 k+ `6 n  X0 n5 p" j$ q0 J+ o5 e  }
  return props.prefix + x1 + x2 + props.suffix
% G5 L& A0 l8 E+ d  A2 L}
! F, p$ k4 U$ G; p! Z+ |
8 F9 K2 _: ~+ f// 相当于vue2中的data中所定义的变量部分
' \3 E* i( K( Z% c% a( ], Sconst state = reactive({
  localStart: props.start,
9 S  u6 A% Z% }# p5 H* r* Y6 X  displayValue: formatNumber(props.start),
  printVal: null,
  paused: false,
  localDuration: props.duration,
  C" b$ J! X  Z. F  startTime: null,
% x" l5 Q+ I6 R$ l  timestamp: null,
* k% T) |8 L  x! \  remaining: null,
; Y) `$ f* R: w8 d  rAF: null
$ ?! O& B: }# t2 P3 r5 a4 R' e* q3 R})
1 X4 |) G- J& l
// 定义一个计算属性，当开始数字大于结束数字时返回true
2 {  P- |! n& D# k% ~! D' }const stopCount = computed(() => {
& c% h( F5 C  \" U/ `  return props.start > props.end
( P, U3 s3 v  ~  `) t* I- M6 }0 z})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
! b$ P+ Z- P4 D( r  Z" D5 l; n  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
7 y/ R2 X- R# I) n8 M( ?& s  state.paused = false
  state.rAF = requestAnimationFrame(count)
# `& _7 t" g, c}

! m  a0 t. f( @* U2 b5 @watch(() => props.start, () => {
4 Q: {: I, Z$ W. h- \+ u2 s. _+ Z  if (props.autoPlay) {
7 j* A% ~6 z' H2 U    startCount()
  }
})

" v+ D5 \) @( W0 |0 bwatch(() => props.end, () => {
1 v1 L. O. l# k% v  if (props.autoPlay) {
  D6 }- G. V) x6 X9 k2 O    startCount()
  }
})
// dom挂在完成后执行一些操作
9 O4 x. D* X- t; y2 l# ]  v/ qonMounted(() => {
- `& m/ l" [. R  if (props.autoPlay) {
    startCount()
5 I5 x. G/ a2 @( m. s6 n  }
/ r# L+ u6 X2 R& K  emits('onMountedcallback')
})
// 暂停计数
/ N/ m4 R" E9 Z. k% G. A, zconst pause = () => {
$ B/ Z7 ~/ X! t( G8 r8 y  cancelAnimationFrame(state.rAF)
}
// 恢复计数
+ \& E6 e5 O1 }7 Oconst resume = () => {
5 H* e& ~% Q4 H+ Z. r  state.startTime = null
  state.localDuration = +state.remaining
" M6 F" {5 d$ o- p8 w  state.localStart = +state.printVal
  requestAnimationFrame(count)
}
: J- M' [7 R, C+ f7 s& Y
7 s. D- }8 L5 a% j7 [4 ^* ?const pauseResume = () => {
3 m& i" T, b' ~8 @* [* j" k  if (state.paused) {
    resume()
    state.paused = false
# U' p+ i4 p; B8 Q  } else {
+ z& j' o, b2 C9 `& f    pause()
    state.paused = true
7 |  m& H' y8 m' v* W" ^" b  }
}
# ^0 z" B' `) g  x8 s
; c  L- T  Y% l, k" ^* Tconst reset = () => {
+ s3 y) X7 Y) b. E( l& ~  state.startTime = null
% `  e' M: g) T& V1 Z  ]9 {2 u  cancelAnimationFrame(state.rAF)
/ a' A% x8 X0 b; N/ u' b  state.displayValue = formatNumber(props.start)
}

# S! N& r. d2 T3 X5 U" O" [  Nconst count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
  if (props.useEasing) {
0 b( l# q# C: k, n' z2 m    if (stopCount.value) {
( k+ d; B9 u7 n2 B- h      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
8 ?3 X9 j9 q- O9 g6 o0 o5 O5 \    } else {
) J' I* j3 m; O0 a. i! F/ X5 ^) R" A! c      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
. _" a: E4 W! u, w& R- R$ ?+ F/ Y7 }  } else {
) c# B! _7 h# c5 ~/ A    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
8 V% b8 b" }: }  D( H    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
  i9 k, z! n2 l6 x4 b  m) Z    }
) k% \1 C3 H  f" \3 D- e+ R% `$ L  m  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
5 M$ j& j4 v0 _8 ~# Z, ^4 o    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

  state.displayValue = formatNumber(state.printVal)
: w% T8 A, O3 ~* U4 O  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
3 F0 D1 T+ t: |$ l9 n  } else {
    emits('callback')
3 J2 i3 R- E1 b: x# q5 a3 V  }
3 b$ ]6 g! K9 Q+ `}
( M5 d, r5 T3 ]' b  W9 F2 Z// 组件销毁时取消动画
) L" o4 ]. n0 R( L1 R6 W  X$ [  L6 P  monUnmounted(() => {
  cancelAnimationFrame(state.rAF)
( K1 S& w1 W% Q- }/ {  ~})
</script>
; ~+ Z6 _1 G/ B6 F
1
' ^( p- W% g# I/ z2
& H) K* ]( J  C3 ]+ G1 b; ~3
4
5 I) i: ?# f4 A# ^8 \5
0 _! D4 J" G+ t; v: A6
7
8
% C3 Z( h7 E+ J) X9
10
11
# e) q1 e2 D6 a3 Y$ c# j4 R% X12
8 v' s% U/ ?6 A$ [13
14
15
16
17
/ a+ J; S1 t! X18
19
$ D# ^+ P5 c6 E9 P3 o' A. U20
21
0 s  w8 c$ ^3 ]22
23
24
! y# E6 @; r! j4 h0 j0 v( {& w25
% k" l7 k* |7 H. V# t8 ~26
2 B4 s% q# ]' r$ k* r! L; F& m. Z27
% A0 a/ S8 N) `, K28
29
30
. o; D# C/ c6 M) u: v31
9 m4 m0 o; y8 L  [  f9 I) k32
% l. F* `# z; H$ ]4 `% c33
34
35
4 d$ u# p. O7 t2 I3 N: @36
37
- y  F% Q% M+ b4 D38
39
/ v( `& O; o! K; M/ Q40
+ @0 O8 u' f" P: p/ M1 G  V& A) e41
42
43
4 v( y4 A& s( X' t- b44
. p; y+ x9 ^6 [+ }0 R/ D2 E45
% r2 O8 p1 t: r5 ?6 m* P" f: v) F46
47
48
49
, A5 f: }, C& P/ I" [! |50
51
52
. d) C1 ~9 l: d$ }% i4 L, G3 Z53
54
- D9 F% s2 Q, _5 q! p3 L" ~55
% k. g3 X. X% j# G56
  @2 R$ S' t; C57
3 j8 I" D$ N3 N# ]8 \/ P/ j58
59
60
  R) ^( p; A! ^7 ^: a; |61
" Y; ?4 H) n2 }0 M' B4 S  U' P62
6 L3 Z) Q) [8 Z1 t: _  \63
64
! o* k( Y7 i& ]% [' k/ d2 B65
66
67
68
9 K9 Q4 z. G9 I3 Y: ?3 l69
70
71
7 b/ a3 Z4 }6 ~/ g72
) b7 J% T& R) o; e( y! j1 Z73
# A! o$ Y  P- c5 g  \6 ]74
7 F  c! z& s9 f: g6 r75
76
' T; P( j! E1 m# F0 m. q8 j77
78
79
2 F6 ~. ]5 U2 r, i80
81
6 W& K- K9 @/ C1 a* U82
83
84
9 C4 H) [0 G, a' A% ]$ W3 U85
86
87
+ ]' R+ d2 \; Q* a( q2 U88
89
7 E8 P) z5 ]* F4 s0 O" ~: P4 P90
91
2 L$ }9 P. V  [7 O92
2 g$ U* c6 Q. i  E5 `" s5 g93
94
95
96
97
98
5 F: {( j& A3 X3 G9 T99
: C9 P# w5 ]2 d! a100
* p& e, X) B. }  F# j2 O2 L101
102
9 M, v* b( j+ f103
  ~" k& I3 O, Y) D) c+ B* @104
. J0 d2 f3 `1 g; z105
106
107
2 v) m1 j, t" N' T2 P108
+ ]1 @, b2 d) u! e9 M9 L109
3 B* @. }; y8 [* y0 F% K110
* u. e2 O, `! a0 Z9 Z5 }0 P& }111
112
# W+ A* Q) ~9 i$ S. {! r# j. |  l113
( t5 z* |7 ]/ ?' I( P8 n114
115
% _1 Q5 |6 y* x/ R7 b8 V" D. F' T116
3 O. \1 ]1 j" B117
118
+ W' |' a4 d4 D) r: h" u119
120
7 O4 ^+ ~: t, }121
122
. {3 [4 |& K2 t! }123
124
125
# D: O7 _6 }0 F  x126
127
128
- g; |5 G# s2 |129
; {6 r7 r+ V, V2 r130
! c3 {" J) L+ e$ K3 w! V; B131
132
133
+ S8 s' u2 p3 n  t! R& t134
  H3 r4 `7 z" {* Y135
& f- v/ M7 K0 Z4 Z136
137
1 _- A2 Y: D+ e1 u& M+ A1 a5 E138
6 v% }$ ^5 {- e" x  u6 s* N139
+ b1 M, a4 b6 w2 ?* j; a7 u140
# b7 C( Y7 B/ F/ y1 ?6 [141
2 C- H$ _: M+ g2 s: q. T: D142
143
9 d5 i+ m+ @& f6 ?! M" L, @144
& f4 i5 `) _/ g$ v145
146
1 T" _0 W" v2 @3 t& X9 t$ T5 W147
8 _6 T1 w1 w  v* I9 I148
/ ^5 B: P+ }" {* p$ _! q' q- x149
150
151
6 F( m9 `8 k* ^/ T" g: Y152
$ t/ e, J# E( b$ ]9 G4 O9 L153
3 Q% ]- `: e. G, k2 q154
155
156
157
8 s9 o: m7 o% P7 a! e4 `% \158
+ c9 H' j% d( Q* \; @159
160
161
) r' z& E+ I7 d# v& D# g162
- ]! b2 J6 I; x  Q1 ?% x6 t9 A163
164
* P5 e- K- c# G7 C0 o165
166
& p0 a, W  n8 X( |/ q167
" y; F4 B! _+ n168
9 S7 ~  q5 N  `" N% U, T" i169
4 h2 @: o0 O' q$ U* T0 a* g170
171
* P0 G3 ^6 x; ?5 N# y/ p172
9 ^, N, ]( m2 P173
174
175
176
* o! Z% r6 a0 f7 N8 u/ m, z177
" e" j0 [* W8 N9 s4 I% q4 Y178
179
: {9 ]7 \! d( S( F! C- f180
181
& n: X" x; u4 t' e; e3 J' i182
  D' i6 K' ~1 V' c# q183
184
185
186
$ P- {. D) L. x1 Y  z+ [: A187
7 H9 S, H9 I8 D+ m. F( }188
189
190
: X2 e2 O5 C7 \3 e" P( A  Y* F! P191
192
193
! T% h$ ~% C! t3 I" X  w8 p  o194
1 |  s- y* z- S. q195
196
197
* d0 y2 V4 `8 S$ e# l: R% u198
199
200
201
202
9 t0 @+ p  L1 ?- F6 Q$ @1 X3 t总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
后续的线上demo演示会放在
demo演示
完整代码会放在
个人主页

" P! Q; R; D& T0 u3 a希望对vue开发者有所帮助~

4 s# H; D0 {5 M7 s, a* K, l个人简介：承吾
& F) D" b5 S! B# g; W工作年限：5年前端
# Y, k5 }, w$ Z地区：上海
2 _, c$ F. w3 b8 s) l3 R( k个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！




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

- p6 r+ R) @$ D2 R
$ }- e: X2 Z! C' d