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

杨利霞

vue3 | 数据可视化实现数字滚动特效
4 V6 a' b; W7 ~$ O+ F  s  A
; a2 z- t5 {/ T. S5 |% f+ }1 N9 N7 ^9 I; y前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
; S8 ?" v5 ^- \7 n7 c% \! @  N3 L的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:

- Z0 _3 J! e6 `# I! m" M5 g1 j
8 H5 [2 l3 c$ ^6 X思路
1 F5 ^6 ]+ k7 T5 N# J2 Q' T7 @使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
- U1 l# \8 z0 B$ a% ^# _
- X- c; ]* H- a7 g, Q, x文件目录
( Q( d/ a  F* l8 N3 t0 t" C3 L$ l

使用示例
<CountTo
:start="0" // 从数字多少开始
! P" C* b& w2 U :end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
- e+ o1 Y/ `' x  L/ S& P suffix="rmb" // 后缀符号
& R2 o) E7 s. N. b# y- ? />
1
2
5 j5 U& @" J( F* O3
4
. `7 Y, M  R# I. u( h/ Z$ g5
3 C2 d0 Y- ^+ w  k" ?! ^6
7
8
入口文件index.js
& C: ?4 M2 h. A# b: {
const UILib = {
  install(Vue) {
    Vue.component('CountTo', CountTo)
5 Q( e" Q- u8 r+ R& T. z5 R/ `5 W7 l  }
  Z$ g7 P0 K0 O, Z( q- M* i: c}

, i* k: e* `/ V& B& \4 a$ X6 Zexport default UILib
+ |; D, y' a; Z1 t2 p! E
1
2
3
+ m, m' ~) L9 U" c4 \1 k- _4
+ E1 J% O# [/ j4 i5 S6 m; C% b8 L8 W5
6
) B6 N  |4 p8 T7
) ]: l0 d! Z. c' O5 R. Q8
9
main.js使用
$ p. F3 C$ o: y( v) q, Y. ]9 dimport CountTo from './components/count-to/index';
' b, ]5 Z: A/ Y( i) ~) s: b. p: L5 Eapp.use(CountTo)
: S- j5 X6 {3 @' o/ x1
5 d) l" z: h" b3 y2
requestAnimationFrame.js思路
! j) I2 C6 X: q; K- n& K$ s先判断是不是浏览器还是其他环境
% ]- x9 O. F9 }/ _/ X  _如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
& v, Z7 i/ a, `) |! C; T( R5 q各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
. I. g0 X# _1 Z. V8 }1 R5 c/ dlet prefix;
1 U$ S: N) q/ |: V# rlet requestAnimationFrame;
# x% G# o4 T! k! p8 M0 t$ @let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
7 e7 {( v$ r) [: c1 _& o6 H. e    for (let i = 0; i < prefixes.length; i++) {
! @8 k( j/ K1 F3 g  ~        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
6 V. g5 X# f5 d) W' W
  //不支持使用setTimeout方式替换：模拟60帧的效果
: L7 c% l' n* _$ g  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
0 q$ l1 y# t" f1 Q, Q! p) Y) F: o* g; `    if (!requestAnimationFrame || !cancelAnimationFrame) {
) }! v+ {4 T$ m        requestAnimationFrame = function (callback) {
; A; u5 q" `! {2 }! b9 n            const currTime = new Date().getTime()
! @9 t+ ~5 I1 W; b: K7 w            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
: V% N# u4 `8 V5 G                callback(currTime + timeToCall)
            }, timeToCall)
            lastTime = currTime + timeToCall
$ ?& G: j+ S# l% o( O! v            return id
        }
# I3 Y, O7 Y2 n) d
2 j! l5 l& ?& B5 M/ n* J        cancelAnimationFrame = function (id) {
. R0 o) C1 X& T9 b3 {            window.clearTimeout(id)
        }
    }
, l5 f" z7 j+ J" z& g4 p
1
2
3
7 Z, d4 P, U8 t4 R, @4
9 U( X! D& e* ?  E8 y! W: i8 o2 S5
: [% _; l$ @6 }- S; I- o( O. c6
! ?8 ?: B( P6 k" a7
8
9
- ?0 r; r  U7 L& A$ c7 V% p; v/ X% c10
11
) f( _2 C- S! d8 @( t12
+ S1 Y0 C2 F, i  a6 c13
14
+ q  H% p- A+ o/ p% G15
16
! P4 F" m! u( ~. i0 a2 p17
1 B, o8 \; s# [18
, P( |5 S9 Q- q4 D7 B19
20
21
22
5 |/ @0 E6 H3 p7 N" r" e23
24
1 T( L; G) a2 K- c4 K7 y25
( w3 \% M$ Q. V* L0 S! ~5 V26
4 X# d/ V  p$ Z, C27
28
29
30
31
32
# x% C- K& i& y0 q3 J' Y完整代码：
, |, H3 G. Y& a3 irequestAnimationFrame.js
" `6 B0 W+ f! o; }: ~* S' P
let lastTime = 0
4 M" f' |* l. A2 {7 Sconst prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
' E* a# {8 G& ?+ B" K
* J5 g- K. o* G) M, h' alet requestAnimationFrame
+ e6 V& T6 v7 d, alet cancelAnimationFrame

// 判断是否是服务器环境
! k1 a( {; Z) p) i- Q$ b5 jconst isServer = typeof window === 'undefined'
if (isServer) {
( Y7 O$ z5 ~% v* x9 u, B' z# k    requestAnimationFrame = function () {
        return
    }
# Z1 d; L+ F1 v0 {5 ?    cancelAnimationFrame = function () {
, o! ^- {  G# Q, U) Q0 L4 n        return
    }
} else {
2 R3 I7 W1 A7 B! n$ w    requestAnimationFrame = window.requestAnimationFrame
* `$ B, Z: V8 q& S    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
' W0 n; {: r1 R; {* K    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
6 y5 M$ G3 k# ]9 k        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
  y) s1 Q" R- t! |" p    }

' }5 J  U  ^, J( D    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
# Q) j$ j1 N6 k- t. O% ~( J: N+ m    if (!requestAnimationFrame || !cancelAnimationFrame) {
! S3 p$ m, f* ~, C$ [* g) T, L        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
4 Y( i% b+ Y5 Y! m6 b% f            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
5 A# p5 K* e: T& J9 T            const id = window.setTimeout(() => {
  a4 K7 a8 l% |  F7 J                callback(currTime + timeToCall)
6 A; X6 |( Y) L) o# c: o            }, timeToCall)
- Z9 e( m& \3 q9 w            lastTime = currTime + timeToCall
            return id
1 |) [& B- }1 `* g  X+ \: o" s. \        }

        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
    }
}

export { requestAnimationFrame, cancelAnimationFrame }
/ |- D$ L3 Z) J* z
& X; u/ q' G1 I+ o" u$ o
; N/ x0 `, Z/ {8 ^% ^- p7 ]1
2
: W5 c- V6 a* O, X$ `: |, P5 B' v3
4
5
6
7
8
# V: A0 M( u/ x8 e8 `# b# q+ |6 D9
& V9 `. C- K5 n7 w+ o10
" }6 _; p  i# U- j1 I9 c1 |11
12
13
) X( A. ?+ e+ u/ R14
15
" q; `$ s, K* `! z16
17
18
" b2 w/ A9 u+ V7 d. _6 u6 n  Z19
20
21
5 j. j/ p  d2 n$ b2 r! t22
5 U! ]2 C% Z: j" @+ {23
24
& F# W0 T+ ?! {% Y5 r25
26
. ]7 O+ D7 i2 d5 V5 c! `- r27
" i" M/ W4 q  [2 \- R28
29
30
: z8 L# {( t7 s/ ]31
% |) {+ C& d: T$ v# f32
5 z* O; R) d  @+ J33
1 q5 K* U  j% _8 r( w' d! \. z2 @34
* ~( m8 k' e7 y$ o35
' p/ x+ h* `, X( }: z# W# g36
37
38
39
40
* U6 o1 E8 J% g  ?' N+ c41
42
43
44
45
46
: I9 F8 ^6 F7 P' _- [1 Y7 C9 R+ Y47
6 R7 W) G/ C/ ~% v) S48
3 G) C4 R7 q" l! G( VCountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
9 @! c4 g% N' S& ]: w
# i$ C8 N4 v; W4 l, S& B  s) P引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
: E/ R% P# a6 s, @需要接受的参数：

& X4 S" N. L$ U, a9 [1 C& Uconst props = defineProps({
  Q8 f1 n  p7 ]: N  R  start: {
    type: Number,
5 C6 t# D1 [. x6 F$ M    required: false,
( v% I! Z/ }6 P5 u    default: 0
  },
  end: {
% H8 d/ b' U& C    type: Number,
* ^2 e5 M- X! s    required: false,
# W5 S9 u' G& S    default: 0
  },
  duration: {
/ t7 P* M  b5 Z6 @3 k' j    type: Number,
5 V) p" `' o5 b" ]0 }# X$ d; e, `    required: false,
4 c6 O7 G8 t7 E+ _    default: 5000
1 }  x8 G1 ]  I! p+ {  @  },
! \! |/ F% B2 _% g# B! b3 J  autoPlay: {
    type: Boolean,
    required: false,
    default: true
9 X, f! w7 A' A/ E5 O+ T( O8 S  },
  decimals: {
9 V: [2 ^& }5 D; T1 N+ q% l0 x8 G3 T    type: Number,
    required: false,
    default: 0,
4 e3 ]  W* X& U" q* f    validator (value) {
( S! y- ~( B- b      return value >= 0
    }
' @- [8 k2 P1 \  C/ N  },
  decimal: {
1 f$ }# I$ S  T/ q$ `: I" P    type: String,
% h8 L: p- H* K3 X# W" p    required: false,
3 M, {" U. o9 G/ V2 Y& g    default: '.'
  },
4 q/ ^) R- |  l' d/ Y4 \) l/ G  separator: {
    type: String,
    required: false,
0 a$ K+ s* c7 _- H9 G1 E    default: ','
  },
# `% r+ z1 v2 G: G  D: [/ B  prefix: {
    type: String,
    required: false,
    default: ''
6 s7 m  C1 J# q4 {) Q0 I9 I  },
  suffix: {
    type: String,
    required: false,
& q, c. A, x6 e- ]" @3 D( s- x4 o    default: ''
  },
  useEasing: {
    type: Boolean,
    required: false,
    default: true
7 h) \4 u) C+ F. t0 F% m3 s  },
3 b6 n7 u$ e7 |8 v  O  easingFn: {
    type: Function,
    default(t, b, c, d) {
* R9 U8 J2 K6 _) d; Q0 T0 [% t      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
! p3 j% Y" l1 ^5 x  }
})

0 J8 @! b4 [" H- T9 J3 `
4 }3 m: Y& M- T1
2 i! g' q$ S" y/ R1 p2
3
3 X# i) P$ k. D7 P4
- ~, |9 t$ O, C" {5 n: X5
6
7
8
9
( f1 Y3 ^, r2 j+ t10
$ n( ~$ X* H$ }$ H5 N, B11
- [% i8 p7 e2 f& S- H# u8 _12
/ y; B! D7 {$ }1 f( F8 g' E13
; l# c- M" z# W) F14
15
16
6 S, f. p$ k0 [6 W; n17
18
19
8 n1 {% I* Z: \" h: U20
! a& z3 X- K7 S3 I2 n% H! i21
8 A* Z, c) L8 a+ S+ o& ?2 o2 G) c22
2 ^' y" H% y  ^1 ~7 Y1 m$ ^23
24
6 B* {3 l' T+ c4 B, K) @9 v  n25
26
27
28
& B1 a. q& h) T1 `0 _1 C29
30
( L- l1 K; a9 a* z7 j# [9 F5 a31
32
: n+ ?7 Y: n; y0 l33
- C. n5 Q' G% x8 r/ J$ |34
35
( B: ~1 \. V% ?, m36
% A' l& o' v: [37
% {( J& i* J* X0 f. E+ H/ e. i% k38
& o( \7 I; M! a- l% A! W7 S5 A. l39
4 g. D1 M1 U  a. U+ N- S40
" F* M) y' u* u9 p- m7 q41
42
% r) b8 Y; U& L. H7 H6 ?& |43
44
9 M: u" o( E2 r- ]+ q4 C: G45
46
47
48
49
; v1 ]; ^9 a2 }- N& `# h50
51
52
53
7 l3 L, E/ U5 m54
55
56
57
58
/ m6 z3 h3 t& m4 L9 _! c( v4 D59
60
$ w' k& I+ O% \4 {, q- e  ~# N# c5 X$ G61
0 _2 V3 |- o- r* s( A' x. m! L62
0 \9 U2 E2 m* @- ?- h启动数字动效
# y3 n: L# g6 v! p' k& _% h3 P- I
const startCount = () => {
  state.localStart = props.start
$ E9 P# R4 ^6 J5 `* a  state.startTime = null
' Q; S7 {1 @" _; @  state.localDuration = props.duration
  state.paused = false
; g- _" v5 J& ~2 T  F6 T% o# G# G  state.rAF = requestAnimationFrame(count)
( k) f. D7 }, p9 v}
9 F- \6 X0 y& p7 g' I& E1
2
0 R- H: |% Z) x, f3
, M" t- ?5 b+ t+ _9 l$ L4
5
6
7
7 W& [0 [* b) }: G核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
# A  W! t. M4 F" R9 D+ @$ p  state.timestamp = timestamp
, |4 F) {1 E" r' \  const progress = timestamp - state.startTime
' e9 r6 o$ @% R  state.remaining = state.localDuration - progress
/ h3 H- Z2 c# w; Y5 s+ q# c  // 是否使用速度变化曲线
- N6 d5 f- n4 W  if (props.useEasing) {
& A" u7 h% F* D    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
& ?9 I+ [* \5 ]9 R    } else {
4 A  i4 H" ]3 @2 {$ t6 P0 b7 z1 \      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
0 }3 a9 j0 g& H    }
  } else {
- m8 ?* B1 @% |. J0 \4 O    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
2 F" v7 e( b$ S/ Y. K' d6 o9 `    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
9 F! O1 p/ k6 B' L  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
: r8 G, L0 ^4 e/ w( ]& o    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
# k5 A& W" r# z% U, k' h
  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
# [1 ~6 W6 h9 G9 `5 U# Y  } else {
    emits('callback')
  }
}

8 x3 Y# b" Y+ p1 j$ v
// 格式化数据，返回想要展示的数据格式
% d2 |9 q; P3 W, Nconst formatNumber = (val) => {
  val = val.toFixed(props.default)
' c: J* X( h& a  a0 [" g( |3 ?  val += ''
1 o* H) O. t. I. p  const x = val.split('.')
/ o: ^- s7 t% }! z+ n: S6 R/ \  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)) {
- C, q' w+ O8 e5 p; k8 a0 L      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
9 r& D$ K( x+ s4 r+ K    }
  }
  return props.prefix + x1 + x2 + props.suffix
% M. i0 l" Z& E2 M  H; J. V- }}

1
2
3
4
: l" L& `) z' s5
2 d  W+ f: n$ Y& r3 y3 N5 I% W, C6
4 S& m% I- }" r* W" N+ g: e7
+ z+ K% ^- ~9 e4 L8
9
10
11
12
13
14
15
16
# }1 g; e& D# S+ r8 ^- z  e17
# R7 K3 m6 A0 q" V" H18
, F- I# M+ H! }! ]% g* w0 p. H19
20
, _7 i5 r' X; B. y3 l21
22
) G! R" D. o9 P& p  m$ {23
) Y" R2 [& f! w7 V) [% ]( ]% r24
4 N3 v/ j3 \. Q25
. Y) O6 j- j) U! ~2 n, N26
27
% v# V2 n# M0 y' v' ?6 F/ r28
, q1 d) u/ z0 e& J5 |. w29
30
31
/ n# x, b* z8 Y$ C32
) q0 s3 z" M1 X2 P+ Q/ S) o' y33
34
6 v; ?5 I- _' G8 z# v9 X) W35
36
37
38
$ ?" N; l3 V1 C( n39
  z( V  K/ N) I) W' B% Y) n8 x$ ]40
41
! }$ \1 |2 `0 U42
& X! T* e, y( O7 W! W43
0 o; U. t* z/ b44
8 p* M  d5 h% ]" S6 @) S2 M1 c45
46
47
48
( M8 K6 e" T" i' N" Y( w取消动效

: F, {. o! I4 h// 组件销毁时取消动画
! Y1 _) \0 Y3 Z. H8 ?onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
})
1
2
3
. N# E: t- N. Q- i9 i4
完整代码

<template>
" A# ?2 I: z$ p: l2 z  {{ state.displayValue }}
</template>
3 h3 ?8 B+ C+ l1 e
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
0 N5 K0 w! @1 Rimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
, B, O" F0 O1 C' Iconst props = defineProps({
  start: {
    type: Number,
    required: false,
    default: 0
  },
: f2 r! v1 `2 b8 {  end: {
    type: Number,
    required: false,
    default: 0
+ X$ k' f3 l2 e/ \3 C  },
: ?! j' ^4 Z8 n% n+ x. E$ i  duration: {
9 o. D7 C8 G- R& |    type: Number,
    required: false,
    default: 5000
  },
" b5 o* a' z& U( N/ r- N9 J% u! b  autoPlay: {
    type: Boolean,
    required: false,
) L$ }$ J# ~% v- I' t4 s3 `    default: true
  },
  decimals: {
    type: Number,
    required: false,
( V9 r1 X# G& O; q% r4 Z    default: 0,
, n% M; g  N' Y    validator (value) {
      return value >= 0
0 w$ ]! k3 [$ \5 Z1 h2 I    }
  },
' v2 ^: p( Z9 ?8 l  decimal: {
    type: String,
! R/ S: H. P: H, X5 q1 n. h6 r    required: false,
    default: '.'
9 j9 q" u! i& x; R  },
  separator: {
    type: String,
    required: false,
    default: ','
  },
  prefix: {
; d: f, \- s- z& M# z' d" i    type: String,
    required: false,
  a& s. ?2 L. d% r; C    default: ''
  },
  suffix: {
/ O9 J4 A- V$ D% Z' G8 N! T- L    type: String,
  y& X+ C. f' X' X( ^    required: false,
% U! H$ H7 D# z" n* r! E" k    default: ''
  },
( F" Q! l5 ]/ v% c- K  useEasing: {
    type: Boolean,
5 C/ J2 x7 ^8 n; l) {' E0 J    required: false,
, j: a' S2 o  w& E    default: true
  p! u' x+ Y" f& T. _* m0 H  },
  Z; x) E3 d2 e  easingFn: {
2 V5 u  ]9 ]4 |1 e* ?    type: Function,
    default(t, b, c, d) {
( s/ N8 i9 K& d( N" _/ z      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
2 x. M8 i" a& Y" `% |4 ?+ g2 X' t    }
( ^2 D4 G0 c# {# t  }
})

) W+ o0 Y! h. Zconst isNumber = (val) => {
, D4 Z% y/ x4 b  return !isNaN(parseFloat(val))
}

0 \* [: }7 j1 c% d% t" \. k// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
! E# ~: v6 C5 ]) o  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
& a; F5 Y- Y7 I* ~1 r  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
6 j1 |% K' d! t- C) z, s# E0 A      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
: @% B- N- h4 T1 V, `8 _    }
& O) z+ e: S" b% F# S  }
  return props.prefix + x1 + x2 + props.suffix
}

3 W0 P& q) D6 L( E// 相当于vue2中的data中所定义的变量部分
$ N. F0 c( Y) n2 R9 Wconst state = reactive({
1 p' ]/ c; [; k) O( a* U9 O4 @9 t  localStart: props.start,
  displayValue: formatNumber(props.start),
  printVal: null,
/ p8 W# u+ g) F5 }, z  paused: false,
  localDuration: props.duration,
& L/ ^( G3 t! x2 _7 c0 _  startTime: null,
! Z  b8 T: w% H. w2 s  timestamp: null,
  remaining: null,
  rAF: null
})
3 m% l1 v6 K8 g9 V- \7 E
: y5 o7 H+ [3 h! ?* K0 i( e" d// 定义一个计算属性，当开始数字大于结束数字时返回true
3 @+ Z7 v% n, i/ Q  c6 fconst stopCount = computed(() => {
( _6 f2 {2 w" a5 p4 _1 c' e& D  return props.start > props.end
})
$ A6 n7 V4 C; j0 [  e8 h// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])

const startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
, S- G+ H2 q2 ]1 U9 A- S5 e
: Y9 R5 a; v0 r& F0 X  [watch(() => props.start, () => {
/ s  _6 @/ n6 I. _' Z8 L  if (props.autoPlay) {
    startCount()
  }
})
4 ]/ Z% X+ j7 s, o
$ J( X0 Y& J# }( cwatch(() => props.end, () => {
  if (props.autoPlay) {
    startCount()
" u% x+ J7 r9 m  Q7 g6 D) }9 a  }
- K, \% |0 n+ {5 X# ]})
// dom挂在完成后执行一些操作
onMounted(() => {
9 r7 k' H6 F1 M" Z  if (props.autoPlay) {
* S# [5 M8 |; \- n7 `    startCount()
1 C3 ^) d/ [2 h* l& c! q! X  }
, J% H8 F2 s5 j+ F. ~# ~) w1 ]; \  emits('onMountedcallback')
& y9 c$ v* ^: l( {})
// 暂停计数
- O/ `7 [. l, N. `( yconst pause = () => {
  cancelAnimationFrame(state.rAF)
}
' w* F' m2 |" c3 o8 L0 h  r// 恢复计数
const resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
2 U! T3 j3 B5 I6 Q! e) D  state.localStart = +state.printVal
$ S- D6 z/ v7 Z. r2 m8 \& m  requestAnimationFrame(count)
}
' n6 i9 k  i0 ^. ^' Y
$ c$ Z3 ?( p: h3 |const pauseResume = () => {
4 |; E9 e  j" o3 j" Z6 k7 T- W* {  if (state.paused) {
3 H/ g. }4 M1 H# `. F$ |, c    resume()
    state.paused = false
( z/ U4 P; @- O! S  } else {
    pause()
. ~. K3 _0 }6 M    state.paused = true
  }
}

- o( Y, F' I5 J' ?( W" yconst reset = () => {
$ j2 x/ [6 g( T( @  state.startTime = null
  cancelAnimationFrame(state.rAF)
# e; P: i8 n* ~  G( x* o3 z; ^  state.displayValue = formatNumber(props.start)
}

const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
: _/ X' `% s- ~8 n# h0 o4 P$ T+ ~  const progress = timestamp - state.startTime
  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)
( I' t+ K1 H5 s    } else {
5 V$ x- p3 Q; T7 K) S: W; P      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
$ \; ^- C+ i2 ?8 @8 Y    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
9 T$ P" L" Q; ?4 q2 h) v      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
0 T+ Y) u; u, z* z  }
* t0 I4 \$ G) `" Q: O+ {  if (stopCount.value) {
; L! s7 o/ e. m/ t    state.printVal = state.printVal < props.end ? props.end : state.printVal
, [* B2 b6 }- P& Z6 X) `* F  } else {
" L9 e6 B0 C1 I# B" c% a" z9 [    state.printVal = state.printVal > props.end ? props.end : state.printVal
0 @0 A* K2 b4 _& |  }
# C; M7 q/ {7 u3 Z1 }  D1 i' B$ A
- ?& c0 [* v/ ^  state.displayValue = formatNumber(state.printVal)
+ `! u4 i2 J( f# H, y% T  if (progress < state.localDuration) {
. c, f' v2 |6 s    state.rAF = requestAnimationFrame(count)
  } else {
, x9 ]$ |. x6 s    emits('callback')
8 u3 L! H- j* c% p* g  }
}
  P) k, ]+ k- }" T7 i, d// 组件销毁时取消动画
onUnmounted(() => {
* I. o( o& B2 g) ^' E) P0 h; V$ C9 F  cancelAnimationFrame(state.rAF)
' ]6 g; ?8 l) Q# c$ r})
. ?- R/ u  W& l+ C3 r</script>

1
. l( r/ I4 {  M$ t2
3
+ G9 l1 S9 [8 e6 I# ~9 m+ q# X4 N- P4
5
- x- P$ W! H+ W& x' x% Z, ~6
7
5 S" A+ s: B* k% u  |$ t/ ^8
9
10
11
12
13
! j; X& e$ P4 l( p7 ^14
; |3 g* |' j: U; H9 U15
16
17
18
7 @3 u3 z+ G$ ?+ a* P19
20
21
6 a$ S2 k# _% O/ j0 ~. I& H  ?22
23
24
25
26
5 t+ \% N+ _* B! F27
. ?/ ~2 B4 P; A- Y5 C. F28
29
30
31
. y  X5 ?3 P1 ^7 a32
: n) t$ p% u- b3 ^0 b5 X; W33
' W, h( Z) }( l+ a6 @/ r1 V34
. B9 K4 B) H, a: y/ x35
% _2 I- ^8 L! r7 I36
37
6 R9 e& s% ?" [4 g; T: V38
39
40
$ A& K  g- ?# S' I( ]3 A6 ?- X9 b4 Q41
" }1 j7 Q( g$ L# K# b& \42
43
: v0 o2 V0 S! F" R0 J44
45
3 T7 t( Q; F* M$ y46
; g. t  G- ^0 U. I47
48
3 s: y6 s0 e3 k* M$ L/ b49
50
51
52
53
54
. D; m( v* l' H$ k: ^& `( r55
0 u/ s2 `( t: O& _7 S3 [+ V* Z! u56
57
8 E  x2 `* G+ y# f3 _58
59
60
61
62
1 G1 Z9 f- O. J: r/ a( Q) ^+ W- e63
% p# ]9 F( ?. N( M64
) A9 F4 f/ ?8 ^5 A1 t, t% Q' {9 I65
4 Z: y8 ^# h9 {66
# e- a% x, ?' I( f1 r67
1 J" U2 }( T: M% j/ j2 @$ D& Y68
) ^& Y6 K: Y+ B. M2 C9 u$ `$ p' o1 j% K69
7 M! W8 V# `. A; Q2 ]70
71
72
73
/ F4 p  D; l4 F6 _* Q2 M. v74
75
7 @& O4 A0 x1 B76
77
- v0 X4 Z3 m! Y2 u78
9 e4 x7 Q- g6 O- ?) M. p" [79
2 d7 `8 [. F9 C* i% z5 w80
" w! j1 a. {" j* s81
82
83
/ ~) r, p! I( J3 q: H84
7 H: r/ n! x: e- x: m% K3 _7 S9 j- V# D85
86
87
88
2 H2 h5 e/ C, p89
2 L) s: ^  m2 X6 j7 P  _, X90
; c5 ?6 y; e: a. {1 O5 s" y91
" o7 i+ }! I2 @4 p7 Z% K* R92
) b  r5 j) G8 w+ T7 i% _93
94
95
% C1 V- H6 R. t3 c% I2 |& [96
97
7 z4 \3 p3 M( f% c( L3 \98
99
9 Y' a9 P0 L2 w& b2 G4 x* c100
101
* M, ^( ^/ Z: V( W" |( R102
103
/ n  Z5 O* f7 T% A# e: {104
105
106
% V5 D# k( f5 @1 P8 c" @# o107
108
109
0 J& @) X# o' `( B' e110
' n+ p& `0 R9 n- @( R4 P111
112
$ N; l: S6 L; Q' r1 ~% ]* F113
114
115
# V5 ^! Z7 U$ g3 r+ g; t116
117
118
119
9 d' [. g- X' l5 p% }( I# O120
121
122
123
$ M* r1 M  H# ~: Q# ^5 f124
125
126
127
7 v' ~: I4 a# I) y" @# U% k1 s128
129
130
& @3 D- x, D' ]% B; E! [/ w+ u) M131
; H5 F; \) r' }' u" F8 B132
133
) F1 G. M( C: S* @) e7 o134
135
136
/ K# c; a4 L2 s/ r137
138
139
# j# I# F. d7 O: w1 S1 k140
141
142
143
144
/ f& L+ t1 g) M145
1 o& a5 |5 ]- L  S7 k146
147
7 p1 b# w8 W8 x148
, m3 i6 G. p  g149
% Q& @1 U2 t( _+ J# t# w150
9 T: z* I& T4 n* O/ ~9 ^. m151
5 Z! x1 C) h3 N/ N* a0 K% [152
153
154
6 S5 _( k" G2 m2 `155
156
; m8 L) w. g2 s0 V% y157
. Y! c4 t8 p: b+ A' t' }158
159
8 T; f4 `5 W% e8 X3 M160
5 L1 o8 g. S- s5 x$ R: t7 ^161
162
163
  u; E. d; A% q: G. g# T- }164
( ~+ P/ L: v, T5 ]' s3 _165
! V5 c* }2 ~: |5 ?8 `166
167
168
- J( u2 W$ O3 o1 t4 o" a169
" z+ G( u+ u! e170
171
4 z, T: n! Q) K  j5 T$ {2 P6 y+ c172
173
, Q: K# \2 ]4 y- l6 }174
7 e4 S5 i) p9 t( A$ @175
176
& N, p4 Y7 H& J7 o9 k9 Q# R; D9 w177
% I2 t6 m2 N, o& B, W178
* \/ R1 Y; P* H179
180
181
: U; o! m  M% i. |/ g182
2 P  ]" }- s$ l2 J183
184
185
/ |0 F7 d+ ?! s( l0 F" B1 v' t186
  o+ G) v& G9 b3 o# c8 k/ j0 f187
188
189
' L8 Q3 ~: v7 J9 X190
191
192
193
194
2 ^& P( m1 s8 R8 x' r) g" e195
196
197
# A0 m+ U* f+ T; r/ \198
199
1 \# G% X2 `7 D. \/ x" o0 J200
. J$ r  q# O/ M8 U) B201
; j' |! j( ^# b3 f( }7 F202
8 [! ?$ k* z5 p  \( z4 h( h总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
9 \9 R5 |  M9 r1 v( I/ o+ ~8 U
demo演示
* r' W3 ?9 S9 z1 ]后续的线上demo演示会放在
; }& b, T! Z) M: j& Sdemo演示
3 H9 m" L" K& n. t. n, C完整代码会放在
个人主页
% Z: S8 d$ z( X" E, s- e9 B
希望对vue开发者有所帮助~

0 G; X5 u( R7 b0 ?/ ~个人简介：承吾
工作年限：5年前端
& R+ \' h2 G1 I3 Y# j& f% Q地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
- |% Y( K! t: C, p6 m7 p, g/ P
& b4 ?! n; W1 f6 i% s
9 C$ e! |3 j5 {# N, J/ I
, u9 v5 W- k" V0 o/ _6 P, h
————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
& X: J4 O* d) y& y$ X: ]# Z

- v8 F9 S8 z) ?; E