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

杨利霞

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

前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
# U! x! M8 b2 h; P* c3 h$ \0 A

9 a3 |% Z  Z9 N1 d5 s! p思路
: _+ H2 ^; j' ^. R+ Q$ O% C: I使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
" e: P* Q& d0 z3 |7 o4 O+ Q( r
文件目录
2 _, Q  |  i# y$ h
' o/ b) z# p  K' x- P
使用示例
, W# l8 `) E2 H, x- f6 g4 |<CountTo
( v# K1 y9 O2 E6 k: [5 w: s :start="0" // 从数字多少开始
  k% g+ D/ L/ G  u8 L4 n :end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
7 k( z2 m* ?* j3 _2 w :duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
1
( [9 `: x+ v9 R; y; P3 @7 m2
& h* m' {/ q$ ~) N3 d# k3
4
5
. z: ?% [/ s' b& D8 B6
7
# @. x8 g; C8 t5 M. y8
入口文件index.js
0 E/ x* _* Z7 Y) B* z
const UILib = {
- g0 f9 S' u: N' D! B+ }  install(Vue) {
    Vue.component('CountTo', CountTo)
, I3 V, V# o; g3 `1 A+ k  t  }
+ U" i7 b# |/ F/ [" S7 ?+ L}

9 a4 @: D2 R/ W* x3 G) A1 s0 y; Y' \export default UILib

1
; k/ z9 n, @1 j- u( d2
1 W9 h4 m& R, ^7 J1 R# ?3
7 s2 c3 u! Y) U7 Y- A4 X9 y4
5
6
& q3 T( V4 q; b, Q8 }7 \/ g7
8
9
main.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
1
2
& O3 }: k* _. e; WrequestAnimationFrame.js思路
9 ^- g" H' p  k, y2 Y8 o先判断是不是浏览器还是其他环境
, G2 {9 ?8 z$ ]5 ^如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
1 ]. Z! X, K; ~& k: X3 V) Y各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
7 _0 P3 o7 w+ M2 {) d: s9 q增加各个浏览器前缀：  
% [7 A0 G" K* C+ X! X7 Ilet prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
' }+ j  s, i& ^& D0 u" g' W. R    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
. P& h- d  i3 O/ D) U* ^: f        prefix = prefixes
9 m2 \9 a) F0 R+ o        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
; X% S& P/ u$ k
  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
2 |/ O/ W6 |) S- ~: V- e+ o/ A        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
* M' b, ]( N$ P3 I            // 为了使setTimteout的尽可能的接近每秒60帧的效果
2 W. W) u  z$ m( r  h1 K9 @" `. Z            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
& l4 K5 \  J- e4 |  D2 b) y" C8 \9 s1 c                callback(currTime + timeToCall)
            }, timeToCall)
7 P8 ]- I$ b3 u            lastTime = currTime + timeToCall
: `- B+ ?4 k4 Q. W            return id
        }
3 O8 Y' M" f. M' \' N+ @8 V
7 y. }& R' O) g5 B        cancelAnimationFrame = function (id) {
0 \3 Z# R5 j" ]3 c1 R$ I) w            window.clearTimeout(id)
+ T( y7 h: c8 \9 p3 T3 \        }
; G3 }4 v, l* c- a* R    }

, C( L# E/ ?, S1
2
3
4
5
6
7
8
9
+ y1 z7 O& S4 j4 E" p10
11
12
13
14
5 u' ^; g2 f; c/ C) r$ e, K15
  X9 M& r8 p- [/ a; Z, i16
, ?* b$ l! @1 e% @* {8 j6 B17
18
19
20
7 ]' w" Z" s9 d4 ^. h. G21
22
23
/ z) ]3 k. P9 _. S' d$ ^' \24
25
26
! F# w8 n: t+ A3 l2 M* M27
28
29
/ x, X! S% v- n30
5 O% A- ]1 h2 \8 F+ K( ~31
- J* \5 \3 j6 p0 M8 w32
3 D0 j7 ^6 X: \2 R1 H4 l: Q, L& y完整代码：
# C# [- s  o) I# Q) q3 FrequestAnimationFrame.js
2 ]6 Q$ C7 j' ^% M
6 a! t( U1 n0 R0 f2 Rlet lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

let requestAnimationFrame
: A/ U+ w$ l" ]) Y- l( Mlet cancelAnimationFrame
6 m( O  j6 a4 d8 R
// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
% Z, J7 f6 E5 V/ G' C- N    requestAnimationFrame = function () {
        return
" I. }, _$ l8 W- m: v    }
    cancelAnimationFrame = function () {
        return
- _/ _2 R! k  U) s/ x/ r* k1 ~1 C5 [    }
, }6 E$ @! o5 _} else {
% I6 z8 t$ H0 W6 W    requestAnimationFrame = window.requestAnimationFrame
  o8 V8 n: m3 Q4 \    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
2 g) H  c6 \) t8 c7 J, {    for (let i = 0; i < prefixes.length; i++) {
" W. Q( f1 E: w+ m        if (requestAnimationFrame && cancelAnimationFrame) { break }
+ E' H1 ?3 S0 Z$ Y        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
7 w- b6 o) u6 Y5 B! u0 y        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
  D$ {. F4 i4 S/ P    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
$ m1 b+ T- N* R' Y# R            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
) J. ?! K9 }. C            const id = window.setTimeout(() => {
! t$ t& M! T8 H9 }$ t                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
8 l0 q: e) W5 ~" \        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
* d5 B  i1 @; B/ q. K        }
7 C' L: Y$ Z: D9 c4 {    }
+ Z$ p% B' y# h8 E}

' s. V! E: Q# L" s% lexport { requestAnimationFrame, cancelAnimationFrame }
+ N/ U" V, Q$ i$ t

1
2
3
1 ]" ]; [8 i6 q5 A. q4
5
8 T! z* @+ ~9 |/ j3 S6
7
, F& q. g* C6 i- x' O! K/ {8
9
- E0 S1 b# ]. C/ G$ y* N5 ^2 ~10
, b/ \" h$ h6 l8 A* \8 s7 z$ `11
12
13
14
15
16
! O0 R3 z2 ]+ D0 ]" u3 T17
+ y5 t5 c- A3 a* d/ V18
0 _4 R3 ?7 L, \& b8 Q% _19
20
21
7 ^- s( X% v3 q22
# e; `, Z) N- K23
24
, n& g4 u6 k& F8 ^25
. ~" z2 d# J+ k. ?) [) P4 A! G26
27
. A2 H6 s1 B5 [' b7 `* r1 r: t" K28
: s+ k: p( g, O/ D, g% p) U$ {29
30
7 v: I- W# H1 `% @2 k& I8 i% g31
32
33
34
35
( `! p4 j  N' i, N; ~4 ]36
% D+ G  l' P$ X6 @4 p37
' ?6 b- p% i6 _% Q+ ^7 M" s38
7 [" N! R$ {! R. ^* i! b+ v: O39
6 H$ l4 O8 H  l# `" W% N40
41
2 K: ?" y0 A! {  r' b' N+ a) W42
( V4 t' }# n7 Q1 a0 B3 Z43
$ Y) S( f5 d: P) A8 A44
45
46
47
48
9 D$ |: N0 p/ {7 x( ?& gCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
% M3 R6 c0 E: `0 W+ A) r1
需要接受的参数：

const props = defineProps({
4 j- @: h  L7 Z, I+ r  start: {
    type: Number,
    required: false,
  d: p9 U! B8 y7 r5 t    default: 0
5 E) w4 \; a) }. l  },
& \( g  K) Z: a; z0 l  end: {
    type: Number,
    required: false,
    default: 0
  },
' ^& F, `! x, B$ A0 \* v  duration: {
4 E7 y) M0 r  B) J1 ~    type: Number,
    required: false,
    default: 5000
  },
  autoPlay: {
  D7 v6 {- F( x% u+ N) H% J; p    type: Boolean,
' z& s- c; O, Y6 G8 W    required: false,
    default: true
$ }  j# d+ p; H# z) h2 t+ a; T, Y' J  },
' b9 b" F, P& j  L8 E8 t  decimals: {
; T7 o& ]; [/ G    type: Number,
    required: false,
    default: 0,
    validator (value) {
( S) n; ~2 S9 P4 S+ |% ?      return value >= 0
    }
  },
  decimal: {
    type: String,
* H2 J9 r; L5 L$ _' z1 \4 c0 N    required: false,
    default: '.'
  },
  separator: {
! N0 `. Q8 T  J( U' T* G    type: String,
/ X5 ?: v: g7 @6 P, z7 E# y    required: false,
, d6 {6 \6 b! ]- J6 c+ n    default: ','
8 m4 I. U( ^1 x% h9 U4 g6 m( E: o( C0 g  },
  prefix: {
    type: String,
; Z7 Y: C( s  K  I% b( |! J5 D    required: false,
+ ?1 b$ T# b, N) Z/ D  M    default: ''
& z! G: I, O) C, S, [0 V  },
  suffix: {
    type: String,
6 i6 M9 H- N3 K+ Y    required: false,
    default: ''
  },
  useEasing: {
    type: Boolean,
    required: false,
0 H2 `- P* P6 ?    default: true
  },
  easingFn: {
    type: Function,
    default(t, b, c, d) {
5 r+ V0 O; H" h' N( c# X* l      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
! y; ?/ |1 {5 f8 s  ?    }
" [# q9 k2 I0 s7 ^  }
/ b8 S0 Q/ F1 k& U, x})
% K. s3 z# K* y" Y# Q9 V  @- \% l
5 x% L8 W! p& e! O0 Q
1
/ j/ ~& Q. o9 C0 o5 s2
# `/ t- {$ l( w, N9 B) G- U3
  H0 p9 @+ \( `' f1 j4
5
$ q& Z1 u/ ]% d% F- @- x+ [6
7
: ^) m. E4 N% o8
9
) w) ?0 U) d5 ^/ q4 u. D10
7 G( X4 ^7 q3 B8 d11
8 f' d$ b0 x9 K, d, g$ N9 e; f12
13
9 M! B1 j( d/ Y- i6 i7 a; c14
# ^9 z6 ^; W6 p7 c, h: q% M- ?4 y# F15
16
) L: I. S% B$ S* s# _2 t17
" [# F% e2 Q  ~4 ?18
6 n* K% k- X. T1 d) P% D6 ^19
20
21
22
$ H) {6 D! p* P5 ^  G; w, {23
0 s+ D; \. I8 d. D9 j+ y! ~24
25
, |( E1 G& W, E+ I26
1 d0 u0 f: A/ e; |" K9 ~$ G0 V2 S27
4 D8 N% Y2 \+ a4 u( I28
29
30
31
32
) ~2 V" X* I5 L# m) i  g33
: e6 X6 a$ ^8 i9 `" `! s34
6 n3 w! b9 n8 i/ `7 x) M! ?. G35
36
37
- T4 I1 k" j% q! T38
39
7 i& Q9 x; t# o40
41
42
2 J5 k2 C+ ]# y$ _43
44
45
4 s' k; O/ J6 a6 b# ]2 G, v' h46
# r6 T( O3 [$ f" V% O" e5 ~; }47
/ }2 p$ g! C* n6 _& b  V48
49
50
* A' p# {7 x, V- E1 @  {/ ?4 m51
% ~$ H8 a% W5 l; ~. w52
) G6 v5 m; V% V. r( t7 ^" T) c/ m2 s53
54
55
56
57
58
59
% L3 P' W  t6 [6 v0 N* h60
61
5 |/ x2 i$ S& W# k62
  t6 p6 ?2 c. Y" a8 l* Q启动数字动效
4 d0 R2 R9 ^5 J% Y
const startCount = () => {
  state.localStart = props.start
+ F! Z4 h' N' G8 n  state.startTime = null
* w/ E5 I# ?( \- _3 J0 O+ @3 J  state.localDuration = props.duration
  state.paused = false
) K. l3 A3 i. p( e6 A/ z7 l! W  state.rAF = requestAnimationFrame(count)
}
1
2
$ [( f! U  A& s- d8 a$ g& E% ]3
# n5 H0 @  [) |5 y1 K7 P4
5
6
' _) Y4 B8 ~1 U( Y  ]7
核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
; y& I  }8 z8 \2 s  state.timestamp = timestamp
8 a$ }2 e" U- J* A6 r6 ^* R  const progress = timestamp - state.startTime
4 Z$ D4 @5 S* S: Q  state.remaining = state.localDuration - progress
/ N; i: @5 l7 H9 Y, `4 }  // 是否使用速度变化曲线
  if (props.useEasing) {
+ H$ P- r# A# B2 U3 z+ N: K1 n    if (stopCount.value) {
4 S4 k- L# f- ?2 e1 y; q8 j      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
6 P# R6 D* K. N    } else {
: N7 O& {' u0 C! D+ Z; y; p4 o      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
( I1 n7 d2 W" x' e! j4 T    }
  } else {
7 Q+ Y' V3 m( w1 V! A) O    if (stopCount.value) {
  U/ Q; {2 r  ]+ H( x, O* v      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
: p2 w# y# b7 l2 M$ J8 o$ I2 }      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
- Z" X& f/ S1 J* k+ f' L2 ~( i    }
+ g8 t3 h, h4 _" u& _  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
/ C  I/ |( |" q5 N' i: U
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
% S2 _. |& _, K! j% v  } else {
2 ?; F! O# v, c    emits('callback')
* z/ X4 e0 Y) k6 M3 o* g/ S6 B  }
}
5 I7 H- W9 }! X

, x" e5 y- j# o: x// 格式化数据，返回想要展示的数据格式
0 m% c6 ~6 x% l. |/ P- W7 |3 Hconst formatNumber = (val) => {
  val = val.toFixed(props.default)
/ D* K( n) h$ N: B) D1 C" N  val += ''
  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
) Z5 e+ n% s, A2 M% ^4 c! U    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
, l2 P, e: k3 `7 g; N  return props.prefix + x1 + x2 + props.suffix
6 m$ [5 F8 r; ^1 N}

( n/ J; W3 s4 ]8 g1
2
3
# A( \6 w; z7 ]" O+ L4
9 `' v4 I2 @0 i+ y2 B1 f5
6 A( R6 C/ ?/ I1 |6
7
8
9
10
11
12
5 S- j1 ^+ D5 I/ f13
& B+ Y4 i1 f/ K! Z8 c5 K  H14
3 R) }+ N  d) H) ?: a15
5 s  @7 F* }4 R) Y# }; a16
$ |$ c+ }9 ?4 D2 h, [17
18
19
20
! l8 C8 o! D! ^21
22
" ^# u+ H- {3 \4 L% K7 A' T23
24
8 L! C7 F9 v- B& N9 d25
26
27
9 Q1 K/ T( i$ ^; y2 c! K3 \28
  p+ [4 L# Q0 Z& I( e) s29
30
! @1 q- p  q' H31
% G" i+ L, y* J0 B; l/ [8 n/ i. n32
33
34
1 \& L* {+ w# s. C9 `. s, `35
36
37
38
0 ?2 n4 U8 l9 p0 M: y/ D" {! S39
40
/ Y- t/ H5 J7 ^: k9 ]7 N' ?- ?41
* a" {3 a, c1 ^  Y42
43
44
/ {  r7 t0 I8 m; T; g4 K3 T: P45
  R/ D4 @4 a+ L( ?% m+ M46
+ _4 q5 S* b( {2 u! F$ n47
* V. `7 q; b- R48
取消动效

; }1 [8 U( \# E5 F: d7 @// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
9 f, D0 N3 u& k( ~. o- M$ j1
" E1 ~4 t1 ]  m5 S" t3 y2
# u0 p, ]3 @2 F. H- p* c0 u9 `& q3
7 w* Z9 i) _6 i' S8 Y* ?4 {4
完整代码

<template>
  {{ state.displayValue }}
</template>
, y2 [2 [: F5 k0 Y/ N: t
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
9 |7 l1 r+ R! mimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
const props = defineProps({
  start: {
$ {- _" q. p7 }) e: T    type: Number,
  A$ N0 y5 x% K' z( \! P4 v- t    required: false,
    default: 0
5 P+ Z1 p+ h$ c  ~# H+ d  },
  end: {
    type: Number,
    required: false,
    default: 0
  },
, ^" x( H1 T2 S2 E( E9 D% b3 C& w  duration: {
# X/ j/ i3 M9 g6 g1 g    type: Number,
    required: false,
" f; w8 T6 F" d( _$ `+ F/ y    default: 5000
( g" ]1 d( ^% A/ m, u1 K) v. v  },
$ |( C$ J  h% a/ w" r# X  autoPlay: {
    type: Boolean,
% f1 [! G$ N( q) f    required: false,
    default: true
  },
  decimals: {
! M6 v1 }0 z7 e) M0 R9 ~  n) y1 P    type: Number,
    required: false,
    default: 0,
& N- R5 J+ E3 k    validator (value) {
      return value >= 0
    }
+ p( T. e  D- B/ f  D4 n$ j* \. a  },
  decimal: {
9 @1 p6 h3 Q7 }% C, Q5 E    type: String,
    required: false,
    default: '.'
  },
  separator: {
" w3 v8 ^  ]$ j; k5 F5 r, j    type: String,
. v  Q$ v. s9 W, {$ y/ `    required: false,
    default: ','
5 i% X# l, B. @  },
  prefix: {
6 J. c. B6 G# V2 i8 N    type: String,
    required: false,
0 \3 _8 ?6 {# v6 c: W    default: ''
& p; I: f7 ?) r$ _  },
  suffix: {
. N+ A! [* L- v2 e2 I* {: V    type: String,
    required: false,
    default: ''
  },
  useEasing: {
- W" S6 A8 _- o4 d; j- _# c    type: Boolean,
. C( x4 v- t) c) _0 l& q" e    required: false,
; e4 ^5 `2 }4 W. c, f2 l) D$ M% l    default: true
1 {& ^& N" a  B7 Q$ H  },
" W0 s. `' f& H5 [( y/ G, \: q9 H  easingFn: {
8 _& R  R; D: V5 `6 q' [! I. V    type: Function,
2 ?! G$ X5 T! w7 i    default(t, b, c, d) {
- f/ C% E6 `( }0 D3 _      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
3 D. t  H' ]$ x3 d( W})

. g& d, M3 M! ?: g6 ~( [; sconst isNumber = (val) => {
1 F  O, L5 _8 X' [! h% ~% `1 t" ~9 o  return !isNaN(parseFloat(val))
}

// 格式化数据，返回想要展示的数据格式
1 Y, v5 Z* |4 l& p' {3 Bconst formatNumber = (val) => {
  val = val.toFixed(props.default)
1 G$ \9 r  U$ I) n  val += ''
  const x = val.split('.')
* R3 j4 c" {3 h. h  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)) {
- q! s  @* D/ Z: ]. r      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
7 w  {/ G* C- _. r( o    }
  }
. q, [0 ], p% w8 R  return props.prefix + x1 + x2 + props.suffix
4 r* Z3 @5 R# r9 i( e2 m- w}
* Q: p8 p. e8 i  a) j
// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
; L) L) G: i- u' x( h  displayValue: formatNumber(props.start),
* x+ q+ J8 [5 D& }; d" H, K5 H  printVal: null,
7 \" S2 O9 o) t' e, I1 m  paused: false,
  localDuration: props.duration,
1 b9 L# a9 U9 r# v# s: f0 _, u; v  startTime: null,
  timestamp: null,
  remaining: null,
  rAF: null
})

// 定义一个计算属性，当开始数字大于结束数字时返回true
8 e8 F9 D$ k4 r3 n- U' A7 t' Fconst stopCount = computed(() => {
  return props.start > props.end
})
& u7 T) V: g: l( B# p- t+ {// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
6 O2 ]3 {8 [) _# \& b2 N# S1 Aconst emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
3 W) c8 U$ P* L7 G  _  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
. a( W6 _1 Z9 O  state.paused = false
  state.rAF = requestAnimationFrame(count)
+ h8 I( F) h  B7 X. T- K$ v}
% W& d% o0 s9 P# `; w
watch(() => props.start, () => {
5 r$ h0 c1 t: o6 L( V  if (props.autoPlay) {
, X" M- m3 w1 q9 P- p    startCount()
; y7 g+ N! g. {8 N# B& t  }
  u* ]& `2 Q! a, _6 a})

/ R# a6 x9 G/ J3 T: i5 M) ^watch(() => props.end, () => {
. k/ u3 a# N- s, W4 g8 \  if (props.autoPlay) {
; e" {: H, A2 A; s    startCount()
  N! j3 Y% s4 J# u  }
})
// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
    startCount()
4 L0 m9 l3 z4 Z/ b+ }  }
: m+ K. G/ h5 q  emits('onMountedcallback')
})
// 暂停计数
# {' C! }  C) B1 M- l2 sconst pause = () => {
( |- _% S9 A* z* S+ \  cancelAnimationFrame(state.rAF)
}
// 恢复计数
const resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
}
3 {! n& d2 l5 }) Q! r2 j+ ^
const pauseResume = () => {
  if (state.paused) {
# I- d# N7 z! C3 d  u$ T+ p0 M    resume()
    state.paused = false
  } else {
2 k) `$ U! ?: }: @4 a2 f    pause()
8 u: N1 X! x  \8 n2 @% }    state.paused = true
  }
}

1 V" e% O: ~* f7 C1 }const reset = () => {
  state.startTime = null
$ Q# ]$ l) J' v) i  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
}
2 b, d$ S, I; l+ E: d, e5 E" l& M: t
$ `, U3 x% a+ Aconst count = (timestamp) => {
7 M  P7 J1 |5 K- X* h" Z( L: i. b  if (!state.startTime) state.startTime = timestamp
3 T" k$ F+ r$ b  state.timestamp = timestamp
, M( R5 h3 a8 t7 o. R/ l  const progress = timestamp - state.startTime
+ g# g% z5 x3 N! e" }  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)
# @7 C$ g/ d) t. q    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
9 X% J: f$ G+ c& u& J& G( W) @7 \    } else {
5 B3 r# I% m8 T1 F6 i% \      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
  if (stopCount.value) {
7 h5 U/ M  O# s2 V% p    state.printVal = state.printVal < props.end ? props.end : state.printVal
) k- f. A& S8 a* O# C& m; r  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
+ r$ u  O& {) b+ ]" G, j) w  N
) g! ]# o/ ?& [, s1 c" t  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
$ m. H+ q3 b0 L& K    state.rAF = requestAnimationFrame(count)
  } else {
5 \* s6 m. Z. D1 ^* z    emits('callback')
  }
* K: d6 N& n% W" O) Q6 _. x}
// 组件销毁时取消动画
9 C9 S  |- m# z+ @% honUnmounted(() => {
  cancelAnimationFrame(state.rAF)
/ f% }( V, G1 |7 u' ~})
" Y& R+ ?" g* l1 @+ V</script>

8 C" Q6 \! @, o" o7 I/ J1
- ?" S0 `( [9 a0 l/ `% K# h# j7 r2
3
4
) D& C) \0 @# E: C* Q% f/ x+ X7 m  E4 {5
, E  Q% Q: N3 _* P" q% J6
7
; x8 M, g0 H6 _0 F8
. X' U7 l4 Y4 r$ n( r4 y# x. g8 d9
10
0 E* b$ r9 v/ _$ q) h11
* A4 v+ N* w1 R/ r$ a- v3 ~. r12
9 B  ~- R4 S1 X2 }0 `( l5 z* a13
, }. B9 o6 Q1 Y14
% t6 N/ {$ G' J15
5 r' L$ J) O6 l6 [. ?' c16
17
- c7 J  ?- N8 P5 T5 X6 d18
+ J4 q+ g3 U) ^7 [+ Z6 }9 c( f19
20
  w: [0 p' H1 m) ~  l21
4 q: P5 x- L4 A) l) [) k22
23
24
25
' l% g# ^  G9 @+ L; A26
& v) h+ S- J0 b" R, O9 d27
28
29
9 L( _- `# n, O30
31
32
33
. C/ M* {4 Q9 F5 U& m% L9 \3 ]. }34
4 R; b1 R& q) I6 `9 s  O& g35
36
: Z: i: U& }2 E( v, p37
/ E  K5 b- m* P" s) f/ ^5 m38
0 r; o$ h0 M; W39
40
, w: \; ?5 \7 M8 M5 J  Z41
42
43
44
5 a( `" V: y, G$ u; V* i0 [8 _7 p45
46
9 x. [! i0 s1 r& u" t+ O' h47
! }& |+ j6 v, ~1 [) f1 f* q48
49
/ G  j- H1 H/ B+ L50
51
3 Z/ R" z3 ]8 j, U  ?52
53
54
; w" T/ V: X4 k% B: }3 k6 V55
/ z* E/ M9 ~+ y56
57
( W" w$ Z) y% L2 P58
4 v8 K" m$ N) S: z% h59
4 b5 l6 _4 P3 C+ u! @60
7 J0 h2 s8 p: n2 ]" W# }. o61
2 p$ K1 g% M) Q, d62
63
3 i  i" g  D, q4 S8 P( h64
65
66
) \) u3 m! `# o( O) u67
68
69
& u  }3 ?& l5 K2 u- `5 T) ?2 j& O70
& y+ j: h' K6 K+ D. U" K71
5 r! b$ y4 d# _4 y$ w8 y! h& o72
" ?* p" t0 u+ Q0 E6 H3 i6 Q73
74
8 b% o% p3 f2 \0 e6 q* A4 s1 r75
! v  ]& m- a) k4 {3 ]9 m) _9 r76
+ D4 T" J" S2 {77
3 l; E- q" e7 y- T6 n78
79
80
81
0 p4 A- l& z. W7 `* }82
83
84
85
86
' p3 V7 Y7 _6 ^4 R87
3 M, v, D  ~2 u3 `: l/ W# f88
+ ^7 v# ?4 T/ ~7 n. K! W  x89
90
91
92
93
94
95
96
97
98
: S$ D+ f8 i2 {' z! a: w% d2 e6 C99
100
101
102
103
7 U5 K* ?+ t8 X2 }/ Z104
; P! R6 e: ?9 R5 c105
106
  R/ _4 A, A% X107
1 Q) R2 y8 |+ J108
# O+ S; G: u" Z$ }" K1 [" w* L109
3 D8 _( Z7 }$ n/ |' J9 L110
0 m* m, Y  q: B! V: Z111
% d, A) p) z$ M/ e: W; n112
113
0 u( m' G) V) l1 {114
2 C* G) B$ _0 U115
6 i* o, C: L3 L2 Y6 I116
117
3 o, g5 u4 e" K( y  I) i118
2 l' ^2 [+ Q) g$ h) f( c119
' q* r, c7 `& K! C6 `120
121
122
4 O0 X! y6 N: _  K123
124
0 R1 d; ?6 k& b# F% v5 x0 z125
126
( l( `- f$ R- l127
/ n+ I4 o/ }  o6 z& T# F1 `1 c8 |128
129
/ u; Z% g: W/ ?5 s130
131
8 Z  m: k; h% l132
133
/ n, F! o; g; }% M0 `1 @; `" J134
  n$ Y) R3 G- L$ x. X! _135
136
& b. P, B  Z. {$ d2 \137
138
/ s! `- N* ^4 q$ f; s6 h" G1 K139
140
. H  r  k5 r9 _7 b141
142
143
144
8 B1 \6 z% s- o8 a; m6 e- E) r145
146
3 y& J8 q" S. B* I! x147
: R) w  T/ d" ~+ b* e148
149
) A2 f1 l4 j& d/ }. E5 y" ]150
* R/ a+ e( X' y0 r- P151
152
153
$ d& u$ _0 e3 }  [/ u, u! f& y8 H154
. H6 |, W; v' P. i1 S$ C4 T155
" O1 b5 R% l/ D5 K$ p156
157
158
159
160
2 g6 h# R) V/ H$ k& O' @5 x161
162
163
5 R, q4 _, Y. ~! n  v164
165
4 u0 M0 x: v  P5 s+ m+ j" ]166
167
" h& O6 y: [5 I' t6 c9 F& U168
169
170
171
2 v8 `8 f: b. N( f$ Q8 S2 r172
173
174
175
176
177
: _: ~) k$ w0 @178
179
180
: e, I) N: z! _) s. J" j181
$ r8 C0 m% f. z  M182
9 ]5 e8 E6 e# m$ O3 }183
184
+ f8 T4 I: R( E185
186
187
188
189
190
6 q0 ~2 g# ~, w$ n4 v1 ]% i191
# j0 Q" F1 }4 f192
193
! s2 X9 q3 Z: T- Z' K' ?) v5 A% g, e194
$ S7 h6 W3 L% R4 H7 @1 H  }; ?) ~8 |195
; F* N# p4 m7 j( o196
' m  [, s# p" h4 e5 ^197
2 o- L. ~* }' V8 W; R  y, a# _9 E198
199
200
9 U5 S  V1 C- G( \201
  S, X) W" `& r5 _# n202
* I! n: W+ s) a, X+ B; Y% ?: I/ }总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
, E; `  m, t( {. l$ I
( B7 ]3 _% T: k% P' A* ]demo演示
后续的线上demo演示会放在
demo演示
  [! T$ O1 m: f+ A完整代码会放在
个人主页

& Q4 x) T, ^! L4 P1 l希望对vue开发者有所帮助~
! [- R4 p5 u; E: W0 d$ l
/ v+ c7 s! R9 d$ b& Y2 X个人简介：承吾
工作年限：5年前端
5 ^, M8 B% S, x1 l* |9 |地区：上海
* j1 I6 n: l+ D( |个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
. M) w. J! \3 b+ b, X. ^
: d* \; c% j: `' N+ [

7 }+ }. F& o+ S$ P8 V0 r
————————————————
2 m+ l) Q' I/ ^7 L2 g版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
- ^5 ]' z, ]' Y: @原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
. Y- ~: }# u# \