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

杨利霞

vue3 | 数据可视化实现数字滚动特效
% C0 e7 c; m3 `  b( l1 `
前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
* n0 U7 _' u7 }4 j( I* d" f的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


' T' G" l! W2 O0 e* @思路
- x7 F) e1 M- h* V+ [使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

* v7 P3 V8 I1 W6 T- s- a( X& P. _! ]文件目录

' S4 \# z% r2 Y! Y' e9 E
* {' i0 Y, Y; }. N使用示例
<CountTo
9 _2 u- O) \' W% R2 d* j; U :start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
4 w# `' O' y& I' O9 e" J# p7 @" C :duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
6 }; z( G; ^3 w* z$ A suffix="rmb" // 后缀符号
# J7 K2 X& g& N7 g$ t />
1
. ^* t, F7 `( A4 N2 {2 I2
3
( S$ G/ a0 G4 l1 X+ ^! r4
5
6
7
! t: q- t3 D6 ?4 [( Q; Z. g2 d8
入口文件index.js

const UILib = {
  install(Vue) {
2 i( o, x) b9 e( U7 T& G    Vue.component('CountTo', CountTo)
  }
}
+ c! q" e$ l4 \; D
export default UILib
6 o5 x- `2 \+ ?
1
2
' u8 O! H% D$ I3
4
' u" L. r, L2 K; B. c5
( S8 j! G; J* c7 K; s1 x& Q6
7
" o1 C( H" k+ J$ ]* A8
4 k/ G5 a& r* j  P; b9
main.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
, Y$ j# l! G6 k' w# T$ a1
# k: k/ S! o6 Y2
! A; X& ?1 W. T: XrequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
8 C. q. H( P* X" |let prefix;
let requestAnimationFrame;
) w. z# F6 p" f# C9 d/ Plet cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
+ s" |# u' V' k% j7 E8 h# w        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
! P, G2 c/ F3 I9 J9 P5 f. Q        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
7 U( \4 X' y4 @7 ]$ l2 {) F    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
$ d# k6 D" s" c. ?' K) ?7 _            // 为了使setTimteout的尽可能的接近每秒60帧的效果
) k3 `0 Q# I& W" @1 D1 e            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
7 {0 t; r1 O( J" u                callback(currTime + timeToCall)
6 E6 Y" A$ @4 K! y1 ?2 U            }, timeToCall)
0 Q2 k! {6 @0 P3 U, t# G            lastTime = currTime + timeToCall
            return id
% t2 A) w& t4 r        }

+ @6 @( B7 t% g        cancelAnimationFrame = function (id) {
' K8 @7 v2 N; w4 v7 D' P! o            window.clearTimeout(id)
! @2 y  d  {  v$ I& R1 ~        }
* ^2 G4 N; E6 M" `: k) E    }

1
; }. ]) x! ?4 k; N2
3
; f4 q+ \& X8 Z  J; V0 R6 c8 H4
/ A8 h/ D) D) f" w5
" s; i+ V8 @6 Q* T) n" J3 w& K6
- u& I, q7 t9 a0 N; D% o1 G7
8
, a/ |! Z& \9 y$ O, ~9 l' W% D9
" Q/ c) A% q: y. ?/ P10
11
# B- f; }& B6 x$ m+ I12
13
* Q# X: ?. G/ @# H/ j/ n( o$ u* z! R14
15
1 e" H" h, g; L$ e' w' z$ R4 ~16
& u& S9 i4 i( O: o8 @6 b17
18
19
20
21
22
5 A" |  ~7 T/ G& ~) A; `23
5 h: O5 E& {6 a; G24
. E8 ?' t- r& |7 h' `0 R3 d25
26
27
6 n# D. @9 D/ U* e% {28
29
30
: p1 X/ O3 m  t* C31
32
4 C/ X3 I2 @# A: K' j完整代码：
% A) F  Q: ~  m( arequestAnimationFrame.js

2 B5 ]' n7 `( ~9 N7 Alet lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀

7 {7 K2 v' A# _let requestAnimationFrame
2 u7 S0 R1 E/ @' l" [3 H/ \* U1 Ulet cancelAnimationFrame

9 ]/ ~- i; V0 l' a- u) v// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
; T: M, e, p) C2 t+ Iif (isServer) {
& L+ P# m$ g- A    requestAnimationFrame = function () {
        return
    }
( l0 J! ~2 U1 v  J4 x9 Z5 v  @    cancelAnimationFrame = function () {
# x/ l7 ~2 R" \0 U4 s: y        return
    }
} else {
    requestAnimationFrame = window.requestAnimationFrame
- i$ I. c; Z2 m7 O4 I    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
# h/ k4 N, W! F6 Y9 ]2 e' b    for (let i = 0; i < prefixes.length; i++) {
2 {/ B, a3 Y# h, Z% r        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
& g6 ~' U1 e7 p( r        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
' s% S4 [/ t+ p4 v# r7 l% ?+ E    }

' [7 h$ q# i0 _) |2 |) F1 r( n% I" `    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
( S( @+ D* [+ R    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
8 L6 y" f! F5 x: E- T/ D2 T" _0 [            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
- C8 y$ c7 {" p" i' X8 ]            }, timeToCall)
# T8 I4 ~. p1 Y( \3 V            lastTime = currTime + timeToCall
            return id
+ a7 Y% m2 C& G# m) \        }

        cancelAnimationFrame = function (id) {
! D# ]1 B" k! S1 c9 y; o) o            window.clearTimeout(id)
2 z* f6 x4 D0 w! s- @        }
    }
( Q  K2 K$ r( n4 \}
; r, b5 @9 b6 Q
5 }# y7 ~( j/ m6 G1 j4 R+ N/ W4 K5 Rexport { requestAnimationFrame, cancelAnimationFrame }
% ?& o5 B8 a  c' t: r2 L
3 t/ H9 x# C2 p6 k3 j
1
1 B( b" l% ^! W) ?9 u! a( T# x1 O2
+ i" Z( [! G5 m6 k7 S3
6 X' m9 N& C$ ]! v. v4
* a# a5 s; J4 A5
" F1 \# y4 d0 ]2 c6 e. i6
: Q% U$ a1 b2 N: G5 z# p3 u7
8
6 s* f$ d/ v: ~( y( B& ]6 g/ t9
7 U% ]4 ~- E* B5 t# k$ @10
1 e2 D# [& Z2 X5 p: F11
12
13
14
15
16
17
18
& ~8 J! m9 z4 S: F, x19
20
! R# Q1 Q. r( C3 b! @+ f/ t21
% n! r: o  T2 \7 U* t4 K22
. V7 E7 l2 A1 R: l/ F23
24
25
26
27
; Z! k& ?' q1 k2 `" W0 t. a7 J* q28
6 S. K5 W/ H6 i7 Y29
30
31
+ M. K6 i2 k, ^- g7 @/ Y32
33
34
* P  h+ l$ v' l5 Q6 U35
36
/ r; _( g9 \$ i. V2 D4 F' [: X37
38
39
40
" o2 c' Y7 d* T7 C# }! n3 t41
42
43
44
0 U1 ?, y$ [6 [45
# `/ s4 P2 g! l/ J# R$ T" L46
47
48
CountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
+ C4 g/ D& n& q; M/ ]
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
: c+ R) }) p- h5 m1
4 y) l! p6 J  n/ W5 w: m3 P5 A& d需要接受的参数：

const props = defineProps({
  start: {
    type: Number,
    required: false,
5 |* e5 E2 r3 @( }  @    default: 0
( F& O1 ?3 P' x# J; A0 j8 }  },
) \. V+ t- ~/ l! Q  F8 ^9 i  end: {
    type: Number,
1 b4 K% ^6 d0 K( ^* [- r; j    required: false,
    default: 0
  },
+ |, X* j* [1 e  duration: {
    type: Number,
0 R1 P& U' n( l7 Z/ {, I# S    required: false,
    default: 5000
$ z. o8 \9 @3 ~. J& p  },
  autoPlay: {
    type: Boolean,
    required: false,
    default: true
  e. M- E2 g: D  },
) h6 i* p1 y( s; X  decimals: {
    type: Number,
0 X& G9 [$ M' Q3 g9 _. H: R: F    required: false,
6 M$ }+ h+ N; m: o* y% \    default: 0,
. Q% h* e3 x! [+ J% y    validator (value) {
      return value >= 0
    }
  },
- x& b8 G5 l' a  decimal: {
' ~7 Q# z" O! P3 `    type: String,
( I3 D" J7 Z% m$ h$ m    required: false,
    default: '.'
  },
0 E9 G3 @& U- [* N& K* \( y# ^7 ]  separator: {
- X9 t2 t. `0 w$ s4 y# S9 o    type: String,
& @3 r) `/ ?0 R7 a    required: false,
    default: ','
% J3 K& C) p4 x+ I+ A. \' T  },
' w. f9 L. r3 t) X! h+ v: {8 g  prefix: {
* K, S" Q# s) S+ X: b    type: String,
    required: false,
( C: N0 V( ~! W# u0 ]2 u6 F    default: ''
  },
  suffix: {
* s+ ~, q; Z+ M: Z) L    type: String,
    required: false,
    default: ''
3 z6 L; N1 q& u. N  },
  useEasing: {
( U$ r  @$ M; ?6 m" ^9 G; }9 b    type: Boolean,
    required: false,
    default: true
0 A. ]' `0 {6 H% K' ]  b  },
8 {9 v7 _2 c% _7 r( ]  easingFn: {
( {: x% E) t4 d( k; V7 M. W3 f    type: Function,
  b( f: O" Y7 D5 T; r    default(t, b, c, d) {
# e# D1 k- q. b; U: M$ K      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
( L/ |, S' F( V- O/ M. X  }
* f9 y  x* b3 E" h/ ~+ H2 J})
* t4 T1 O  \% O6 H

- u! ?; r/ {, o" `7 K' i/ i1
2
3
4
5
; z9 C# i0 M4 \$ U8 J: B5 O1 u0 U6
5 |: B, r2 f9 L/ {# P7
8
" d2 [; @7 K& T9
% M: \+ S7 ?7 f1 O4 ]. _10
2 J" ?& W: h; G5 p" q11
12
13
$ h, L) {' H# T; m14
+ y: m: J: S9 n1 p9 \& Q, E15
16
3 c' p' V! t% Z/ K17
18
9 k. s3 C& O# ~" T( c19
$ `1 ?4 u+ Y4 K0 c/ K3 t4 o20
21
22
23
0 f+ ?; x# H+ l9 v6 f; j# {- B24
25
5 ~& L& @/ R) c! ?2 D26
  s* n& c4 {* a. e8 Y+ @; b' Q" m( `27
  e# x' e( j+ j' ^. P28
# w  ]- ?, W/ Y/ |29
+ u6 {; H* {) u! [30
+ t. f  c: D# `5 h2 \. }0 G! f31
' T$ s# c/ L7 J: l0 o6 V0 H' r; E. }8 S32
33
34
35
36
37
38
7 ^. ]4 W. [. i6 h% a3 x- ^39
40
3 e# c* E* |( v) T9 {5 A2 `41
42
& G' G$ k; g$ u4 W4 }43
44
45
: G' N4 Z1 X# {/ u, ^46
47
48
3 U1 Q+ F; t4 x/ E49
% M9 l# k+ v  L. s0 l50
51
52
: `7 k& o5 u& }& _; c53
54
/ q5 e8 z, y1 s55
56
4 h9 u7 t' j1 b( O# P# C57
2 B( s- _+ O: a* c  U" g. H( b58
59
60
61
62
; t+ ~  A" J0 o启动数字动效

, ^- _' b% P- Aconst startCount = () => {
4 E, G/ n' j2 d; k% M- D* _  state.localStart = props.start
7 C6 x' k0 F" ~6 T9 n1 ^9 J$ B  state.startTime = null
  state.localDuration = props.duration
  state.paused = false
7 d2 b  I+ u4 C6 h  state.rAF = requestAnimationFrame(count)
9 K' q; @7 C0 C  t1 p- L}
1 x" q* `; M" L- V5 D1
1 P) y( e$ V: _0 o$ ]& M& y2
3
0 C: m  I. p" f3 r4
5
6
1 F- s1 k- s" n8 S  K7
核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
& e$ }8 _7 k5 ^( K) {* w0 A  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
- r$ b1 x/ k$ z4 x* b  // 是否使用速度变化曲线
8 n) J7 c8 N8 X9 Z) t$ b  if (props.useEasing) {
    if (stopCount.value) {
8 N, k7 G9 U" a& Z2 n      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
9 A4 M' ]5 k  q6 s2 d& G    }
: L6 @3 C8 ?, ^: h* V4 @! e9 i0 E4 R  } else {
    if (stopCount.value) {
) A8 c$ ?# f( W. ~0 d; v+ M      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
6 Q0 L3 J' J7 w' b8 s    }
  }
  if (stopCount.value) {
& m+ Q5 v* o; w3 N! a! l$ v3 X    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
( |# K  f) g  C5 I
$ w. }& _4 B- v( `, u# t  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
, ]  n. `) K) v5 @: d  } else {
    emits('callback')
  }
}

. E* r0 F) s6 C* p
// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
- v8 h( y( j4 L) B2 x  val += ''
% z1 w. y* R5 v5 q0 ]* H* ?% ~  const x = val.split('.')
  let x1 = x[0]
% X% b& g/ P3 Y! i3 V  const x2 = x.length > 1 ? props.decimal + x[1] : ''
( N5 z- s6 w' U& t  const rgx = /(\d+)(\d{3})/
2 ^8 o7 w, }" X/ p0 L& F' _  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
' s# r, v7 g. A: M9 N      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
# t3 A; b" O' O1 i+ O  return props.prefix + x1 + x2 + props.suffix
# r! o4 r0 k6 U6 i8 d}
( ?$ O+ |( H; Y: R
1
: v1 L: y6 q+ c* c0 a2
3
' A% s7 D/ J0 Y4
5
6
# }# y# `/ w4 ?7
8
9
: F" ~% ~* _6 Q9 c  R10
11
12
13
6 b) L  X' q0 p2 E: U4 P# y14
/ d  x4 x1 ]8 q) A8 R15
16
: Y" j+ n8 d4 J% A% T17
8 v. K3 b) A1 ?# k18
19
, W& h8 b0 ~2 F# g7 U20
21
, n6 i" u* R  h- D- |3 V2 Z22
23
; \  F5 M. y3 x24
0 G6 [- ?6 z8 K$ ?25
26
& N% i. K# a8 o! d27
% X0 L* K5 M) ~; \28
29
  X) x1 J' @' ]* B30
31
1 I- B0 n+ y5 A, O1 [& N3 c% D32
: @  m* C# f  J6 p1 q7 v33
/ L! q/ L% I9 Y5 N1 |8 G) L34
8 U8 E( ]% A/ _35
1 V0 M0 X+ |5 `/ j3 ~36
, H5 ~7 c6 [# o. \4 S( ?4 s. o37
38
3 L# u" V; u1 H" J: X  O39
, l! _) ~8 p, ?! ]  K40
; ~) U  [0 U. [. Y- T  c& C41
' e/ R2 Q% |5 W4 m( M( c2 B+ G1 e42
43
44
45
6 i0 T. E  b' M3 q& t46
47
48
取消动效
# z) Z8 k7 j" L1 w; o# O/ O
// 组件销毁时取消动画
4 X9 S6 P3 X, N9 n3 P/ [onUnmounted(() => {
/ K. z, P! \9 L  V5 S* W9 g! B  cancelAnimationFrame(state.rAF)
})
1
4 ^, j+ x0 V9 h, i$ n0 d! e! ^( }: i2 y2
, a4 Q2 B/ D" T, {3 e3 a! Y0 R1 ~3
4
完整代码
; j7 Z' h& R: g  H7 L
8 T$ d6 t3 @( P( ?) c" n<template>
  {{ state.displayValue }}
</template>
5 ]$ T9 F) c+ h4 [  j5 U6 C% g
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
8 M# z7 T5 Q; Q; a* O1 \import { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
  L0 R; R) H7 v4 q// 定义父组件传递的参数
const props = defineProps({
  start: {
    type: Number,
    required: false,
; P  l8 H  q1 D* G( q. [% V3 P    default: 0
: ]5 `, S- L2 z! P  },
, d, _/ ^5 M7 ^  end: {
8 }/ M, J0 ]2 W, ?    type: Number,
, m: C; V9 i8 Q, Q3 p; z4 b0 X    required: false,
" g0 n. f+ _) D# x& w    default: 0
7 b1 o4 ?) ~. m1 B' J+ Z2 @- T5 X  },
$ _: w6 m+ o, ]# j  duration: {
    type: Number,
! m7 Y. S' X2 B& G, [    required: false,
1 p- W1 {, x' {/ k0 R) ]3 F    default: 5000
$ g. o& W# a' M' d' C* S  },
  autoPlay: {
  j1 D! H6 a+ }& Z$ K    type: Boolean,
    required: false,
    default: true
  },
  Y) G1 }8 F6 V' _  decimals: {
8 x5 q' R; p+ e3 r8 C( h    type: Number,
  |7 U5 U! [5 D* a    required: false,
    default: 0,
: D1 F5 I- X6 d0 t* @    validator (value) {
      return value >= 0
    }
' t/ {! a- A7 v+ b# H  N  },
: }/ x2 n3 S* _* u0 }& w  decimal: {
0 y( l1 }5 Q& r  H; Z; x) z$ _    type: String,
0 b6 }- m  ?5 s* W8 F+ ^. m    required: false,
2 ^$ A: F# W& d6 U% Y: w    default: '.'
) e# u) x" f" D; l5 w  },
7 }8 l1 D2 t$ l9 U* M3 L# r' y  separator: {
    type: String,
    required: false,
    default: ','
2 ^3 n  F) V5 z; p! G  },
  prefix: {
# ^0 p0 H, b4 h( f    type: String,
    required: false,
: F0 \# o5 A; l) \    default: ''
  },
8 `+ \; `( B2 e8 @% c! V  suffix: {
    type: String,
- t$ U5 ?5 |% Y1 n    required: false,
( f, O+ x3 ?. c# j. k; A% f    default: ''
: J, x/ U5 Q- H1 g7 C+ ]* Z  },
3 J9 n% }+ a9 V4 U2 M# \( ]' l  useEasing: {
' g' B; T4 W) J) \9 N    type: Boolean,
) C7 Y9 ]# x) A/ P5 o  z    required: false,
    default: true
  },
  easingFn: {
    type: Function,
: E" Y2 }% I( ~( p: ?$ y4 D; F    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
( l7 E$ ~( Q# H# d+ y5 `    }
3 V" ^0 k' B( r6 h  F  }
. r6 m5 Z# {5 g7 V})
5 |0 y8 U* h8 T, w% ~$ \
. q  e! L% g$ f- \const isNumber = (val) => {
  return !isNaN(parseFloat(val))
}
; F# @9 y: q2 C# q2 s3 |( D2 `
// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
# A2 }& h, H" M  val += ''
9 _8 ?# Z. A. X  const x = val.split('.')
7 M3 b$ Y/ }- \; G( h  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
6 K" e0 C2 M5 m, e* l6 G+ T  if (props.separator && !isNumber(props.separator)) {
' X/ M- N0 V: {    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
" g) t  x5 C* p# `8 i; v  }
  return props.prefix + x1 + x2 + props.suffix
2 p+ ?3 \* l8 O- S' V5 N% n; j}
) |% h5 q9 K. g' @# H
// 相当于vue2中的data中所定义的变量部分
& E7 y3 a0 t2 v( e, V% Iconst state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
: }2 X$ C9 {3 N  p3 y' V  printVal: null,
& q3 U! f. j5 o  paused: false,
" \$ T1 D$ M& O# r  localDuration: props.duration,
  startTime: null,
  timestamp: null,
  remaining: null,
  rAF: null
8 {" D% \( n+ q+ v: T})
! {3 `. X! [, t/ i
// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
. e6 i$ ^. b5 G6 X* y})
. b2 Y8 n, \1 C( [9 H// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])
0 Q8 {3 Z3 y0 p' l4 c- ^0 D
4 N% n( V& L5 }+ X2 uconst startCount = () => {
  state.localStart = props.start
2 F# W8 i) T; y) \1 |( [# {3 @  state.startTime = null
  state.localDuration = props.duration
/ z+ t. W' J5 b  state.paused = false
6 {, Y" n% e& F  state.rAF = requestAnimationFrame(count)
}
9 B! c( W/ `% B( |# a2 J" H0 c* s
. W6 T: ~$ a! t0 D* pwatch(() => props.start, () => {
2 A3 l9 R! q7 u" Q6 l, X  if (props.autoPlay) {
! H. u: }5 ~1 z* J3 n    startCount()
3 @; K% ~& T/ U- l( K4 u+ d  }
; D- ~% `# v) |6 a$ U& c% P})

watch(() => props.end, () => {
! O5 T9 q& S6 @; Y9 Q  if (props.autoPlay) {
# j/ T3 m8 z: T0 q; \' e, Y    startCount()
  }
})
// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
' s- s; `5 ?7 l    startCount()
( W1 z' U: {, L5 `" X  }
  emits('onMountedcallback')
' |+ G3 i/ {% c" A; M- x- K})
. W! x: `' z4 t// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
$ g- Q# m* K  {# A1 \( ~}
// 恢复计数
const resume = () => {
  state.startTime = null
' G7 v0 `4 d! u$ Y+ \  state.localDuration = +state.remaining
  state.localStart = +state.printVal
  requestAnimationFrame(count)
}

const pauseResume = () => {
  if (state.paused) {
7 J( \/ y; e9 g, p1 `8 I+ d; a7 \    resume()
; A; D5 g# O5 ]$ Y1 ]/ C+ Q4 y    state.paused = false
  } else {
    pause()
2 x: `: @9 P9 ]4 C) o    state.paused = true
  }
}

+ f. T, W! a+ d* F$ ]const reset = () => {
  state.startTime = null
& f  g' k3 E  ?1 Y- }  cancelAnimationFrame(state.rAF)
; [  c. g' H3 f- g  state.displayValue = formatNumber(props.start)
}

# i* o8 K% p/ c: Sconst count = (timestamp) => {
  B* x! q; Y$ N) z: @. n! P9 x% X& q  if (!state.startTime) state.startTime = timestamp
- g( S8 U: a1 d5 r) ~$ f  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  // 是否使用速度变化曲线
3 [; }) ]) Y* T6 d0 P$ r  if (props.useEasing) {
    if (stopCount.value) {
) |/ o0 f# n9 {8 Z2 e9 C      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
9 f2 u% A$ |9 s4 w5 w    }
  } else {
8 s! h. Y4 F1 @9 C    if (stopCount.value) {
1 y: {( X# j* R      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
. l  t8 i6 a% P  K% y  E2 h9 o/ P    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
. Z; b  Z$ N: T3 q8 t& B    }
- {4 U8 m( [9 d( V# e% |  }
6 Q; J1 X, X& S! Q. D8 T- I$ g  if (stopCount.value) {
; D% b, h, p6 V1 I1 X  i& N2 K    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
* H: J/ p1 @) {2 X3 q5 l5 K) m    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

8 E( {# o7 P! r) f0 i) O9 K" D' d  state.displayValue = formatNumber(state.printVal)
$ G2 a( q! \% I& Z6 B  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
. A  E4 t" N/ ]6 P    emits('callback')
  }
' w- ~! F( H3 z3 T7 d. I}
// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
7 L/ ]( s$ p6 p. j8 J/ S! T})
9 G) B1 g  S! c</script>

1
2
8 O* }) K8 D; S& {* g7 ^3
4
1 \( Z; _' I  Y8 ~5
) O  s$ q( ~6 n1 j, K& f$ w0 b4 s2 L6
7
8
! ?% m% y, h7 h7 z/ h  y9
10
11
/ h& d( \* w! c12
/ ^, d3 I* T! i  G& _7 x13
14
15
16
17
18
  D* d& T  R. o5 g19
20
21
22
23
24
* |4 \6 _% O- \" _6 s  x1 ]( B( t25
/ F% T2 y9 j1 H$ t26
( q4 R( t" H' s6 {# E27
28
29
30
( L+ q6 n# w5 \) Y4 t& H31
9 ~+ h/ K) i0 u$ u- A3 y/ H32
  x5 d9 b" u2 v9 X% d1 ?) J33
34
35
36
37
38
39
40
41
42
43
: G0 J  ^: @; P/ G44
# p# a* a2 x8 S! D45
3 L: l9 y% Y. m. z/ R. B46
47
48
49
8 R2 R2 _; v  Y50
51
52
% {- V: K1 f: F" K1 J6 }# m53
54
2 p. |8 O, j/ ^  D. K9 o55
56
7 b8 o9 _. B  D! }57
58
6 O" E: n1 I* n5 V9 A4 T6 z# _59
60
61
$ L- _( u* ^2 Q% q. K62
63
64
65
66
1 t* Y3 g5 v2 T' j, Q3 e8 W) }67
68
# _# J5 E( k; m# k! w! q( W3 `69
70
% J3 p1 ~# M( I1 k  ^; {71
72
) w0 b" _$ `5 j$ T73
$ |+ S  ~9 U% }" Z) B74
; \( w4 d: r4 A" H  J75
76
77
78
# `+ h" ]* x* E' l$ n79
/ W; r( J+ y' q5 h# P4 n: z80
" ~3 S) _) M: g81
7 v5 t5 V& f: Y& F9 f8 n82
: T' S& _7 F! c- M2 u83
84
; i9 |) v; P  i) ^) }85
6 x( C5 Z: o( z3 F0 i9 D7 D- x86
87
88
+ }) C7 @* S9 ?- d0 |89
90
2 T1 W& S, z; ~4 J9 }6 D5 R91
) e% y$ [8 ]0 E) o9 I4 x92
2 w/ p4 F% y+ x) D; z9 Z9 h93
94
7 I, y+ g& d' K95
" k. r% b" R0 A/ ?) N- S96
97
98
99
4 S$ Y3 u" W8 A4 G# ~2 q9 ~100
3 o0 w3 F1 t: G  ^/ o5 @101
102
103
104
105
106
$ g3 {  w, Y  ~* d6 ^107
5 O) d/ H; O: `- s6 V$ M108
+ D: V% m& u* p" p! T) ^109
: Q% n- h) Z% N! e' K4 d8 S& I110
5 \* B' i1 h: q6 ?111
4 Y9 W' B! {9 y6 b112
+ s; P! l% M# |& P6 F" M# U113
114
  _1 A, Z6 g1 E' `3 x115
% H( c- v& `* Y& o116
117
118
% U" v" [. W- v119
120
121
3 M  G* `4 ?4 u7 l6 H3 h122
2 Z5 f' g/ f4 o" k: {123
: o. _; j" M: F$ C$ @1 `124
125
- {+ _- g, l+ b# g5 `126
/ l2 ]5 W7 i# h6 T127
128
129
7 t% t% R0 q0 ?  i( J. s' u130
131
132
, E* a. h3 q7 A: L. c: ?+ s. {133
8 w. F, Y3 W6 U- X7 L3 F7 n134
3 D  y8 h3 ^+ h, n2 l! O5 f1 H135
136
! p5 o3 K* b% V' \! E2 W0 f+ T  i137
138
139
& V$ a* u/ P9 X1 [; }: x140
: ^, M1 i7 P- k5 D2 h141
142
+ {. s! ^, s$ w9 m( R" l143
144
145
5 F6 R$ F' \6 ~' o& S146
5 S- z- }( f+ x% N7 N1 o147
  `1 r' L0 W# c, d7 ]6 M148
9 J( p, ~+ h2 J" r1 C149
150
151
152
153
8 y# W) P! P1 N; j6 Y4 ]( E0 M- k# K154
155
156
157
/ O; s4 o0 V, i& ~3 \' w$ J( z158
# k7 h8 @' P8 S4 b159
160
, P0 P- w1 S% v3 X161
162
) D/ ^  Z8 N+ N2 p: A* R& r163
4 ?8 y, c9 x2 N: |164
165
! p: G5 s+ D' x- ]2 q9 p166
+ @+ O$ h# P! c% A7 [167
* ]' ]0 P/ c! U* T! ?* }168
169
, [0 G3 N$ a) _170
171
: U! }. a9 r' d* n- Z) E172
( q, `+ r2 E0 I9 t5 H) Q2 A' L0 v173
+ c/ Z, c2 W3 e5 z% X# h174
* O8 A  U0 x1 O- {3 T, S175
" D& h0 c1 |, @" T1 r  F4 E; Y9 \$ U176
* o- g6 E+ O/ x& f% `2 w7 \. K177
) D  k4 g: M' {7 t9 D7 l! C178
) M) C. b% I( ~2 g* \$ {179
9 H4 n6 m/ ?) D4 j; \& A: v180
! C% i/ h) H5 b* x0 t3 |2 h8 B181
0 C2 Q/ B- G( z  m" b0 f182
183
184
185
186
187
188
/ D" }+ R1 D0 r/ Y; ~189
190
+ F6 _4 e2 G6 C! O$ a6 b( x191
192
8 X: W4 s$ R1 P- f: w7 w8 E' T+ B193
194
195
( M7 d5 V/ K/ D0 H196
197
4 D8 b' }" x, x( J% V2 A198
  y& D+ `7 S' ]0 i4 K( ~  m199
5 L+ ^, U, I% f3 O200
0 Y6 d6 Y( N: I) g# O  f, r' N$ u201
  o* b5 o( w# l202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
) ?1 M- \, P/ t  w: ]# \! P: x2 H
6 v# T4 g9 Y0 U. ^. ddemo演示
后续的线上demo演示会放在
+ C: x4 f2 l$ `( qdemo演示
完整代码会放在
个人主页
- {& L/ ]% `! ^, l  I
希望对vue开发者有所帮助~
3 C& q( }6 j, l% g# R- f0 @& a
个人简介：承吾
! R# n4 I! Y+ @% x工作年限：5年前端
地区：上海
* s9 h- U1 Y" N7 \. }个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
; ~# D. `) F, Y& U, D/ W$ [/ R



. X' D# U% t2 @+ k0 [————————————————
/ g! L( U0 `: N版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847


2 K1 J0 ]5 U, T! m& ^