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

杨利霞

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

前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
9 e' n2 p7 d1 W" b1 {: FTypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
% T; o1 R0 o5 W+ m3 e3 \+ E2 A% N
8 Y! L" A* j0 j, S. w) S  T
  |2 t4 ?6 f5 t2 t! b7 k思路
* O! \+ A2 T  N$ L- y( @' r使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
+ u% F, z/ ^1 s: P5 f
文件目录
, M" A7 Z! O. u3 F- y9 X

使用示例
- L. J. U- A3 t' z( Q1 i<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
! o' v" m! A- ^3 K- d. W' p prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
4 B$ n# ^8 z+ i" u! U />
4 t; P# ?% ]; h" k  B1
  b& B& H! Q) o9 I7 \( C2
3
$ V. y, c( t* I( \4 [4
5
0 c8 Z. }) S, L0 K7 R: a: Y3 z$ \6
# O* e" B7 D7 w7
- k1 t( f  y: D$ Y* b) Z8
入口文件index.js

1 P* B+ m0 A, [* A9 v- E4 L% l3 oconst UILib = {
( Y1 i4 y1 }$ r) p  l  install(Vue) {
9 H1 Y2 [+ T( V7 d) Z& r! r    Vue.component('CountTo', CountTo)
1 [4 u; N( y) F/ i' M6 l# N# n  }
}

export default UILib

1
2
4 W0 C* X# V# z: R2 W" V1 S3
4
5
6
$ Z' x) L; K7 y% l  l7
) t1 O' ^5 E; j* j; [) A4 T8
9
main.js使用
import CountTo from './components/count-to/index';
/ X( z6 J; X+ g. f6 J1 g" wapp.use(CountTo)
1
2
) _& @! B& m2 U+ trequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
# [% u/ K# F- Y; |$ S如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
6 f0 ~4 C! S; |8 m增加各个浏览器前缀：  
let prefix;
8 @+ @/ W) d7 I6 D/ j: {7 zlet requestAnimationFrame;
9 m& F0 q0 ?; v: s9 glet cancelAnimationFrame;
! X; \* |3 I( v// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
" P( @5 |0 c0 a% I' O% j# ]7 \    for (let i = 0; i < prefixes.length; i++) {
3 X3 X  Z/ h! ^7 W2 r) Q7 l- A        if (requestAnimationFrame && cancelAnimationFrame) { break }
7 ^- ]% g4 _# t; E$ |9 v6 v" ~" y        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
" ^! Y9 z8 g3 o* A( O4 v* J. d    }
) ], ?% u5 w3 z) c6 x2 x/ R( w+ l
  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
3 q+ y  D. h* `' _+ N" J7 u    if (!requestAnimationFrame || !cancelAnimationFrame) {
5 p4 o- ?6 `, t: f        requestAnimationFrame = function (callback) {
( f" z* c4 P' ~. A/ J% {            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
; j- _$ Z. t3 l% [# k( `9 A# [; f            lastTime = currTime + timeToCall
8 B$ |/ [- l  g7 {/ I& }, c            return id
* C* v, ?) V1 E: i; ]: ^$ H0 z        }

        cancelAnimationFrame = function (id) {
* v# @$ i4 D4 t+ D. f            window.clearTimeout(id)
        }
    }

1
2
. g$ N$ X* M7 c6 i6 g1 I3 O3
/ d! c* z9 K2 g4
5
/ A9 T( r0 s+ x( M' n6
7
8
! I7 y' R) R- B3 a" X9
10
: \: d$ ]* n6 c' z- d# c11
' i: q: D' e; {# A( s12
13
14
2 y" J7 w( @# S: f$ ?" Z, [& ?1 X15
16
1 R( l5 n" H$ V" n5 R# D17
# n+ B; P& }9 D5 x- z18
19
20
; a, _( D' F& B8 v- T21
3 n4 \+ [. F! l9 G- C22
23
24
25
26
: y/ O! }$ i% s6 b9 q7 _0 F, \, @27
28
29
30
31
32
完整代码：
5 |9 X4 r. k+ U- ^0 b3 xrequestAnimationFrame.js
5 q* `) ~0 Y1 u
let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

. q* c$ y8 ~+ ^$ Flet requestAnimationFrame
let cancelAnimationFrame
% ?6 m0 I, I% k0 R
) n* @& h( x$ f( ^// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
3 s9 m2 R. V; v* ~% k1 Xif (isServer) {
3 X$ \  a+ X- }4 l- w2 h    requestAnimationFrame = function () {
        return
, o& e5 Q* P' @* }$ b9 r! n    }
7 y  F7 t( T: _% c# p* S3 L1 w    cancelAnimationFrame = function () {
        return
    }
} else {
+ Q4 j; M9 v8 M" ], B    requestAnimationFrame = window.requestAnimationFrame
! ]2 ?4 _/ ^: W    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
6 J9 d. Y' B0 ~' |6 _        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
+ s, x  U6 p# n  o( _        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
2 c9 i( z  k8 N! e. i. j9 B    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
8 s- L) y/ ~& b9 {; Z& O6 a    if (!requestAnimationFrame || !cancelAnimationFrame) {
/ s* j# ^/ G6 `1 E3 [+ s        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
& U) y! _+ D: f6 V+ E! ^            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
' S7 O- y3 L9 p2 R0 r1 w6 I0 C                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
/ ^7 r4 |1 v/ s. X% j& o8 H$ q        }
/ T0 C( H8 u. e* i0 [0 \3 o* k
7 ^8 d4 o( D' Z; S; w/ }+ U9 w        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
0 z2 N( v& z, b        }
6 k4 g. A$ k4 M7 a# ~% N. h. M# B    }
: P6 T: `+ M' I$ A6 m}

export { requestAnimationFrame, cancelAnimationFrame }


" s; }  A0 D& ^; z  h1
2
3
# I; c" y% T' n# f! `4
# U' x4 s( N" U! k5 ]- n8 K& U5
4 O( E, V3 j6 O4 [/ Z8 I, d6
1 [) @4 h' v6 |9 k! V7
8
# G- k+ x8 O$ C, t! T9
8 J  g, Y: H+ G; G: e; B10
11
12
4 ]6 _2 g7 p8 k  N/ i13
) |' ~# t  s. v9 D5 m5 _# E14
' w, N( b- z( V/ k& M/ N) m15
16
" [/ F6 U. U9 _; R0 F17
: i" X7 W9 O& r5 f! L% S18
- ?# S' X% c- |- @+ [19
! M( x9 O2 c( }1 g- Y20
; q* J, B0 S5 m# U21
22
23
24
3 n$ B9 x$ H9 H( U! g2 ]5 t25
26
27
28
29
2 z  G! A3 N* Y; n6 k30
31
) J# F0 S9 g$ M32
33
34
35
0 u- L+ R" {( G3 M) ^0 c36
. X8 r2 m$ `$ A37
- M6 Z6 K& G+ f( ]38
5 _  N9 d1 I6 w4 O/ v: z6 f3 x39
40
41
42
1 c0 S6 v) {) ], M3 A+ ^43
44
45
0 e" {+ R! M7 V9 k- ]# c/ G& ~# w46
* q8 o# F7 v0 [47
48
5 V, d8 J1 N. wCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
" C' e8 {1 C' D" D0 V需要接受的参数：
0 y1 X2 J# X# Q  W' p
. v+ ?8 V0 }% Z+ u! u3 w3 }const props = defineProps({
  start: {
    type: Number,
    required: false,
    default: 0
  },
  end: {
    type: Number,
2 X, ^6 V% v, Y2 c7 x2 `    required: false,
! Q9 _: ^' @. Z2 x! K& H% z    default: 0
  },
1 L" z" |% C2 j6 }, j- Q0 V  duration: {
: \5 X' k. g) U: L6 V9 w  Z% }- y: U    type: Number,
9 w* H4 j% V- o9 f    required: false,
    default: 5000
5 R' H2 J4 J  h' g6 A) C# {  },
  autoPlay: {
    type: Boolean,
4 {! _+ Q# {' p5 @    required: false,
    default: true
# W1 f4 X( O3 O0 L" \+ b4 e  },
) n# p6 M8 h9 Z3 u) [$ ^5 d) N  decimals: {
    type: Number,
6 m  e9 K+ J* r* _3 x    required: false,
    default: 0,
$ O: u/ J5 H+ N    validator (value) {
      return value >= 0
    }
+ s$ [  L5 y7 L% U  },
, R* {) e7 E4 @2 J! O& R; b4 z$ B: F  decimal: {
    type: String,
    required: false,
    default: '.'
  C8 L9 }* ]8 G6 N  },
  separator: {
- B7 Z+ u" Y+ `6 t. L    type: String,
. X1 o' P+ _: b4 e) r  \    required: false,
$ x* E# L* m" ]+ T, {    default: ','
# u  J; ]* c& j1 O$ Q  },
  prefix: {
    type: String,
    required: false,
    default: ''
  },
4 o5 T3 k) g/ T3 s3 k. g  suffix: {
    type: String,
    required: false,
) W: F. \3 P; W" G    default: ''
& c: U. ]' l! F! X1 Z( W  },
9 p# p$ v1 Y. g9 ^% X& l9 j  useEasing: {
    type: Boolean,
    required: false,
    default: true
% i' I$ U3 a* p# d7 z5 z& z  },
0 u1 }% C# p: H& O( b  easingFn: {
    type: Function,
    default(t, b, c, d) {
" Y9 r2 V; i" a. A3 l* n% P- C      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
0 L1 a7 t, ?0 Q. `8 V6 M6 o    }
  }
) Y! ?% r6 P- A0 y8 M" B3 z})
6 w1 n: R1 G: h, y4 V9 K% B( D" q

* N$ Y; [6 b8 w9 o1
5 t3 [6 v2 v: r, ~3 q4 O5 P! C4 ?' e2
. q* M$ C- T9 J! R" S) t3
6 H: l5 ~2 w" a9 M1 M' x4
5
6
7
8 h  `1 r. o$ P0 C8
- a8 I' G' Z# K" {& {9
10
11
; D! f$ \0 i7 |1 X+ @12
13
- B3 W* K8 j9 h9 V14
15
16
; X& \( `' _5 U8 Q" F# s/ j4 S2 x17
, p) u1 k( n" a$ q9 f18
19
2 n" r+ K. T& ?* R  ~* {20
21
( r! k9 k- r; s$ c& H  ^. u22
23
24
25
26
: c/ `+ J' c+ U, p; h4 m4 i27
5 r4 Y; L' Y6 E7 Z# j+ ~2 x: `1 f- O28
# q3 m9 W) C+ m5 j29
30
31
% E$ g* S2 o1 s6 G7 j32
+ H& k9 C; `/ ]. {+ _1 ?33
34
2 B- `/ g& I3 O* h; f$ q& B0 D35
36
2 N' v/ t! v. |8 G- k5 p37
38
7 t: ~* }1 k- s' z& }9 m% p9 s; ]39
40
( r  Z& m3 ~1 ^0 v3 R41
3 d/ I# Q; x  d0 ?( m42
43
44
45
46
47
' T% x% A7 b! `- l( R  D/ q48
49
50
51
52
7 w' n/ l1 s2 V53
- i4 P6 a9 z! @) R; _8 [! P; t, k54
55
5 q& l+ w4 n# y2 U56
  N. ~% ?/ S: E& j57
" l  t* x! H$ r& e# L58
59
60
4 l! ?8 c6 m  [- ?" b) J* z$ ?61
62
) c, S" m" Z' o& ]: x启动数字动效
. E' O5 F1 F; H9 A
const startCount = () => {
1 @: E0 {$ L- F7 D3 y& s  state.localStart = props.start
: K. K8 K$ L+ |6 w; P% R) x  state.startTime = null
  state.localDuration = props.duration
1 i8 |/ l" z- P; @) t" U  state.paused = false
0 _) [: X5 ]0 ]- g* K# q2 A4 {9 z  state.rAF = requestAnimationFrame(count)
}
1
" r4 F7 b$ j; Q/ [2
3
0 O. k/ p! P: O2 m4
' z- l3 k& x, {8 l, ^5 S' E5
6
+ y) T% D+ e1 u7 O" S# |7
0 U$ A; t/ Q6 f" i核心函数，对数字进行转动
3 y- o1 n6 z3 l8 X  `
, L( Q8 R0 L$ P3 K0 N; L3 U  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
, P& ^) }; @/ [1 D- b( c  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
: p/ o. D- a* {4 r) p% A- Q+ ~8 b) Q  // 是否使用速度变化曲线
0 N- b. |; h$ C( c  J  R  if (props.useEasing) {
9 u! o! L: V9 z    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
" I5 O; m* o! p! K    } 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))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
  if (stopCount.value) {
) _/ P3 \$ o% h8 O/ l" ~    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
$ `4 B" V* ?1 P8 m    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

5 u& F2 k) N$ M  @3 K* I5 B8 j5 f  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
7 T& X( Q5 Q3 F+ t0 Q, b; L    state.rAF = requestAnimationFrame(count)
  } else {
" Z  w1 a# o! l! I0 X    emits('callback')
+ J' t) g* Y: @1 t/ c  }
}
4 y. R5 y8 T2 a, N

; \1 A, j# y2 a5 ?& n, ]" ]// 格式化数据，返回想要展示的数据格式
9 k* n# E5 z! c1 Q& o$ ^5 Nconst formatNumber = (val) => {
8 Y* k" m, E$ Z0 O9 H& Z1 h  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
. s/ M+ z9 P, H5 h: Y3 X  P5 }$ R( Y/ `  const x2 = x.length > 1 ? props.decimal + x[1] : ''
2 T# ?% G7 `) g/ O% R, j# b8 B  const rgx = /(\d+)(\d{3})/
# F% g4 C* m# l' {, p  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
8 e4 u2 O! ^* A4 ?' F      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
! y" h, [4 Y7 i7 s& J    }
3 O  G% s* ~7 g: B/ l  }
  return props.prefix + x1 + x2 + props.suffix
, g/ q" ]: c1 k}

1
2
# q" E6 b4 b9 q' k3
4
5
% ~+ F: r7 c$ C8 ?6
7
3 `+ r8 e3 ~" L7 Y8
5 ]. O$ ], P* V5 S) x9
10
2 `3 p/ m, E6 I+ F$ T& J) {11
12
4 Y7 `- W" {: N13
' R) b1 `/ }1 |* @& s9 l( [5 U& x14
15
16
# V8 i3 o9 N+ s! o/ i; K17
18
, e6 N: O3 i: K/ B2 k: l6 x19
9 g/ O3 U& E+ i9 d20
21
# V2 A4 \2 [+ z7 I; Q22
23
: W4 y3 E. D" H% B, D: Y1 b% L) l24
25
9 w0 l4 D& |# R3 Z& v5 g( H- j0 E3 t26
27
28
* G% R  h- p0 |9 P29
30
4 d% S3 q0 k1 n- G' B, X31
32
33
8 x: W2 Y% E5 B0 C1 ~) |5 v8 M34
& z  |+ U$ I+ X/ H3 ^2 I0 K35
4 N: r0 N9 W$ t: ?6 o36
37
38
39
# w" M1 E1 W6 H+ C& D0 E40
41
7 X$ \7 z) P5 Q9 P# ^! j42
; P& T/ m- d, s7 x+ r43
44
45
46
0 N4 b! X4 T# T9 f  @47
48
取消动效

// 组件销毁时取消动画
onUnmounted(() => {
4 D, G; x8 q' z3 ?; A+ w  cancelAnimationFrame(state.rAF)
})
+ c( S6 o- P4 N: {: N4 I1
; B( R' W; T5 z" O3 W1 l6 E% c2
3
4
3 a' q# H" |4 ~: M$ K2 z" }6 R' x完整代码
7 D$ d- A% I& F; h/ t' C
+ c( ]& ]& F4 {  h8 h<template>
  {{ state.displayValue }}
</template>
- n3 D# q/ V# }2 x5 y1 m
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
const props = defineProps({
, d. M/ s) q* c+ b, r  J  start: {
# p' H3 Q* G  x$ V, p2 ~1 d$ T6 I1 P    type: Number,
* |% B8 M0 c/ _4 S5 D, I! |6 Q    required: false,
    default: 0
  },
  end: {
    type: Number,
1 c: B5 b, |# v+ R  h    required: false,
    default: 0
4 h/ Q. u) [. b' i4 Q& }  },
- J/ g. M1 e) ^& m  duration: {
    type: Number,
' d+ p) V- F; u7 R( `    required: false,
    default: 5000
1 R2 _+ O7 I! U* @9 g0 k* q  },
; ?! M6 g4 ?9 X7 m* a  autoPlay: {
# T0 O3 _! C" W& o* ?    type: Boolean,
    required: false,
, ^$ {* R- i9 H, }1 F( O    default: true
  },
+ P5 [" V9 `; v( l8 S% _  L3 s/ H0 E3 q  decimals: {
6 X0 F! v- M& `  K' i# t$ p    type: Number,
! H0 ~; N  d0 h9 X% u& Q8 U9 |    required: false,
    default: 0,
    validator (value) {
      return value >= 0
    }
  },
  n6 [$ |1 g$ p4 W+ P  decimal: {
! g+ F" _7 i" O, o+ C- \    type: String,
    required: false,
    default: '.'
& u# `" A. n- E& J6 V6 Z  },
  separator: {
; E5 U1 {( E9 Q+ j  W    type: String,
    required: false,
0 n4 a$ L$ q9 C' \- O6 ~    default: ','
  },
  prefix: {
    type: String,
    required: false,
    default: ''
8 B) n+ n* y$ V1 h) i! @7 V- {  },
& n- L* N* t- q3 [1 s; M0 z  suffix: {
7 g, [" S8 N: c$ Z/ a- P+ [    type: String,
    required: false,
    default: ''
  },
  useEasing: {
    type: Boolean,
    required: false,
  s0 o7 A) ?3 Y% u" S    default: true
  },
2 V" }( |6 y* T- m6 n3 O9 i0 }  easingFn: {
. a; E; M. K0 E" a    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
& p% C& c4 B& h( |* [    }
  }
})

3 \! \* t/ @+ w$ \8 u7 X8 jconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
: b' N0 R3 J( ?+ G, G}

, G9 @; w; H9 N2 p$ m9 x8 Y& h+ n// 格式化数据，返回想要展示的数据格式
6 n" X8 T0 g9 T7 _  v/ N3 Yconst formatNumber = (val) => {
( l6 L2 m1 }6 h/ r- Q! i7 G: v  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
; c& ~  K1 k+ Q' V6 h  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
, ?; {6 c  z- T; \    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
% I7 {0 R: X4 b6 M8 @$ h3 G, F  m  K    }
  }
" k/ c( T/ T, _1 ?8 o) g  return props.prefix + x1 + x2 + props.suffix
}
4 \; {% y* z6 Y, |% E, O) l: f
// 相当于vue2中的data中所定义的变量部分
const state = reactive({
' z) c% Q7 p9 U$ O9 L8 b2 _  localStart: props.start,
  displayValue: formatNumber(props.start),
  printVal: null,
% ?- E$ a& R9 N0 [( j  paused: false,
  localDuration: props.duration,
, }& {+ ~8 Y& v7 c1 n" H  startTime: null,
  timestamp: null,
  K) Q8 K3 {5 R- ^6 P  remaining: null,
5 U3 v/ ~9 b+ j8 [& f3 a4 m  rAF: null
% x! X" [  D; g" N. G})
% i: N; j, n. m8 }" L, N+ B4 z
' a8 K: y- O1 B5 Y// 定义一个计算属性，当开始数字大于结束数字时返回true
3 Q) E# f  b  s+ j  Iconst stopCount = computed(() => {
  return props.start > props.end
* N1 \/ @* i& d# H* f  W$ p})
1 g- g* y4 }1 ^! C3 \- T// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])
& G3 x9 c7 t, {
1 Q+ C$ e& _" {# o1 N, H" \const startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
( n. W4 c/ @" O. E+ F1 n  state.paused = false
  state.rAF = requestAnimationFrame(count)
2 C7 t) t. Q) C& Q; R8 l7 Y" s}
+ k5 u3 t$ b- T8 J2 Z' G
# j+ d4 E& l+ d" D4 y& `watch(() => props.start, () => {
$ D: E  ]* l6 `  U% u  if (props.autoPlay) {
7 B5 \, a0 s2 G1 s: D    startCount()
  }
})
8 J5 _* u: K0 \) y
watch(() => props.end, () => {
  if (props.autoPlay) {
' }: [; u  c6 M$ d) \    startCount()
  }
! Q% q- W2 f3 z})
// dom挂在完成后执行一些操作
onMounted(() => {
" |7 u8 t* |+ o$ W! Z+ ]+ K1 k  if (props.autoPlay) {
3 P' [$ d7 H( M/ T. f    startCount()
  }
$ f; _- T$ z1 E: Q1 R0 ?  emits('onMountedcallback')
: h  u- _+ _/ l0 F9 C; V})
// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
}
// 恢复计数
const resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
  ]' I+ a: E5 @' c  state.localStart = +state.printVal
  requestAnimationFrame(count)
1 U( X" D. h6 P4 x}
2 w$ N& z- b% E; t1 e
9 |! b0 \7 x5 Z1 c2 b7 H1 zconst pauseResume = () => {
  if (state.paused) {
    resume()
. ~0 ~6 u/ C- \+ `  F2 I( e    state.paused = false
  } else {
    pause()
    state.paused = true
4 G/ b3 U" W+ v. v9 V" M- Q) I  }
}
8 v% X. U+ r3 U2 B/ d% K3 p
1 x% M  p: z  f, \  Uconst reset = () => {
5 }& W% p+ A8 ]& D' A5 H7 e  state.startTime = null
  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
' {  o& v" }5 N0 }" ^}

3 m& C9 R2 N6 ^6 \const count = (timestamp) => {
) S, H4 ]7 ^! Z" f- P  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
, {0 S5 j# [& }) x  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
( l* l, m6 ~* o1 b5 T      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
7 d+ J! T4 ^6 [: l# M    }
: O/ V) ?+ \; ]  } else {
    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
$ ~" \! o$ Y8 a      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
1 q1 u2 y8 T, C" A; Y9 G. Q  }
$ n! p8 w, q! T  X, L- H  if (stopCount.value) {
0 t5 h/ t& K3 o4 k  {3 V, v    state.printVal = state.printVal < props.end ? props.end : state.printVal
/ E3 x5 L! ~8 l# d' k* @  } else {
8 ?. M4 Y6 `$ O( u( ?8 f4 `5 I5 q    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
$ V9 o9 {; {( ?4 a3 x
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
) ~- x; j3 a* T  }
}
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
</script>

0 M& |5 M* D4 k/ \: S1
2
+ c8 @2 H4 Q- A3
4
5 b4 \3 [- i  X$ r5
. d/ u+ f, a) }) E6 g0 g6
7
/ p5 Y5 _3 d+ h% @8
9
  K+ w& {9 l* l' ~) N10
11
; H8 k2 U6 o* U: V( g' z12
13
; f/ |5 P) t8 B  Q6 x* q, u  a! Q14
$ c0 \2 [9 d! X+ S15
16
17
4 U! z9 ^2 |5 ]5 L2 E0 U18
6 d! T& U8 u: H7 a8 \19
3 Z  P! L6 h+ K20
0 U! t. M/ l5 c3 Y3 E* k/ r21
+ C0 {3 n& ^* q9 U22
7 g9 R; e3 j/ L  M0 i; Y0 t23
- W+ k1 U) d$ |0 d; H' C24
# O. o4 ?7 q/ q  D9 A: @, l' a. C25
26
* j6 D' b6 [) b" s' B8 T: j* b27
28
& l" L+ r3 q! Y4 x29
30
31
0 P7 i& i' d7 f7 C; _32
33
+ t1 d5 R5 [8 A  I34
+ u" N; M( i& n, g& s; W35
36
37
38
. S! i1 M2 X* W, ?( |( T1 @39
40
; L2 g5 ?8 @8 |1 y9 X$ s, W8 a41
& _/ b8 p& x! F7 u! d0 Q42
+ }# a) q$ v1 }8 c# U, `43
5 O. ?& ]& P3 o# \& Q1 p5 z44
45
9 J# n" o; b" ^7 R5 f$ s' h' f46
- X1 ?: W  a6 R( Y. @7 \47
4 E# ]0 q2 ~0 R6 ^  n9 v8 {- Q48
, |- d+ n% p4 E6 G: j4 }# \+ b3 g0 Z. t49
50
+ B# k1 R2 w, K, M; [# L51
6 U/ I7 n+ }' ?2 V52
53
7 r# P7 U; H& Z54
' n$ a" p0 {$ |( h5 I55
56
57
58
59
60
4 i- W+ }* e) e) C+ p: p' k# G61
/ s3 m9 _" S  v; Y7 _, ~9 B62
63
64
4 J. K1 Y  g) u' m& Y5 N65
* I+ n2 M+ k% s$ R$ x66
3 T7 l$ H! T. K9 ~5 o1 i  |67
68
  C7 l5 [: @6 g* t: o69
70
# v" B2 [& k3 [3 k' }. j2 j71
$ {$ ~$ m$ C1 [0 M" g/ D& |72
73
& l) v( i8 G) w3 T1 |74
# {9 b! y) ]/ v75
76
$ o; O, J4 g; A; w) o4 D9 `- H+ b( U77
) Q* v9 J- x1 _. k! @. s78
79
80
2 g/ q% X0 q3 \& |1 \% n4 J* e81
7 e9 A. G% c( m! o2 K+ F2 o+ A82
: A. h, g) B; l8 h& w( b7 r/ p* ?83
( `3 @( o  Y) Q$ b! R5 Q: [84
3 ?4 |8 ^8 |5 }6 q' V85
8 K) o! d: h* D6 g86
5 T" u2 ?3 ]7 {. k5 I; k. O87
88
5 e4 G+ ~0 X' W) z89
90
" I: p0 E. E, A9 o91
. z0 y' Y7 Y. U1 B! N; ^92
93
% ~3 }. [. t; {- U% \+ Z94
95
! w0 |9 d* A6 x9 [; s96
97
98
* [+ u6 b; B" W" Q99
! y: p1 g% S% J. x100
/ ^% `6 c" }0 n: K+ ^101
7 R( ?0 c3 T: @6 A! j1 }6 A102
7 n) V8 n6 |3 H6 b3 \4 s103
; N# w$ A# c1 Z8 G104
1 H' z7 O2 G6 \3 {! x, F) {105
+ Z, w6 G  z' i$ ~106
107
+ K1 [5 T: e7 t" ?/ {7 ]108
109
110
111
112
113
1 x- r( k* x# f" x114
115
116
9 n( A% C5 C: k. \! z117
118
119
120
121
, z: ?+ P4 `; E% ?! @122
' n' a. v! L0 ?123
& \0 R* }( f2 j' W+ ~! J' r! ^124
125
- k/ I5 C+ c, U5 r+ j2 G8 H126
5 P6 d2 ]7 h0 i  e127
* ?' x- A" s0 t128
- a- B* B* \( g# h2 N! ?+ \* R129
130
: e5 R; {3 p; w6 ]8 ~131
( ^/ z0 E  `1 h4 g  X: }132
133
134
135
136
' a$ Y( Q- \- b- N  @  Q137
138
( |! }' X) N* P' ^, S$ M  D139
2 ]  L3 D! d* V% n: H140
141
: V* R* y0 [8 r142
143
144
( [5 U, K- o& d* r& ]145
- j* J6 W! V6 A: q5 v9 ~' }146
  H% ~: ^: V+ P% q2 }9 k8 N8 W- s147
( S' g) C' r  Q  W4 H) e148
: w, i4 [( v/ e" T2 w' I149
( ~" o2 c& s/ d" \, {  G150
4 j, E9 o2 @+ n- ~151
152
153
  U- \" j% X4 @1 h) ?4 {154
155
; d& h2 i4 Q8 N1 m, V& Z- u6 c156
; B* Z6 K0 M" ]9 g157
158
! q( z. P! F; f+ U1 ~3 d9 H* K159
. ]  k9 x7 @1 S. ]' [160
- [$ H7 K- T. O" T* ^3 p% z161
' L) d2 {: ~# `3 ~2 `- s/ }) h162
163
164
165
" M+ w0 m) R8 N0 g  W5 {& h' U! J166
* T* `$ v+ {& Y" V- E167
168
$ x+ |1 E% t# ?" I9 x0 O1 @169
" ^3 C7 w. S. \" w- W" o$ B4 ~170
171
172
0 x% q. P. O! m0 j5 V6 i9 `173
. [" ?9 P4 O3 ?174
175
176
* K/ s. j3 e/ K& V6 j177
178
! T' Q; o5 K* a3 v, ?# M4 l: u; J179
5 e, M; M. `. H# F) Q' m180
2 f, N* `4 M4 u181
182
9 X6 I5 P0 e! U( p183
184
) Z5 x7 M8 [0 z1 O  s0 R185
4 h& j" f( E1 c) z+ w; `  C186
6 }* k9 \/ A) g$ G' U" T187
188
189
" n2 i; z& ?3 \2 M190
191
- e+ z4 i  Q: w7 w3 E192
193
+ |9 x. r) I6 n# z194
6 w8 j# v- u; |7 Y195
: N- ~6 \: Y5 h196
+ q8 k- a, ~$ r; ~197
; x3 @  {% P  p: j2 k( m8 D198
5 k$ _! B7 n1 d' B0 U- A# }199
200
201
202
总结
1 [  h/ ~. a2 k3 Q2 `; ]' F" V% z: E  {自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
6 Q. F: ]6 A, i" q6 u
7 {5 ]; ^& D" Q1 o& ddemo演示
后续的线上demo演示会放在
demo演示
' e1 x6 _# ]9 I  U# a$ I完整代码会放在
/ A% T4 O4 \7 J$ i个人主页
6 G' i9 a) D# F, n
希望对vue开发者有所帮助~

个人简介：承吾
工作年限：5年前端
地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
6 A$ b2 B3 s) H5 G& f


  E% }# `; R5 p7 s2 m6 P! M( C1 a3 N. F
————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
: P' z1 e3 g8 `- n) i# H
+ f" K; S0 s2 z4 D# ]
! X' N) i% X/ Y7 m: `" D