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

杨利霞

vue3 | 数据可视化实现数字滚动特效
9 g: V. z9 r( s# y* K
前言
/ U/ c+ z( Y/ h; [vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
! j$ k: ?7 I0 W; n的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:


+ {% D. ?6 _2 D8 G思路
使用Vue.component定义公共组件，使用window.requestAnimationFrame（首选，次选setTimeout）来循环数字动画，window.cancelAnimationFrame取消数字动画效果，封装一个requestAnimationFrame.js公共文件，CountTo.vue组件，入口导出文件index.js。

3 `% H% F, A: R0 X7 w# S& e: |文件目录


. m! m& H; \1 }1 S6 d使用示例
2 l# M9 T* C( _# L% l<CountTo
:start="0" // 从数字多少开始
$ ]2 n& v* Q3 W% d  { :end="endCount" // 到数字多少结束
! q+ w5 }8 S/ a( S: j/ z# e :autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
4 C/ m0 I+ {/ C4 z) e: A prefix="￥"   // 前缀符号
* D- v% Y7 v  u9 i4 s+ |. T suffix="rmb" // 后缀符号
5 d2 |- f7 u: a# ]& {8 o />
1
2
3
4
5
6
; q( [# s: `( ?5 e8 `/ ^2 x7
/ S1 T# T; m% o; j8
3 e4 B! l5 ^4 {4 u% ?入口文件index.js
6 I1 i0 v/ K; j# |/ Q6 L5 h
const UILib = {
6 u$ i5 ^2 J1 s6 ~7 }  install(Vue) {
    Vue.component('CountTo', CountTo)
  }
}
& O  J' X6 q8 c  N5 I
export default UILib

4 Y; g( Q; \- c3 t- W! q1 f5 N: A1
2
& c9 G, `  S- U) P# i6 p, \3
4
7 S0 ?- y" B6 L/ U8 [; [) p# ?# _5
6 M6 H" A. L# E6
7
2 E% c7 E# t6 P$ Q8
9
0 G4 Z- t, p, F$ S2 _main.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
( I! @) u2 {: _9 `1
2
requestAnimationFrame.js思路
; H- R" M! s, s先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
, x7 Y5 B+ O) d9 j* {) x4 Y如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
导出两个方法 requestAnimationFrame, cancelAnimationFrame
各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
增加各个浏览器前缀：  
let prefix;
! W! i8 H' t& ^1 ]( Z6 @$ jlet requestAnimationFrame;
let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
        if (requestAnimationFrame && cancelAnimationFrame) { break }
; D: _5 P# Q6 A5 k; O* U        prefix = prefixes
" {+ |* m. N9 V: E        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
' R* ~5 [9 D( N* a2 t- t        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
# q3 d$ R  J$ H5 H. l- @& \: f    }
. I' X/ W& U# m. q" {
, j( h' |# L, L7 B  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
) R0 o3 A% e4 n  l$ o- @            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
6 v, u2 v: q2 {/ a( ?# D            }, timeToCall)
            lastTime = currTime + timeToCall
            return id
% A  L$ v9 ]& p        }

! f0 G- M" z- V& x" N        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
' c+ e# |$ d* n. e    }
3 {* J) W9 l' b: K1 ]4 [
8 H( Q5 D7 S/ t9 d, X& f5 ~/ m: K; \1
. ~5 y$ k, i1 v, _$ E2
3
: _$ m9 y- @5 Z3 f# e0 F/ M0 T4
5 h+ F! c1 ]" w7 m; n) L5
6
; c  `0 J# {* h) q$ t7 W7
9 F, j7 n- v& ?; J0 y2 j# J" [  L8
4 ]; E; U1 @. v# D7 l9
5 D! z% n* }1 u2 F- ?" B+ F+ x10
; A& F6 S$ O  i8 `, [  d% R7 K/ I11
" B% X( ^' Q: k% z" Y+ K12
: L9 K3 x2 Y$ R3 e: t13
14
15
16
17
0 j+ U  F- T& P( |2 {18
( [* k6 o# V; `1 `& j4 X8 o19
! `# F) O7 \( p8 n2 F! e/ s8 X. H; Y20
$ ?8 O# _( ]/ M2 J+ O3 W2 H21
22
6 ^% }1 S, Y6 Q23
- i. y( m& Y3 K! f24
25
26
27
- X# l- v# m5 K5 C6 y. J* v28
9 j" E1 @: |# s; g" m4 h29
' `, t  d( y, Q! w/ I30
31
32
完整代码：
- C7 g1 X& z" e" T- G4 O5 v7 IrequestAnimationFrame.js
. Q4 T9 ^6 h* A& J+ U  q0 _# {
let lastTime = 0
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
9 }( T' p! P6 s" H' C8 d7 W
let requestAnimationFrame
8 S+ ?0 k( Z* Y: s& u( v. s; c# }, k- Rlet cancelAnimationFrame

// 判断是否是服务器环境
const isServer = typeof window === 'undefined'
if (isServer) {
# [  W7 L2 ~: P7 _; C- G    requestAnimationFrame = function () {
" x  t4 ?- t4 S6 T- F9 O) S# U        return
2 j! O; J" i+ R$ U) q    }
    cancelAnimationFrame = function () {
        return
    }
} else {
    requestAnimationFrame = window.requestAnimationFrame
    cancelAnimationFrame = window.cancelAnimationFrame
    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
  o* q! v, I0 n( f        if (requestAnimationFrame && cancelAnimationFrame) { break }
* f) P0 S9 ~$ J  w        prefix = prefixes
' w" d" c$ T, o" }        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }

    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
    if (!requestAnimationFrame || !cancelAnimationFrame) {
3 P. m1 }+ S, n5 l7 Q2 s) R5 X" t9 M        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
* a, K" j7 f9 k( |! Y9 o            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
0 y) }9 S: S( W3 v            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
, N9 `" m& j% q7 i, k6 i) I  Q            }, timeToCall)
            lastTime = currTime + timeToCall
0 X/ v9 ~* {9 H# Y            return id
6 W+ N- p6 a$ Q- ]( L        }
4 o4 }* p# q7 m$ v" z8 B: \/ J7 W+ t
( X9 x) F# ]3 Y4 l        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
    }
}

export { requestAnimationFrame, cancelAnimationFrame }
5 V# F1 \- R, \/ l; H/ V

1
2
3
  b8 k/ `. V- S, m" {1 q& }0 }4
  W' x( u6 {: Y* z2 k5
' e8 N# i# y+ R6
4 {6 E0 m" z  A$ C+ {6 ?* a7
. e5 h) D" I. O- x6 p; M- j# ~1 V8
9
- J+ f6 n& Y' z; F; S6 G0 E10
11
12
. d) u7 k4 w, c& \7 G* H13
$ a$ \& _, h( d6 S$ |* L: D14
7 F* e: o" @0 }2 N5 P8 O15
16
0 e, Y* E/ m8 B$ Z; g17
18
19
- g1 I+ V& g) L' v4 h3 R20
21
% I1 E  u; R' p+ G# B' F& X22
23
24
/ t* S3 v5 U4 z* }  X7 y25
26
27
28
29
30
31
8 Y, Q7 v& g1 I$ A! i32
33
; b9 g& U1 x7 L9 [" Q' J+ P# m( z5 `34
0 ^3 B& E) J! P- G/ e0 H0 e' H35
: k  v% I( \  Y9 K: Q$ u36
37
38
4 P% m! ?) r5 l7 g39
40
2 @9 U# m. T' m: Y; Y# Z; x) T41
42
43
( e# E" o' k: e8 c44
# S# d* m  e+ c7 W45
46
' n1 P$ r5 t, z4 q6 v, a47
48
4 [9 \' z/ K9 `3 D$ A1 D! ECountTo.vue组件思路
首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
  w3 E) n( a0 m1 R需要接受的参数：
& P& }" H- e' N1 O2 ?* L
const props = defineProps({
  start: {
6 r2 M4 `$ i' |5 [    type: Number,
7 D1 w  p) ?5 ^: j$ t2 y    required: false,
    default: 0
  },
' Z. a5 l2 F7 G* f0 }% o3 n. ]. x  i6 i: e  end: {
    type: Number,
+ X% i# A8 F7 j! B7 C* r6 ]) M    required: false,
3 f6 D- ]- D& a: f' f3 ^    default: 0
* q' |. n$ k/ n% A  },
$ J2 u* T/ R9 A5 E$ T2 Y' f  duration: {
    type: Number,
    required: false,
- D- d! R  a: m' B$ o* z    default: 5000
/ d$ s* Y* o7 W/ t% X7 X  },
  autoPlay: {
    type: Boolean,
7 c0 d& w# P* W9 @2 z    required: false,
    default: true
  [4 w/ q8 I6 _/ s5 U8 S  },
7 {* G: M4 n# ?! j0 C5 f9 ?3 \  decimals: {
: p5 Y0 c6 v! G  x    type: Number,
% H2 Z  o% ]1 P; U; A0 y    required: false,
    default: 0,
$ d  @, c1 P3 B& q4 ?    validator (value) {
      return value >= 0
    }
  },
& r" u5 O% \6 ?, D3 ~: S' `4 D4 f: |  decimal: {
6 A* u$ V3 x% a% n    type: String,
    required: false,
8 i) h9 R4 T+ c* Y    default: '.'
  },
3 T) ]" W7 K1 z' Q6 q6 q  separator: {
    type: String,
' ?/ ?- K" Y! d* |    required: false,
5 Q1 ^3 `) `, j3 P, M) F    default: ','
  },
  prefix: {
    type: String,
    required: false,
    default: ''
  },
  suffix: {
% x* _- Y0 D5 C& Z/ f$ c    type: String,
    required: false,
4 m( k: q: a+ ^0 c: {    default: ''
  },
5 ^1 M: ?- F# T3 ?! }# m6 C  useEasing: {
    type: Boolean,
    required: false,
, }$ n$ e4 ~0 U6 m    default: true
% {" V+ M  o6 u) P4 Z  },
; }' t5 ^; g( x+ ?2 N: \0 w* A  easingFn: {
    type: Function,
    default(t, b, c, d) {
7 |' A3 W+ a: b6 T      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
/ C+ p7 p  V. ]- O) p4 j- N8 ]})

, u- d1 t( `8 a, {- A0 u0 b
1
2
7 H! f6 ]" q. H. `3
, x* }" J/ @2 h0 z( l4
5
6
( b% W  _0 d5 i2 e7
( {. v/ x& A. T  e8
$ c; ^3 @; w, F+ ^! b9 H3 J  @6 t9
% u. o8 D# R* t' t: F10
  J8 m* |5 H: |' ^: J, p, `' K11
12
7 u' ], y) _1 A( [13
0 K* U/ [1 t$ s. B. K6 ]14
15
9 u# g5 A6 N; b' X' M& V: `3 ^16
2 e  D3 b$ ?5 G17
18
! ?4 x- o" P! K' O: [1 k0 H3 T* N3 Z" B19
20
21
22
23
24
25
26
* z! K' o' |. ~0 W5 X; S! Z; K27
: }0 U$ D. V; S! b6 Y$ q: P, k! \! m28
29
. E. _8 A; k: ^& B! t" C30
31
32
33
34
35
36
0 ~' M8 U; E% ~* m6 o% b+ l$ d37
38
39
40
41
42
43
44
$ k- A$ I5 j" h% x45
46
/ h5 ]" A4 k5 T+ l47
' z8 A5 s; h) R1 o- d48
# g% f) d# c$ k7 G6 w49
  K+ p+ N: P  E! s2 \+ U3 k50
6 E8 M# N' T2 I5 S4 S0 V51
* n, P) \* z2 s/ M: t52
* Z6 a. Z9 r$ T% J& k  D( A53
54
1 j! y9 f7 f+ g# ]55
' i0 \) V, N' g, w56
$ H% w0 s8 l' l' t( c57
1 H% k. ?: ^/ Z. {0 I58
( K! x4 D7 n0 I59
60
61
9 S  J, L- B& @6 D8 a62
/ u% I# w; e3 w启动数字动效

$ v, M7 H1 A2 m* v0 K( Cconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
+ i$ f: E8 A" ^$ d, G) H. z  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
1
2
3
4
5
: R4 w$ p; y$ G! O! G6
7
核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
6 [* V6 l4 [9 J( O& {) K$ q  state.timestamp = timestamp
  const progress = timestamp - state.startTime
: N. e7 x# S/ x+ V, ~5 |0 ~( q. v  state.remaining = state.localDuration - progress
  B4 z" U: l% i6 T6 O( p  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
7 @+ P* w; b1 I& r      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)
( G9 z1 A( e8 D6 m    }
  } else {
, G( F  v% V, t( c3 g    if (stopCount.value) {
" m/ i0 k/ O4 G9 y2 E      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
  d/ p& q1 A$ C$ {, I, b    } else {
% V, J2 W2 z2 a      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
1 R. C* ~% H3 A" N- u    }
* @+ X5 I# u1 U. G. V$ [1 @  K  }
  if (stopCount.value) {
& a7 ?" f- T5 G; W& o    state.printVal = state.printVal < props.end ? props.end : state.printVal
+ f0 e- C) B, [7 }; d7 e  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }
, ?) e" D% h6 @5 m
6 C" [6 f  a! T, X7 E, u) C3 b: w. ]  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
& i7 t$ v' v; d9 q5 q5 ?  ^. t    emits('callback')
$ U) {1 h7 z) X) L! x2 E& p- B  }
}


// 格式化数据，返回想要展示的数据格式
2 M. D( }6 j$ O* b: x4 aconst formatNumber = (val) => {
4 T8 w0 M& B- Y7 Q  x  val = val.toFixed(props.default)
& N+ L1 B6 X+ u7 n( F5 R4 k  val += ''
  const x = val.split('.')
  let x1 = x[0]
  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
7 q4 y4 H' m+ \/ E( z    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
! c! h) C; V8 U1 ^  return props.prefix + x1 + x2 + props.suffix
}

% R% n2 N- G' `" g$ V6 c- n1
2
7 I- |1 e8 [4 P0 j3
2 N1 Z+ x. M  q! J0 m, k4
5 ]" c/ W$ {. f5
6
7
8
9
: f) W; G! m! l$ r10
9 A7 F' {7 |4 a# y4 H: K! L11
8 N5 l7 k6 U" c& {12
9 i, K) B% y# h* L  F; a) f% t7 _5 q$ H13
14
, [9 Z: b$ c: H0 k, w4 A15
16
4 X2 R8 i7 W" I0 z17
: `1 }" q3 A! @/ ]1 G  d8 _  w18
19
/ c4 s8 m% o$ @. @20
21
5 D, Y7 I7 B8 |22
2 O8 c8 a$ I. |3 X, Q23
+ f! P* d6 J6 J1 D$ G24
" e( s1 I- L' j. ]4 A2 b8 B& D( j25
26
$ f2 J  \6 `/ Z) X9 F: q27
" Q! X4 V/ I  w1 U# \& K( C: j28
29
30
$ a( {. `0 X9 @$ Q; O( K# H31
3 D/ [+ V6 B6 S" w7 ]- L" k# ?32
1 Z9 [3 Q  g0 H- h- a# j1 [6 q33
34
! c4 X' M, s7 w* I35
36
37
38
39
! d  [4 `2 y! @! W2 l! h40
! l( v( n7 _+ c3 a6 I41
% }  h3 j; i, w4 Y42
43
* l4 U6 V3 @+ i2 l; A: g/ l$ s# U44
45
, _; D2 C- M) ~- M6 n46
0 J/ E8 Z, F, b- w5 n! s9 R47
48
取消动效

// 组件销毁时取消动画
" [; i+ G/ z4 GonUnmounted(() => {
( a1 @* ^3 ~6 F4 v" s2 J2 g  cancelAnimationFrame(state.rAF)
})
1
+ `8 e7 g. a" r; F; q6 z' K2
3
' o! b- x, X. I+ h. U$ T4
5 j/ j0 k3 U% V完整代码

; g( h$ w0 }; L9 K<template>
  {{ state.displayValue }}
</template>
+ A! P* r3 V% {: H0 T2 K2 v
9 f/ `, @1 Z' }1 b  W<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
0 ^5 S3 \, h8 f# u4 F8 Aimport { watch, computed } from 'vue';
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
+ ^# M* ?$ Z! k1 X* Z6 L1 ^// 定义父组件传递的参数
9 H' A+ u1 e! jconst props = defineProps({
  start: {
6 P7 z, L' j5 B/ U0 C    type: Number,
: u# |2 n5 F% j/ ^. W& m    required: false,
, G6 t1 K+ P5 [! R: Z5 j7 V$ d2 A/ Z6 ^    default: 0
" m. Q5 J& R! G- T6 \7 }8 |/ e  },
& y5 v- M6 N7 d3 |0 ]9 h  end: {
    type: Number,
    required: false,
4 v- ~) R& h) a! I! E* v0 V    default: 0
  },
9 j: c' V4 H7 E2 ^) P6 P  duration: {
    type: Number,
9 M0 j) R& h* u- v  ~    required: false,
    default: 5000
  },
  autoPlay: {
# D/ q! w6 F" l  p% g    type: Boolean,
    required: false,
  Z. {1 @$ C$ N# Z0 X7 `. ?% ?    default: true
  },
( I' Q, G# Z. h5 w$ L" s7 [  decimals: {
    type: Number,
    required: false,
    default: 0,
    validator (value) {
( X1 H4 i2 M; B) y+ l& o' P. I      return value >= 0
    }
  },
  decimal: {
, v- s# g' |0 w7 q9 W+ W    type: String,
    required: false,
6 S) x% K) j) B) b' p' Y    default: '.'
  },
  separator: {
& h4 N2 Q) L$ x) O    type: String,
    required: false,
    default: ','
  },
# W; a, ~. b% E( E3 R7 ~  prefix: {
    type: String,
    required: false,
8 f; N; _$ |' z- B- u( p) f    default: ''
  },
  suffix: {
    type: String,
    required: false,
) Q4 K# M: p! g' _. V    default: ''
) D+ A& g4 @" I% d: f  },
0 v+ [& r6 D2 i  e. C; R4 Z3 i# o) g  useEasing: {
    type: Boolean,
    required: false,
' |0 u4 U4 a. U) A) h    default: true
  },
  easingFn: {
6 V6 n" [+ Q1 z2 d    type: Function,
    default(t, b, c, d) {
. I/ g6 X% O% @& u      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
8 K7 _5 q4 r( H" q( x; o    }
  }
  N0 T0 Q4 x' m" o- S})

3 {0 h7 ?$ n) e% @! u& [const isNumber = (val) => {
1 Y2 C  g( d- K6 Y% U6 d# L  return !isNaN(parseFloat(val))
6 y' w5 G7 ^' W' D: X3 N# O}

// 格式化数据，返回想要展示的数据格式
: }3 Y3 l5 v" N* L( E" l# s; |const formatNumber = (val) => {
9 s" m% Y7 K1 t; l* |% j7 [6 v  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
9 z; O, K' c( G, F: g$ v* Q: K  let x1 = x[0]
9 N% {1 N: x4 O# T! q- v  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
9 t3 V. f+ r4 @! t/ E  if (props.separator && !isNumber(props.separator)) {
    while (rgx.test(x1)) {
# E( f' a" b* s; f& A* D      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
. Z, F1 v- a* \/ b/ s% {  }
  return props.prefix + x1 + x2 + props.suffix
}

: w( I7 U, i# t9 S3 m// 相当于vue2中的data中所定义的变量部分
const state = reactive({
8 l, ?  c( E0 l8 W8 T  localStart: props.start,
9 p8 @4 D' S# s2 X  displayValue: formatNumber(props.start),
  printVal: null,
; T; D. h- N$ N9 n; j% n0 q  paused: false,
  localDuration: props.duration,
  startTime: null,
& D, Z% t8 v& z$ M% v2 L  timestamp: null,
4 Q  K/ Q8 M& \; P: w) m  remaining: null,
  rAF: null
( e7 M$ M# P3 M})
& ?6 g7 n* o0 b$ T
// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
  return props.start > props.end
" h1 \3 `- S" _: l3 V2 G3 [  H})
! Y" d" S1 b2 p$ c$ I' A// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
& F8 r8 p1 T, n9 Wconst emits = defineEmits(['onMountedcallback', 'callback'])

) A  o4 s( C  R" x5 Lconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
3 I9 Y: `- B2 z' O3 a  state.paused = false
  state.rAF = requestAnimationFrame(count)
}
$ i0 X0 t9 L# V1 e" o
watch(() => props.start, () => {
  if (props.autoPlay) {
    startCount()
  }
3 I7 c, R5 m8 S! \4 T})

* B- G6 R2 U4 T. f# `# ?/ m% kwatch(() => props.end, () => {
6 F' n1 h3 o: [  if (props.autoPlay) {
    startCount()
0 T' T% N+ i( f) S+ i  }
9 C/ j6 d. ^- j# b; W# L})
// dom挂在完成后执行一些操作
: \5 z/ y% {& t' ^/ P, Z, zonMounted(() => {
* W0 Y8 B3 t$ \6 h1 \  if (props.autoPlay) {
    startCount()
  }
3 ~+ v1 z2 n9 z9 m  emits('onMountedcallback')
})
// 暂停计数
const pause = () => {
' O* B: k+ j" g  cancelAnimationFrame(state.rAF)
. H4 g1 {# G& G6 f+ U$ q. F, N}
// 恢复计数
+ J/ p& }, q0 n7 U9 Iconst resume = () => {
  state.startTime = null
  state.localDuration = +state.remaining
  N1 D; G0 f9 p. U; }0 b( o  state.localStart = +state.printVal
- m1 w( j4 |- q/ |  requestAnimationFrame(count)
8 d  S+ T" f& c7 z}

* h5 f9 h5 a" d5 U) Jconst pauseResume = () => {
/ \1 ~; H; J. j  H- g  if (state.paused) {
    resume()
    state.paused = false
  } else {
0 T8 {4 z" ~5 v' q    pause()
3 }4 `  m: s) O% a" O7 d9 S    state.paused = true
3 n, v# I0 _, Z9 K  e% f  }
}

/ T( l! j+ C! n2 bconst reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
! n" E+ R% m9 E" k# ?  state.displayValue = formatNumber(props.start)
}
0 K0 k2 O6 ]' f; `: d0 ~: M/ h
const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
8 K0 H5 P3 D5 N0 k% R  const progress = timestamp - state.startTime
. U& k, h0 I3 z) }/ @! z$ M  state.remaining = state.localDuration - progress
2 y, h* E, e$ A" {: z, j- k  // 是否使用速度变化曲线
  if (props.useEasing) {
    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
3 ~2 H; E* }/ V: K    } else {
5 ^5 t: J4 \/ S+ ^( f. Y8 z      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
  h  |: k( j4 R  @7 G6 m    }
3 N; c: t% _( E" n  } else {
) w& _  d5 [, o; O$ Z    if (stopCount.value) {
6 s" f' r4 O/ o  Q3 V5 L% q      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
5 J; O# ?( H; [! B  }
  if (stopCount.value) {
    state.printVal = state.printVal < props.end ? props.end : state.printVal
# F6 {$ E/ t9 }, r( ^# o3 u9 m! X  } else {
    state.printVal = state.printVal > props.end ? props.end : state.printVal
7 T' D* R# j( _! @  }

  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
$ K- G8 m- Z  d% x  } else {
    emits('callback')
  }
- w% H, Q, F& |3 U}
// 组件销毁时取消动画
9 p; }5 J% r! ~4 g) c7 e* ~onUnmounted(() => {
4 k! V" V2 ]& o  cancelAnimationFrame(state.rAF)
})
</script>

1
/ @+ m7 T; }: Y% ]9 x3 \2
3
4
) k: w  e. W7 n+ ~2 x9 G5
6
7
8
9
10
4 S+ g5 u  Z4 x! M& o+ U6 j3 @# T/ Y11
12
, S5 u/ P% A5 L" Q9 v1 q* w5 s" l13
14
15
16
  c3 _% T6 S0 v  r: F( ?9 X) ~8 B17
2 @& n1 p2 ?" K+ a18
" L- p' [, l4 }1 G19
6 R3 f6 k: L0 {: d20
1 ~, I4 R/ ]5 n21
) x+ N/ ?) L: S& a7 }$ e22
' V" j% [) y# \. l- {5 q3 A23
24
! u* _: F6 P1 X+ {9 o0 D25
5 q0 y6 d/ ~1 w7 D0 I8 n26
! Y( G0 Y8 q- s7 ]3 q9 c6 ?27
28
4 F2 i. g: l, c; h& w8 j29
30
; `7 z, m5 d& A, g" ?- H7 I31
32
33
) m; y& z# Z, M" s1 D0 Y6 t34
+ K2 {: H, U7 y" }3 a. \7 o35
6 s# i) O( k+ Y9 P7 D4 w6 z36
37
38
39
40
41
42
43
44
; j3 _9 M- J, q" a# X; L45
1 w: m, M: Z2 z. A" o. I. M46
47
' q$ k/ S; C5 M' o! K$ h48
: ?4 g( l4 K9 Z/ V0 F2 ]0 z49
# i! R7 g' s0 W! g; ?50
$ @+ o1 G8 z( J- Z51
52
  u  w) Z" F% V2 k$ k  ?% C' ?53
! [/ C2 T7 c% v$ \, l54
55
56
6 r* s0 h$ L/ n% f1 c* I57
58
59
7 g/ @9 r& _, Q  R60
61
6 a# x. G" `: l0 Z* [62
63
64
0 x# V. u1 \; h' A65
66
67
68
& h6 \3 E2 k0 g  a69
2 s- @: A' i8 }; e70
0 F  u$ \$ r4 m% x" W71
6 U- \2 C! s6 l; m" q+ v# {72
1 U* [) I* X$ K. q4 M# T73
74
75
+ L0 w8 v0 Q$ A5 j! N+ [76
77
' A8 c  G+ s# V& O9 t! @( D+ ^78
79
80
81
" d) F  J2 g( U/ N( c! T* ^2 ^82
83
3 l+ E. @% z# J3 o4 {/ A) T. N84
85
86
' L: N: A/ [6 D# ]' m: D87
/ d4 p8 ?4 {5 z88
6 g/ u; N+ i2 b89
90
91
92
' o' C: r5 \7 [) v93
% {+ b8 t# D$ d% F# [- A94
95
& y* [7 [7 g4 S5 T+ I+ {; g. o  }) V5 s96
97
98
99
100
& X( k+ e) ]$ ~. D5 _5 t& k101
' g( P# G* r! P1 B102
' b8 _* q% J6 D( b. Z( }103
104
. W8 n0 |6 Z+ d% {3 O: [105
106
' f* K1 `2 Z7 X# t6 \. Z/ S' G- V107
7 V: a0 X8 b' L7 p1 ~2 T108
109
. Q9 @- k" d8 R6 X$ r110
9 a) x7 L" u0 v5 E) V& o$ K111
112
113
114
) n1 K' ?) q2 @0 g- Z1 W( D: i115
116
+ N) U  _. T  H0 J  D117
2 O4 [* P, f/ W- N- H118
8 W7 Y4 A% R% P; W( X119
120
121
5 j& g* ]; q5 c( _. ^/ r; a122
# U/ b2 a% \  {123
124
1 T, p9 R0 d( w6 q- w125
, H! Q5 G/ e' w. S) i1 J% V126
- I8 o) X3 i+ s( g5 h; E& s127
7 q, [8 b7 h6 v128
, \8 J8 @! Q* Y- U3 W( x129
130
. z/ U: a/ `! P) f131
' h6 ?* _: X" j1 b( g7 g3 P6 q. m1 p132
1 h5 G# H, _) G- X# z" s6 V133
134
  o( u) {9 Y( u2 `- a, @135
5 n: O+ h/ `4 i& P2 T136
* ~: W& q1 M4 s  b& f. S137
138
4 T4 D! R! q1 ]  i139
1 a, X  Y6 u5 U  c& T140
& e1 [$ ~/ O4 O2 D" n. O' s& b141
142
/ c. t9 K: W  s143
144
145
% w+ d/ T+ y8 p" c9 `5 c3 y+ F. U146
147
148
- d+ X' r5 o/ a- N7 ?! g149
150
151
152
153
  Q  R: R4 x  p% C( ~" P154
155
156
) d) Q( M+ f0 F2 ~7 O$ p- u. h% m$ |157
158
, C" z4 t' H3 m) E) h: W0 k9 q. J& I159
- W+ Z  b+ u7 O. N# v- X- [1 f( \- C160
161
162
: K7 t# J( m5 k6 s, ]1 m163
164
# H1 }! n  [1 q9 a: v165
166
) j% n) L' F0 U: i, b167
168
4 e0 W: T, L' a6 ~- S, G169
$ T* d7 V$ q7 [170
5 M1 h0 b* B6 I8 h0 s. u2 ^( t. }171
! r) \0 I+ z9 Q9 I) M4 C: v172
173
5 Z4 x. x  g: }! v. A: G174
, A  N! _0 Y2 ?4 _' u8 @175
9 s' y- `0 v* ~176
177
178
0 h: p/ T& I$ N: }/ k. v179
# T9 f& d" Q/ C/ X  V; T: `180
4 {4 h- N9 z+ ^* J+ A  Q181
182
183
* f3 a7 ~6 e3 }- {2 F184
185
186
9 T3 `( z+ j" b6 k+ m187
188
, X0 w- B8 E; i2 A8 Q! i, }" v189
8 H! q; [3 Z8 L$ {0 s' ~1 J190
191
2 i, R1 g5 Y; M& I% k192
193
9 R# c* t* W6 }8 @194
195
196
$ P- }* b! a- }, h9 z4 ~197
7 b8 M+ G  l  }$ }' d198
6 n" X- E9 V6 c/ ?1 p199
200
  V2 A4 {5 E! r  O, c2 W201
202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️
9 E$ B: j% A7 q
# B( g1 }9 J5 Edemo演示
+ o9 s' J+ N- k4 e1 [4 `$ s后续的线上demo演示会放在
' b/ R; ]/ ^* y/ Bdemo演示
; R& ?$ R: i3 U' d% c完整代码会放在
个人主页

- T, W3 r5 ?' E6 J& U! g希望对vue开发者有所帮助~

个人简介：承吾
9 @+ f2 K- E9 R6 a* V. g工作年限：5年前端
地区：上海
个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！




7 [5 W2 _7 u3 c, H————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847


2 ?" `' r# [0 N* H) o# |