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

杨利霞

vue3 | 数据可视化实现数字滚动特效
4 V/ d! }* e7 Q- b0 F0 W
8 ^% ]' t& l9 G/ t7 O前言
vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


& j( i+ b1 p0 d3 l8 Y( ?思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。
1 ]) S* h, s4 A0 t# v( o, v( V% `+ w
文件目录
' X3 I- n# D5 v$ p+ R+ b5 `

使用示例
<CountTo
:start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
:autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
, W4 e  `8 C, Q4 v; w  m4 W+ Q />
( n( o. C7 o8 n1 K7 u1
2
3
4
5
6
+ a% F2 C4 F: H, ?$ P8 p. P7
+ _$ F$ r% _; U+ N8
& s* G$ @, X1 t: o入口文件index.js

const UILib = {
  install(Vue) {
! N/ ?9 S+ J$ q2 l2 i' t- V7 t    Vue.component('CountTo', CountTo)
  }
5 `: h: B! A5 @; D}
9 s9 D8 o3 V: g4 l9 t$ v! x
; B8 A; v$ x5 w# c# n' Eexport default UILib
) m: z; h- u3 ], X  z/ F
1
2
0 N7 J  }, c+ O& A8 e. f% r$ U7 [3
! P- W$ j, [) S, j* i4
- ?& [) T3 z! Q& u9 z% r5
6
7
) g$ n! A3 D  h3 N) P7 o  x* |0 [8
* q3 D3 h" i: ~) J" `$ ~9
6 ]9 d$ T" g" E; S9 Nmain.js使用
/ ^3 O& H) l. i# s6 Aimport CountTo from './components/count-to/index';
+ i. Z" b1 _2 b) e/ ~app.use(CountTo)
1
! l2 P: r* A0 g0 N2 p) m9 x- L& F4 b2
requestAnimationFrame.js思路
# Q. ?# T3 f& I先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
' m/ C1 N9 d4 U4 ?& S  k% D导出两个方法 requestAnimationFrame, cancelAnimationFrame
/ F" d( M( E; w+ J0 x0 R1 i各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
. L6 ]# e6 e' n# u) O  nlet prefix;
let requestAnimationFrame;
7 Y6 p3 C# T. N+ f+ y. s+ dlet cancelAnimationFrame;
, w/ m7 U  c. y1 H& b" C7 N// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
; G6 [2 k, x0 _) d" |' s        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
: g& P; G, V' L    }
* S! {8 o, M' `4 M4 ~. ~* ]
/ e5 s& P4 ~& x8 s  //不支持使用setTimeout方式替换：模拟60帧的效果
- K- |  U! H% D8 N! b- O! D! A* d  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
" f: b0 n3 ?% K) O* B        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
* j/ J- i5 r. x) c7 ?            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
8 c: {/ c' I, e8 O2 @& ~* c                callback(currTime + timeToCall)
1 U) j6 ?+ q2 t7 c8 ?            }, timeToCall)
            lastTime = currTime + timeToCall
- N( ?% m: P+ z) s% F+ x! Y            return id
        }

% T2 C+ f/ k/ ]2 `, ]. G        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
6 j8 Y, |* a5 k* m: B6 E# }: i    }

: }/ i  |) i* ^3 o* C7 X9 i5 @! \1
2 y- `! V& L/ v& c2 Y1 n2
( f/ e  p, g) G7 R/ T8 `" F3
4
" a! b/ c/ v6 e( Z5
6
7
2 ^0 q6 K* x" o4 \8
9
  _; {- n# |% T% \2 p7 j7 m10
" F/ g7 F) h1 {8 @9 a+ ~; J  N11
: M6 k, Y! ]) l12
13
14
15
) x( P  C' u. H7 f# I# v3 c16
17
18
: r" M9 f0 H" a. E19
20
* `+ o) W; T) @21
22
23
! E$ V0 b# Q. f& ?& g24
6 K2 R" a! x$ B' g0 }3 x9 J25
26
9 O  K6 X0 W+ Y; Q! K0 A27
28
* V9 d3 ~; Y; C/ F7 d5 b8 B5 {8 G29
30
31
" W6 e9 b' A! l' T. L2 Q4 q& J( b32
完整代码：
requestAnimationFrame.js

/ p/ M. O4 N( `5 D% olet lastTime = 0
$ r  g& [3 Z7 s9 ~const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
( `. ^' i( P9 f/ g  Q; e1 c6 e
" N1 f( n8 O, h. M/ }let requestAnimationFrame
, p9 ]% X; w3 \, m+ \4 \# q$ llet cancelAnimationFrame
3 G6 R# M# ?6 p3 ~% e! V" }
// 判断是否是服务器环境
0 q6 d# h7 C" L0 V4 x" a0 kconst isServer = typeof window === 'undefined'
0 @) B& E' m: ?$ m4 X9 K! |if (isServer) {
    requestAnimationFrame = function () {
        return
    }
    cancelAnimationFrame = function () {
        return
, l7 h8 d$ A' g$ n! K    }
} else {
, `; i$ c4 y. t/ n    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
1 ~5 X, A( L$ q) T; s( U  z/ M    let prefix
5 z8 }* \" |/ |7 H5 n  F% m    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
) V' H& v; j" Z; S( E, q1 [7 j    }
5 N  l8 ~( Z: F- A( s9 b6 ~/ q
    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
, w( w% h7 N# ?( X        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
- J0 b0 j  R7 @1 i. @9 _. x            // 为了使setTimteout的尽可能的接近每秒60帧的效果
2 P0 s4 o4 K( [3 o5 E' T            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
& j: M$ w/ [3 r6 P1 I) B. O  a            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
        }

/ q* o  d+ I5 O        cancelAnimationFrame = function (id) {
" d3 g6 s* b5 v. U0 H            window.clearTimeout(id)
# n1 u3 G9 m6 \/ k        }
: X5 F* r# r$ n3 S    }
}
  U# s3 A8 x( m( Z! m& x
export { requestAnimationFrame, cancelAnimationFrame }

7 p4 n1 o* a  S* }+ t0 b: n4 r4 Z
9 U; B* W2 w  |: _1
2
2 K" G9 i! M& W' r6 x6 [* f3
4
6 _  P% T0 B+ l, n& t( A5
1 b* u" V* Y& Y  L9 B$ n( d6
1 [$ Z+ Z( I% r; q- _7
, D: p% H" y" k/ P; I% T8
1 w7 \1 x" ]8 [$ Y9
10
11
12
13
14
15
16
17
18
19
" a$ f* e& y# M9 w20
( y& m3 \1 r7 x+ [21
- {. Q* K# o& W' c# [" m22
2 R/ r& v8 X, ~) R23
1 J$ W9 M  f- F24
25
+ @# \; b4 z& I& b7 l7 g4 [26
3 v+ L& d7 k, @( T+ m1 D27
2 m2 S6 X# ]% }4 p: [28
: L* X( z( @- m- r6 c! }29
+ T- e2 Y' T5 C/ s' J) X7 B30
31
; L) w' k# }' M7 S: W32
33
34
2 T+ H+ J" q8 G) P( g35
& a) j* G' [9 \3 W( x36
: G8 X% i9 X, u% z! }37
38
; o4 T, U9 p: M/ h39
3 u% {. Y3 |$ ]3 h! c40
  @1 {2 R  u' f2 {% {41
42
9 [4 ]7 z) h% h43
& h9 ?* g* Q1 p- W( o6 j4 g44
45
- X2 \8 r% ~" d" u; ?7 K! x# W46
47
48
, y# D( T3 d& ~# X! OCountTo.vue组件思路
5 }' ?! c( d3 s首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
, K/ k/ s  B; O8 R
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
$ C! n0 U1 K, b& L  S# c& |  s需要接受的参数：
; O& D9 u; M& e9 N
const props = defineProps({
  start: {
    type: Number,
6 A2 e, Q7 L' S* w+ z3 J    required: false,
    default: 0
  },
9 M4 i7 y- Q( |7 C  |5 n  end: {
. }2 i, Z# ^8 ]: H6 D    type: Number,
    required: false,
) }) t' U0 t" i/ A0 E# [    default: 0
  },
1 a) H3 J$ j) L4 J+ V4 q  duration: {
" K' B$ ]. f  b6 y! \& W! A    type: Number,
' J! e( O2 m- B! ^9 T( t, L    required: false,
9 y: B/ A; s9 P- w' ?, M    default: 5000
  },
# |3 m; a& V( ?) `( Z  autoPlay: {
    type: Boolean,
9 G5 y, T+ A+ S  e3 @5 _$ A# U    required: false,
! M2 _, |. S+ o, E& B2 ^    default: true
, [% }: ^' M) a0 W' ?7 Y6 U  },
  decimals: {
1 T5 P, \, C' m  D0 }- k+ |    type: Number,
    required: false,
    default: 0,
7 G: Y# E0 h) d7 v# S% _/ g& l9 {    validator (value) {
      return value >= 0
    }
  },
  decimal: {
    type: String,
% k1 Z% p/ S9 N6 O9 I" F2 y    required: false,
    default: '.'
6 W% s6 B& i. Y2 E( E  H5 D  },
  separator: {
" ]' _/ k# o$ D  D" L1 y9 c; v    type: String,
    required: false,
& Z% b. u- `, ~, d! N2 b7 e' T    default: ','
3 Z( o/ r& G( y: V( d  },
  prefix: {
    type: String,
    required: false,
    default: ''
  },
+ i+ N; h  W8 [) y* {( K  suffix: {
$ \; {$ X, m6 ~/ h    type: String,
    required: false,
    default: ''
9 n; Z# z, c$ w: Q' y- ?+ w( R  },
  useEasing: {
    type: Boolean,
, \) R  ~0 g$ n3 k    required: false,
" z5 U# `$ x! Q  d, A    default: true
  },
  easingFn: {
/ d% v) l! f/ F8 i3 ?4 _. s# P5 K    type: Function,
; p5 C2 g. d! J# Z' s5 @& e2 E% [  t    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
3 c* P: M: q& r) `5 i* j    }
  }
9 s0 \/ k: M- F})


0 n1 r; K' E* N$ `0 t# g7 h! X1
. S; E2 u* a! L/ L! q* h% ~2
3
4
5
* e+ u" L1 ]- L$ l+ D" n. p4 V* R6
7
8
* I( M1 c( R/ h4 {1 o9
10
11
12
13
14
, |7 L& Y4 @* ~' o4 U4 Y/ r+ [$ \15
- a4 {7 y# b) F3 A16
17
18
: ~  I5 D, F- O7 D6 g19
3 }0 o. r1 i6 o% c% Z# }20
' ?" \/ _# P8 a; }21
( A: Q" V& i/ o; F! A$ B' m' }22
23
( p7 I$ R1 }+ @6 G% {( i24
; T) V) ]: K; R' B25
7 d2 \- T3 Q! D$ s26
: Y2 U; H1 x  X3 s+ j/ o27
28
29
7 Q# ~% Z4 g* B0 L30
31
32
33
34
35
: c' v* j$ S  R/ |4 m' \36
37
38
& Z) i1 `9 ?* ^' J& g39
40
) M" ?8 i8 q. l6 Q- u& U! a41
: N9 [( N8 P# E/ m. r# R! |42
6 D% @. [9 q3 @; {( m, h1 ~43
44
; ~' H0 k5 Z0 o45
/ z2 y0 M1 N! t9 s" o4 I2 v% @# @46
' _+ ~( U) E5 f& K47
48
49
50
2 z4 ?! ~5 J7 A4 R51
52
% ?6 K/ r: ~' v! R) W2 \( N* r. A53
& e* y" j  p! |6 p4 n7 C54
55
56
57
58
+ r  ^" z: _2 W9 y! L, g) O1 m- H59
60
7 ?! C4 f) P! Z& S! v61
62
! T% h5 P% Q5 j启动数字动效

2 L- B  t5 z4 i- [! K% H; e2 Wconst startCount = () => {
  state.localStart = props.start
; F2 i2 h- I, c5 @1 U  state.startTime = null
5 N% R! E' W1 [. T  state.localDuration = props.duration
  state.paused = false
  state.rAF = requestAnimationFrame(count)
& N8 f6 z, ~  ]: J. K: U) Y2 g8 o}
1
% c" J, d, \5 b4 L5 R) |- a* |/ p2
3
4
* U) L6 y+ n$ w$ X: {/ t# F5
6
( n- C- u" A( K7 Q7
核心函数，对数字进行转动
3 x7 J, d+ S& ]% w7 X5 I) _( y: I
. \) o! T. q* H" |/ l9 Q1 B; X2 T  if (!state.startTime) state.startTime = timestamp
+ v- O% E, X7 Z1 F: @) Q  state.timestamp = timestamp
  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
  w! j7 m+ J1 l: ~, J  // 是否使用速度变化曲线
' M" Q6 V5 S2 @4 J7 C  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
2 ?' E- e5 E0 g+ P2 S* F& B    } else {
! F! I8 F) p- |- N) K. p6 S& o      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
) o" c1 H1 o! E" I1 y' l5 w2 s    }
  } else {
  R. d5 ^2 m" ~8 P- f    if (stopCount.value) {
      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
3 B/ s8 G, H' ~- w      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
8 S) l; N! k0 B    }
  }
9 {! ]$ J  |% d# n+ d  if (stopCount.value) {
% g2 Y& p' r4 Z3 E3 o    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
4 q  l" Y* r8 M9 B$ Y+ z    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
& _! t" C2 ?3 A! X$ h
  state.displayValue = formatNumber(state.printVal)
5 r" l7 B% c, L  U% a7 _; e  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
4 S7 L# R2 G5 b. n/ d3 k" P9 C}
" ]/ C$ x$ u* w$ D+ r% [* C8 b
) V' t6 b8 R, b3 D9 |
// 格式化数据，返回想要展示的数据格式
' T6 `' K6 H& _const formatNumber = (val) => {
  val = val.toFixed(props.default)
( j1 Z& J; y+ x  val += ''
$ i: \2 V8 I1 O  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
8 ^; {4 i) Q& p1 ]2 i& }  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
+ P4 e; ^0 |& E& K    }
  }
  return props.prefix + x1 + x2 + props.suffix
}
! ?5 [) E" D) s  }# K% e4 F9 Q
# V0 {6 d3 o( d  o1
2
9 _" \, n7 J3 \$ V. Z9 r4 n3
4
5
6
7
8
9
, Y, J  ~. I! F2 r$ h6 x& ?# P10
1 c* b5 `, J9 w$ ~2 u4 b/ G* n11
. H* s7 P  M3 {0 ~' i7 ]- T12
0 p* T4 O8 @0 G: F$ ~, L/ x13
14
+ s7 @) N/ [/ W( W15
+ r, Q6 X. y5 W16
17
18
19
20
21
22
& a/ d2 Y6 [+ ^* ~- u23
24
1 z5 K8 R  o2 _2 z! {- Y25
3 `0 w6 r8 U% ^% B' G$ R* t26
! y, r  o  `' }5 }27
28
6 \2 ^; c7 o! ]. a/ O# s' C29
30
; ?7 Q: B6 e" K7 z. ^7 E6 [9 X31
32
33
34
35
  d, Y8 ]* ], c& H36
1 V% a- s- r  w3 ^; s7 U37
38
39
40
+ s! F- b4 Q; j8 ]5 N41
42
2 q! r$ m& s# [' v  ~6 T2 Q43
) I5 u6 n6 G0 x- X0 Q* K% q44
3 ]8 B' f8 V6 O45
46
47
: T( X( z1 W" [0 r9 k4 a: \- Q48
取消动效

2 r. K  t0 m7 U6 ~$ a: h: ?3 G// 组件销毁时取消动画
; i; C  o" H  O6 v4 |5 z+ o  V; MonUnmounted(() => {
6 c( h4 s6 y5 J- K- M! v9 Z9 V4 Q, p  cancelAnimationFrame(state.rAF)
' j6 Q( L; {+ y# t})
1
) r' V/ ]( l! c& W' }8 U- C2
3
4
0 {0 I( b+ [3 w* I; C; o完整代码

# T% x, X9 k- M0 [' `$ ~# h. G<template>
2 J7 Z( v1 H" o  |) X* U' X  {{ state.displayValue }}
</template>

<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
9 z& ]' V! S% R9 F9 Iimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
( d5 X9 j% U( _2 z0 kimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
! S$ U( H( \! }; b4 }6 X// 定义父组件传递的参数
const props = defineProps({
( |2 ?# ^. K- z: _- I3 ~. {  P3 e0 P  start: {
- G  F( f8 i/ i- s7 s4 b; t    type: Number,
( o0 j" r$ C: C3 L3 i& u    required: false,
! k+ x* T" l7 g    default: 0
  },
  end: {
" S, F$ t) B* p! Q    type: Number,
4 n( k# Y+ ~6 |# F3 A    required: false,
$ R5 ^, A1 @' ^& M- t    default: 0
6 f5 `3 Y4 ]6 D! C  },
( f/ I; `7 M% u' t  duration: {
) v7 X$ p% L1 S$ b. e' o& E    type: Number,
- n- C% v' q4 s3 x" T( W    required: false,
8 L. l. V: O( w/ c- s    default: 5000
  },
, {8 j' w" R. j  autoPlay: {
4 |! u# Q# V' n8 Q  |    type: Boolean,
    required: false,
! P! z( [1 @# K4 G4 p3 M    default: true
  },
2 u$ o& c9 S! \; C- y7 |  decimals: {
9 Z: ~3 G0 `- ?7 Z. P0 f    type: Number,
; Y# v. m* `  c* A  {    required: false,
    default: 0,
    validator (value) {
      return value >= 0
    }
  },
  decimal: {
    type: String,
    required: false,
    default: '.'
' E) }+ Q& }# u  },
  separator: {
    type: String,
/ W! M( K; T# ?7 y3 `- q    required: false,
    default: ','
: ~0 I7 ?3 c. o3 c. W# h, Y  },
0 b5 N3 D9 E6 P; E- D  prefix: {
( Y6 s+ ^) \, N" u0 `    type: String,
( i; _! k) _1 t- J/ e1 b6 Y+ G    required: false,
/ Q0 B. @! n1 h, @) X( p) q    default: ''
  },
  suffix: {
( n6 A4 ~; H% T7 ^    type: String,
    required: false,
    default: ''
8 R4 v- v, Z# d  },
7 K+ u" {! y  T$ ]  useEasing: {
    type: Boolean,
3 m2 s' B" t& j    required: false,
    default: true
  },
8 f. e0 r7 L& @3 Y; [  g) z  }  easingFn: {
    type: Function,
    default(t, b, c, d) {
      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
' {/ M0 @$ J2 L8 I3 \! w    }
' }# l, `# s4 q* I7 y  }
# Q/ S( H* w5 Q7 }1 S9 w})
% K+ Q) j% \7 z7 p( d
/ u+ z% U0 P. rconst isNumber = (val) => {
  return !isNaN(parseFloat(val))
1 D; X. z1 P& y4 @}
, V! j9 n0 Q3 p: w) r, ~4 z: F
3 Z" n* z0 H" ]" c// 格式化数据，返回想要展示的数据格式
. a# |) h: `% mconst formatNumber = (val) => {
  val = val.toFixed(props.default)
# U* l6 ?% ~0 \6 e' l! P8 ^  val += ''
  const x = val.split('.')
  let x1 = x[0]
1 S+ D9 E" T+ q0 R% K' Z/ P- t  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
! C# ?1 l7 l+ T3 |* j. t5 b    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
# w. o6 ~" D) M" d/ [1 L4 @* R* B  }
  return props.prefix + x1 + x2 + props.suffix
5 R2 b! q6 J) B8 i2 ?( X) G}
& D" E4 B, f1 i7 D& u- H
// 相当于vue2中的data中所定义的变量部分
const state = reactive({
  localStart: props.start,
  displayValue: formatNumber(props.start),
  printVal: null,
  paused: false,
  localDuration: props.duration,
  startTime: null,
# b, _. D- p3 m. V" }3 q  timestamp: null,
7 K7 T$ k& v; E0 t/ P. h& M  remaining: null,
  rAF: null
})
1 p& t) j; W' Q; h2 F" v& L
// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
) M+ h6 N( [" S, W2 b  return props.start > props.end
})
. Q3 `/ [. V: @/ `// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
8 G# n7 Y1 C! O: Z: Oconst emits = defineEmits(['onMountedcallback', 'callback'])
" A# i2 X& V8 S, n. G* l
const startCount = () => {
  state.localStart = props.start
  w0 `/ }6 D7 x7 m% P* i0 X1 a  state.startTime = null
  state.localDuration = props.duration
3 @& [! F  K  e& q  C  state.paused = false
  state.rAF = requestAnimationFrame(count)
0 |: I2 D: S: l# }& @}

watch(() => props.start, () => {
/ J6 d8 j/ [. l% {: G( J/ v  if (props.autoPlay) {
    startCount()
  }
})
$ Y7 c. {# C) I+ Y( g9 ?2 g5 Y$ P
# A5 l4 H- I$ Z5 X: m0 Iwatch(() => props.end, () => {
  if (props.autoPlay) {
! d4 C+ \8 Z' |+ L5 Q* a% f    startCount()
  }
6 `! p1 Q0 W. h. O9 b+ m, W})
. w& E) g) Z3 ?1 ^0 G4 R- h9 x// dom挂在完成后执行一些操作
onMounted(() => {
  if (props.autoPlay) {
) o7 @7 |4 q( l; P6 i! `5 N    startCount()
& E& W1 E- T# C( m5 h' S4 G  }
  emits('onMountedcallback')
7 t: r9 c/ G  \5 w})
8 g" S9 p  r6 i$ D// 暂停计数
6 t, C/ ^/ M4 A  kconst pause = () => {
  cancelAnimationFrame(state.rAF)
0 @7 e5 k/ \. e* D" S}
// 恢复计数
const resume = () => {
& S. I* X5 w% P" b. X# ]  state.startTime = null
  state.localDuration = +state.remaining
4 Y5 f7 f+ r; ], T% C' u+ A  state.localStart = +state.printVal
6 I; M: O" @7 h# m7 M  requestAnimationFrame(count)
# }5 u- Y- R5 l& V, ~4 M/ U}
9 n+ J5 Y- {1 m  w
; E% w  }2 v& U. ^- m2 b% rconst pauseResume = () => {
  if (state.paused) {
    resume()
5 C/ {; L. D$ L    state.paused = false
# U6 a0 u" F5 I! b2 D) T7 b6 @  } else {
* e1 \5 W; G* r5 n+ e( `    pause()
    state.paused = true
  }
}

7 H0 M5 M: E0 C0 k) K. D3 J8 J. q4 |const reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
; H& {% o8 M" z$ ^( k7 f( X}
$ V: W# h2 E6 c+ Q9 O1 |- r/ C0 L
const count = (timestamp) => {
$ q0 `# K) G+ ~- t# m5 A/ \& y  if (!state.startTime) state.startTime = timestamp
# l5 J- ]' U4 J  x3 C  state.timestamp = timestamp
" r( g! X1 x6 ~  d3 t* B  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)
1 D5 q' Q% d% Z    } else {
% u4 ~$ A% r' `, L' r1 X6 f/ |4 ]      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  f4 c' _7 U! n) [: l6 a+ A9 s- {  } else {
    if (stopCount.value) {
  ], s' ~/ [) y+ l4 g      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
+ D  g7 s0 i) k    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
) z! T: _% }+ I    }
  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
6 u/ t" r! h8 n' }8 q  |) O" @/ y" ?    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
; {4 g5 d; A; T) l7 f
  state.displayValue = formatNumber(state.printVal)
) z0 X$ G' H$ W6 o& \" ]  if (progress < state.localDuration) {
4 V0 M6 D! V/ b6 Y' M    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
" Y0 `" K9 K9 d4 e4 n( b6 a7 X% i  }
}
// 组件销毁时取消动画
onUnmounted(() => {
' H% Q" |5 Y7 @8 j' w  cancelAnimationFrame(state.rAF)
})
</script>

1
$ s( Y9 f' `; x' q% K; U" i2
3
4
5
  Y$ T# N: q9 t* V6 f0 L9 G6
1 Y6 \. Q/ m7 y# ?* o0 z6 L; V& o7
" h) ^" j9 p/ ]& K8
9
10
11
$ V+ z# G$ o7 u+ B. l8 e7 Q: a: c, h$ K12
13
0 {  d0 @- L# P2 }/ A: M6 v14
) [! e$ P" D; ]- r) O15
16
7 Y: j- N( ^' M, t17
  D3 t/ N& J) g7 W, @2 x18
19
1 h2 Q3 x# B" Y20
21
22
9 ^* M  ]0 P, S) m; N5 u$ ^7 a1 T- p23
24
25
' B& m& \( P2 H+ g8 f26
27
28
7 L0 i; s6 r. s, k29
30
31
32
33
# s- G+ b1 G7 q) f! E+ i5 [! K34
* W5 t$ s* w+ C, r9 }# M% o6 b, |35
36
6 P7 w! D; b8 @37
38
39
9 e9 M& P6 g7 f  A+ G7 n5 i/ @40
41
42
43
8 [& u& |3 q2 X: u9 C7 }; i8 A$ w44
45
# h' S0 w( i0 ^  X* l- X3 l46
2 [: C2 q( ^( P47
48
49
50
51
52
! z& y; k- X& p9 r. \; d53
54
# P" i- y1 ^3 Z; H55
56
; B/ x3 \# {+ h' a, N57
58
59
60
61
62
63
. c8 `; G$ k2 y* e( k8 U& J! K  t64
  w3 f& i% t- x" F/ T, ~65
8 y, {$ g' t# b$ i1 u* H9 e66
( V) v( A9 z/ T  H67
68
7 X* @; }0 w  X# a* M2 Q69
. h+ D# r  t8 z/ T& F; \- @70
71
72
# }6 t& A1 G6 p8 E9 k6 x9 r7 T* S* y0 x73
8 j0 q  J. v. u0 j+ B( ^( E74
75
76
77
  G* @0 X1 S. }4 s% I( X- n78
79
80
9 }. L- J$ S* M, [2 J3 F3 }1 H81
82
83
84
( f* u' o0 L3 T9 U. s& z85
86
" x& _% ^( i$ Z1 [9 O0 ~87
88
+ c4 z& u7 H; \89
90
) w6 a* S' N- g) ?91
3 H: _) |% L; b) r; v* A92
* j# D# A7 L; k: J& I93
7 i8 A3 b3 L, B94
. A1 H" A0 D! A$ F! ?95
96
0 R' S6 ~( ]) `$ l% r& j/ {, v- O97
6 d% ?  S2 _3 h0 P98
( f# \- d! I( p1 ~6 K& x99
100
101
102
103
104
105
106
107
6 n( P, p* w3 ?$ A7 X( i108
109
110
111
112
113
, r" S0 ?3 y  ^/ }4 D114
$ s9 j+ n- o# J8 L( R115
116
3 b' C/ \# Y* U" M. v1 t: Z! v117
" |; i) P# }, O8 e+ K) K118
7 n1 I; n1 s8 P" t  v119
, n) k( P( K6 K) }: k# w6 ^- ]- ~( n3 u120
121
122
123
124
' @0 A, ^' K' Z- X- d125
126
3 L  M! K; C$ K8 ]2 W/ L127
128
129
. j: c: z5 ?# h% w! G6 a130
131
  E( B2 B* B, ?$ |3 N132
133
3 h+ V5 Y1 q9 C) R4 \8 c+ p$ a134
5 H5 s1 R# ~1 I0 N' a: d135
136
6 K5 \% E" ], O3 C# V137
138
139
140
! K3 N7 O8 J% a. @; N141
& L3 F4 y: }, |5 x. g. s$ n142
0 E/ R  Q; B% L+ m/ i2 A* K6 D143
144
145
/ t9 y7 P# {! g# L146
8 R; b1 B& v: g; y5 J7 K147
148
2 d, w: R/ O0 o6 P149
6 _; @2 E, X% ?8 G6 I: n150
+ w1 K4 ^/ ~) Y1 a9 D1 ]151
3 p" P- |6 C3 W8 W+ e& D: X5 p4 N152
/ a' L# V& t' U( t153
8 L# e2 u5 S- \& i7 m6 G3 G; w154
155
; D# y9 S( [7 E& H7 u( ]156
0 y# |' {. {# F: k157
158
159
160
7 N4 ^( v9 d9 h$ s# C  K161
162
163
164
8 U/ y0 ]8 R" i; m& y) Y, E165
( Q- C6 A! A8 ^: Y$ L166
167
168
1 e: k1 Y8 B, B: S169
170
171
4 o$ _( J7 J3 b) S- O9 C, {  O. X* p" X" ~172
173
174
175
176
177
178
. E- c- n0 O8 _. D179
180
8 I* T/ e$ j' ~181
% o) s" G$ q, m& A7 }! f3 |8 V182
183
6 t: f% D. a2 w+ M: S# P3 ]- X184
+ e, ~# Z1 U% K' W* V! O185
/ A- L( l7 U/ G5 r; z$ `186
4 I7 A3 h/ g* J187
) d# s+ f* m- T/ ^/ i188
; S& C1 F7 m, R3 t3 [189
3 b$ y- z- h+ G190
191
192
; ~5 @+ z$ ^: b3 X5 G6 A4 u! T4 a193
* e" x5 c4 d8 G$ |" e194
195
, _: r+ I9 ?+ x+ C- n" A196
4 l& D; ~6 Y$ y. A197
7 ^$ P% ~9 A. R+ @198
199
- j" ]; u5 X# c" F6 y200
3 d! h) k* b6 M5 ?8 w, t# D* P3 T! w. v' a201
6 X8 h& @3 o/ ~- H0 c/ X& G. n. A202
1 V9 [- z0 ~* b总结
1 ~2 j6 d; A0 q: G- M自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
8 V, I( X8 n; ~( ^9 u! t
. V: K( {0 m* p; S' Z* [* ldemo演示
( P0 O4 A" M1 F2 _) p! D' E后续的线上demo演示会放在
: ~* B3 Y+ V$ {9 b9 v; _demo演示
8 g* G* @5 c9 s4 Z3 s; s完整代码会放在
个人主页
5 q5 n. F% ]) f1 k! I# @1 ~
) A' H( z5 f( ]. F* D希望对vue开发者有所帮助~
3 ?. I0 D) R1 b5 [! L8 F1 T2 N
个人简介：承吾
工作年限：5年前端
地区：上海
! V* u6 G" H8 A$ L个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
$ z+ }2 O7 g" `/ z
0 `, s& B- }1 o! |$ I
% l/ E# K* c' K7 J
* t5 u' ~. N4 Z6 Z
————————————————
' Z1 H8 R6 }; t: |+ F  ^! L) p' C) T; J版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
6 M+ ~, `7 W6 G3 f8 ]8 P原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847
! e0 p2 n/ v: {# Q
& g2 a2 U+ ^4 Z; K, I