数学建模社区-数学中国

标题: vue3 | 数据可视化实现数字滚动特效 [打印本页]

---

作者: 杨利霞    时间: 2022-9-14 17:02
标题: vue3 | 数据可视化实现数字滚动特效
vue3 | 数据可视化实现数字滚动特效
2 z8 l$ N6 j2 R
前言
* {% d" d+ k: svue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：
TypeError: Cannot read properties of undefined (reading '_c')
的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
; r, {9 u* u# A6 C& P

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

2 o) H# o: d4 u文件目录
/ j$ ?( w  @( e0 ]7 ]3 n7 O* T4 |, b
& B% c% F' @$ e( K) \
8 K: `: B9 B2 ~8 w7 _使用示例
4 A3 t1 T, Z/ K+ I% }7 o<CountTo
4 N$ T* y& t7 o) d :start="0" // 从数字多少开始
:end="endCount" // 到数字多少结束
- u' E" z, R6 }/ S9 s  r! \$ ~ :autoPlay="true" // 自动播放
:duration="3000" // 过渡时间
prefix="￥"   // 前缀符号
suffix="rmb" // 后缀符号
/>
1
; p; a: k# Y2 U% I: i- \2
3
% g! d! F- z* k4
5
6
7
8
9 p  |5 l8 L. o% r+ {入口文件index.js

const UILib = {
  install(Vue) {
    Vue.component('CountTo', CountTo)
  }
}
8 l! T& U3 L% O
export default UILib
+ I  h, k# A* s/ {; X& J+ m- q
5 R& t" C, K, j/ g! O' k! ~  \1
( J$ i7 D& Y; y% _9 t5 L2
" r4 N" Y: s  t7 U. T: R* R7 N3
4
5
6
. K" G  o+ {; [& C! s7
1 t( Q& R" D& a' I8
( o% ^' t; c. h  j9
main.js使用
import CountTo from './components/count-to/index';
app.use(CountTo)
1
2
) h4 Z1 o$ _: o1 P4 Q& _0 T0 urequestAnimationFrame.js思路
先判断是不是浏览器还是其他环境
如果是浏览器判断浏览器内核类型
如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
1 E1 e" [  ~8 X- F. H% j+ E导出两个方法 requestAnimationFrame, cancelAnimationFrame
4 }5 G) D; S! f& e/ Q各个浏览器前缀：let prefixes =  'webkit moz ms o';
判断是不是浏览器：let isServe = typeof window == 'undefined';
0 l2 [5 E4 `0 m7 A6 [增加各个浏览器前缀：  
' ^+ L2 ~( e: I8 c. Llet prefix;
let requestAnimationFrame;
' z) y: a- T5 S* R% T$ `let cancelAnimationFrame;
1 }) b* U7 q3 u. a3 G2 B0 K// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
    for (let i = 0; i < prefixes.length; i++) {
, e- A* j3 d( L4 D+ d& d: r% m2 F  B        if (requestAnimationFrame && cancelAnimationFrame) { break }
        prefix = prefixes
6 j1 |9 a9 ^: z, u        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
7 V/ o* Q2 D7 G2 o, v& x2 D9 m+ r        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
    }
, T- ~7 V& N+ ?2 y; e& m
, E; B- c; X6 J6 F; e& T, U  //不支持使用setTimeout方式替换：模拟60帧的效果
  // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
6 j- m: N( f4 q/ X  e  u    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
) I/ L, |' W5 P6 p/ ^4 [            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
6 [8 x2 S- H: L% ^' H% c1 x# N            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
, o+ F2 l7 m: n            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
/ i) ]# m. T- T/ q/ W! `7 j/ P6 ?4 I            }, timeToCall)
            lastTime = currTime + timeToCall
$ o% u9 m  q3 k/ X+ R            return id
' I* t8 z! |4 b$ w( ]        }

  n1 V- q* E0 I' i/ b7 y. j        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
        }
    }

1 f$ b% a9 {7 m1
5 v' S2 \8 l) ?: G/ v, H9 _2
9 r6 x% J. S" J7 c9 s3
# f. q% U2 f- H) Y4
8 o$ q6 @6 L+ }& ^$ K4 p5
6
1 O. f! ]# I, l( u7 U7
8
9
! Q* h2 o, \6 u5 O  W10
% C3 P# B. E1 F; X! @& ^11
* j) x9 J. N* n, v# K12
$ t: s' g* e3 H: o: F13
3 N8 u6 n" ~# w8 v; @3 B2 g14
15
16
17
18
; X: x$ b" x0 R9 D19
20
21
9 ?6 r9 [/ }4 K5 P6 y22
4 b2 s. r2 U5 \; P, K23
) S# m; u( G4 b3 {. d- w. e7 a" S24
25
, i  J# U% {& L26
27
; E' V9 F* j; g$ a0 p5 q28
& f8 p5 u! i. f( n4 M4 @' T) `29
30
0 a4 X2 |+ e- F, L' P! I31
% j; x, d, q; d% M% p& @32
) B2 F! e& Q, a8 v; U$ u完整代码：
) G7 u" D: h, \8 }7 p. \0 t  mrequestAnimationFrame.js
8 o( d) q% a% o# R3 i/ [  q% _0 _0 J
3 {4 `( W! U3 u% k1 hlet lastTime = 0
! S. k( h: e; j# e$ `. \7 ]const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
! F5 M! G% D) n/ Y
$ g' d- K- s$ \let requestAnimationFrame
let cancelAnimationFrame

! [5 \& z/ ?& H$ S9 j// 判断是否是服务器环境
4 w' F, U" e" `( J: K/ r5 \/ E$ _const isServer = typeof window === 'undefined'
if (isServer) {
6 _5 c$ ]: [( o2 i0 q8 C    requestAnimationFrame = function () {
+ k, Y  K1 e. I        return
    }
8 ]7 A7 B5 ]. c( @    cancelAnimationFrame = function () {
        return
    }
6 h3 G8 M/ @, }- r% L} else {
& E7 \! H! R1 y    requestAnimationFrame = window.requestAnimationFrame
6 q# b- X, |7 E2 s& ~    cancelAnimationFrame = window.cancelAnimationFrame
; A0 \6 b6 L" e7 _    let prefix
    // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
, Z9 J+ G7 ?# v! D  c' u8 g3 Z    for (let i = 0; i < prefixes.length; i++) {
! \/ O4 |0 F1 l: P8 A! \( d        if (requestAnimationFrame && cancelAnimationFrame) { break }
& c( @9 M3 `2 k% W+ J  }/ m        prefix = prefixes
        requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
        cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
: _. b2 X( C8 l7 Y    }
, U  D! j, j6 ~+ n/ U! f
    // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
4 J4 x/ h7 w- S8 v7 F: ~    if (!requestAnimationFrame || !cancelAnimationFrame) {
        requestAnimationFrame = function (callback) {
            const currTime = new Date().getTime()
            // 为了使setTimteout的尽可能的接近每秒60帧的效果
. B& C: G, i& n: `8 P            const timeToCall = Math.max(0, 16 - (currTime - lastTime))
            const id = window.setTimeout(() => {
                callback(currTime + timeToCall)
            }, timeToCall)
  g5 o) m/ e* O            lastTime = currTime + timeToCall
! d) _8 O$ @6 A1 M            return id
; r* n, C: r' A* H" ]        }

! U+ e& ~! t+ w( d6 R, g$ n        cancelAnimationFrame = function (id) {
            window.clearTimeout(id)
- }2 |5 j- g  A0 ^. J3 q        }
9 s  T% D( P# a4 W" n5 L% Y" @    }
}
# p9 V2 @3 ?$ ~- V# h
1 N/ I! l& R+ N2 Z9 \export { requestAnimationFrame, cancelAnimationFrame }


1 |+ g% p) c/ Q/ j" G" t1
4 Y& {8 R$ K& }& I' U( {2
4 Q( l) [: n' }6 q  g3
6 O9 _+ Q& N5 d$ M4
5
6
7
8
9
5 ?- \& c3 `5 |1 ]2 h% g) j10
11
# G% ?3 Q2 @" O: C; ~12
13
- [# d1 e7 @4 w  W14
* {! O3 k7 s2 |8 P4 v15
+ p, w; v) z% y! K' h* z; @16
17
. s1 m# p4 T8 |5 ^% y5 W; e9 a18
- f- _+ l9 k& c- [19
20
$ P5 |1 Q  d% n9 B. e2 E/ k4 V21
4 ]# V1 ?* {. E9 R22
) i  n5 v0 i' e- E1 L. d23
7 ^& d, R+ m: x' N1 e24
4 G$ U! _3 a3 m. X) S0 K3 b25
9 s/ j# P- r3 E$ F  h  k# B26
27
28
29
30
3 x  V5 a+ P' M" M: v0 R! k31
32
$ W8 o, b+ b, Y: d; V/ v( G33
34
0 W0 h' z5 R  `3 l2 K35
36
# P/ V3 I1 e$ C/ O8 n3 Z$ k4 l37
38
39
40
41
42
7 B) q! ]% H! G5 \% n7 @% x43
" t+ T8 b: b( x44
45
46
47
: l$ M& v8 _7 d  K4 \! }48
" R& ~' n+ A! X7 t: lCountTo.vue组件思路
3 G, {8 f) ]4 A, ]7 m1 T$ x首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。
4 O6 z* _9 F5 g! L
引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
1
! Q0 ~8 S; \3 s. `需要接受的参数：

const props = defineProps({
- j6 x3 h2 n2 `, y# v# _  start: {
    type: Number,
' x; i3 ]% z% h8 X    required: false,
    default: 0
  },
$ M, {" q( U. O7 f  Q  end: {
# E6 e+ p3 y7 S! J1 ~7 V    type: Number,
    required: false,
% ~8 b' P/ x2 Z- h5 F! y    default: 0
; B# V  Y. F+ v) Z/ {9 p  },
  duration: {
    type: Number,
- ~4 U- ^( m4 F+ Q    required: false,
4 `: z- o1 F0 b0 Z7 |" |; F( [5 n    default: 5000
  },
  autoPlay: {
8 b: p. ^5 P' M; T    type: Boolean,
    required: false,
    default: true
  },
  decimals: {
8 K9 \3 Q: g2 O6 E$ Q    type: Number,
9 D% J  B4 J- _3 N- p    required: false,
2 }9 C+ O! _, d  f4 T; [    default: 0,
    validator (value) {
+ m2 ]$ N6 u" M      return value >= 0
9 D& G, h4 `# F" b; h    }
  },
  decimal: {
    type: String,
    required: false,
2 K0 O) z: u/ ~5 x7 w    default: '.'
  },
$ D: y' h1 E& @1 w) D2 ^; C* G  separator: {
# ~4 M7 ~! d- D: w  a5 l' U    type: String,
- s: K& S- W. s; I) ~( k    required: false,
    default: ','
  },
8 u# j0 X/ _% S! {3 c  B& w  prefix: {
8 ]6 J9 {3 w& o! \    type: String,
    required: false,
* {* S8 v5 w& j# g    default: ''
$ ?7 h3 R7 F* P* S$ V0 n# k% u  },
1 l. S3 S, c9 y0 h+ H* G8 X# ^  suffix: {
    type: String,
3 z7 V$ N/ z; r2 b) g- a% K" |    required: false,
9 q8 t" D5 ^  g, m2 J5 Q    default: ''
" |1 h& o) |3 a* S  V0 r1 Q" C  },
  useEasing: {
9 y% T' _8 z" z2 l& W4 X3 J    type: Boolean,
    required: false,
    default: true
  },
  easingFn: {
/ \6 @+ W9 c9 t    type: Function,
    default(t, b, c, d) {
/ y6 r. @& g4 q2 b9 d9 O4 S      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
- V1 a7 {2 \/ f* D/ D* L0 V})

# q/ T; v9 R' v3 x7 }, z
/ _0 t. G2 W. J; _; }1
2
7 i" b+ b: B; D4 p5 n6 w! E3
& n  Q0 H- ^) y" R, t: \) {9 |4
5 C7 F* I. B0 ?8 r' P' }# [. _% w+ Z5
# k7 l' Q' l4 Q% q3 @6 X* h7 f% m6
8 Q+ g5 [) V+ K. A+ s) y9 _; J7
8
8 f8 X) Y/ \; u- n, s' W9
) [9 ^1 U% g' [$ ]10
11
12
13
14
15
16
17
18
2 S2 D" P; a! P# ~9 W4 }" w19
: ^. c! s4 ~+ d' f+ |* U7 X( C3 A" Y2 O+ a20
3 d1 H  g7 I5 u1 {, x- ^21
( z; L9 \9 u" L5 t+ k7 n6 {22
% g) O5 x/ g2 f+ c23
8 z6 O* M  \3 @4 z% j1 a24
25
- f7 V) P( q& c. a' X- |9 u: O26
27
28
29
0 @: H. K+ _. N, k$ j6 e" Y/ y30
31
) R* B& q" \7 k3 ~- u32
33
: S& x: R! J3 z6 Z; {34
35
$ m' B  m; y! N/ Z$ a* _36
" J1 X; U1 M9 s  r0 W$ J# [! U* u37
38
; g- x. \, e) A. H! p7 `39
40
41
42
43
44
% y' d/ E% f9 H- [: F( }$ `  C; e) f45
46
47
48
% ?, z: |& N( l9 W0 u0 Y49
50
; S! R' P% {# I/ Q6 z! F' H+ ?8 V51
52
/ o, u1 f, M# ?, b' }$ |+ C53
54
55
# u+ N0 S& W* j+ \2 @$ x% @56
7 ]* s6 D6 E/ U5 `* C' ~57
7 U, C/ _% L2 J: F% r1 t2 k0 E) b58
59
60
61
62
启动数字动效

4 I, n/ o" @% [% g  e: r& vconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
  state.localDuration = props.duration
3 y, S* s$ U0 `- j# N' b; M  state.paused = false
) n1 V% Z1 c8 Z  state.rAF = requestAnimationFrame(count)
}
8 V5 k0 T8 B! k, s- G: [+ |1
6 l* r2 t  I. y: y7 d2
0 k+ S( w* K& H* z- x5 f4 \3
5 f* g4 Y7 t& F4
5 l8 r% S! {6 u8 }8 `. z5
6
; o# a. F! F' e7
  o! |4 \, v" F( c: n8 Y2 d' S  B核心函数，对数字进行转动

  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
9 j. G4 U0 g5 H! T; q' ^  const progress = timestamp - state.startTime
  state.remaining = state.localDuration - progress
, v* P1 k1 M/ }4 W2 z" M; S  // 是否使用速度变化曲线
, f5 `+ N7 E5 ~1 e1 X1 A! a  if (props.useEasing) {
+ s* T) y0 C7 o    if (stopCount.value) {
% c+ b: D' i) W# v0 g. Z1 f      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
    } else {
, [  {$ y! D( G8 J( s" r      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
- W: Z! K& Y3 d    if (stopCount.value) {
' \9 F1 n( H& A      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
0 T% Y  d( ]0 B& N3 @. k5 H      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
    }
  }
; M, J9 I4 [; j1 Y  t  if (stopCount.value) {
; a4 l' t. c8 n% p    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
9 m6 E1 S& s2 y0 }0 \5 F: n1 V    state.printVal = state.printVal > props.end ? props.end : state.printVal
  }

7 ]  z8 c) P+ Z+ ]  @1 @  state.displayValue = formatNumber(state.printVal)
  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
  } else {
    emits('callback')
  }
8 Y: T3 \' h: n) D. a}


$ ~. E1 s. \( y2 E2 |// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
+ }& r# g5 N* [$ u3 v  let x1 = x[0]
9 H# x/ f* }4 a' g: f  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
" L8 T( A4 ~6 L& z! E1 x    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
# w. V: X0 F  R  C9 W8 A& Z  return props.prefix + x1 + x2 + props.suffix
  w, D/ c. k# o8 @. ^}
: f8 S( S$ N3 B( ]+ e
1 O) ]" g& c! U% X" d. T* J1
2
& c9 B2 B- A' G0 y& V" F* \6 z# A* w* Y7 l3
6 j7 Q7 G% c. b, P: o1 I4
* d+ I4 k! V2 F; D' Q5 d5
6
7
0 A  v- ?4 c7 f8
1 R* g* Q. |5 ?/ U$ V0 r8 }' g9
10
11
9 g9 s' P+ n7 |3 V12
13
/ K, G* f. ?" S! a14
15
. x. `) o) ]" U0 R5 f16
0 B# ]) ^, p0 P) r17
, q, ~! F2 l- w' H: O" }; l; J18
1 ?" A$ h4 b2 J/ I19
0 k( d( r# _9 C1 D5 q20
21
22
23
0 l9 u( ?) _5 x6 X) C24
0 N: J9 `( I) j; W5 Z5 q2 O25
4 x' b  ?* h* Y$ M) b; h& J7 l" \26
27
28
29
; F+ I$ B* z$ w6 Z30
31
- r. }& O6 b  k* a; s32
1 u. U& O3 I5 d" [2 G33
34
35
$ v/ s3 \) W; c7 w36
; K3 ]) s. k) i" C37
' G- L2 J' ~$ _6 ^5 u  p38
39
: b' l4 ]) U& }, K* H40
41
; }6 t$ I  n! j: X42
$ s. R& Z; F7 v$ z43
$ x. |4 U* Q7 P6 o) h44
8 k- u/ ~% z3 x( Z45
/ t% a8 k' l& i+ b! w/ |46
- W: K# B$ W6 H47
48
取消动效
$ E' ~: M- c6 [: j
& L- |7 p# E- `4 T// 组件销毁时取消动画
onUnmounted(() => {
5 x( V3 ^  {4 }; D8 f3 i, B) J3 Y  cancelAnimationFrame(state.rAF)
9 R$ s7 r5 s* H& f, d' m})
) r7 D2 X% P# @( t# w) C: v4 ?  @1
% q9 f4 A4 G+ }  g6 U: m7 f2
3
4
完整代码

<template>
" z  |; h, J6 k9 U4 r% U# K  {{ state.displayValue }}
</template>
+ S1 W! Q3 G. b( B2 V2 S
<script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
. Y& g! g$ ?! W/ S4 u3 Yimport { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
import { watch, computed } from 'vue';
* L! Q& I- E- y; J6 \1 himport { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
// 定义父组件传递的参数
const props = defineProps({
' e' X8 _9 U& }& G  start: {
    type: Number,
    required: false,
    default: 0
  },
& O( P. `" ~/ ?& D7 @  end: {
    type: Number,
0 R8 v! }3 \" j6 z    required: false,
    default: 0
  },
  duration: {
% H8 Q1 m! h; ]' W3 d    type: Number,
    required: false,
    default: 5000
! u4 `" |+ c+ A/ A9 i3 s0 ?! E6 U  },
! T4 n* u4 N. r" A  autoPlay: {
" [! f+ `' m5 w# R    type: Boolean,
    required: false,
/ D4 A  d2 E1 F( i+ n9 V' h+ s  H    default: true
* P1 H; h! O& l$ \. Z9 @  },
% {- C/ M! I" ?  p, Q  decimals: {
    type: Number,
; r& {1 ~% M, l, e+ r    required: false,
    default: 0,
    validator (value) {
5 d- J2 q7 I/ |      return value >= 0
0 D& _- {9 K5 ?" z3 w! W1 `    }
! ?4 N4 Z; m% b% |! m' i5 a, e  },
  decimal: {
    type: String,
7 I+ X. ?3 Q% P$ J9 l+ @4 y    required: false,
( X2 i+ @! t9 v; b7 t    default: '.'
  },
  separator: {
6 x% m1 N" t; i. ]9 p& v' g. I    type: String,
0 V8 ]# D1 z6 b    required: false,
    default: ','
  },
  prefix: {
  X1 c0 j, n5 J) G: Y: C    type: String,
    required: false,
    default: ''
  },
  suffix: {
    type: String,
& E3 t  z9 |0 q+ [" L    required: false,
  a4 r2 A& s* U8 s4 f1 ]& }    default: ''
, x: z# E  _/ ]. ~# g- m2 K! f  },
  useEasing: {
/ L* t6 h+ l; T4 ]    type: Boolean,
    required: false,
- O& b  [6 S1 @4 x    default: true
0 [5 F6 i0 U) ]  },
- {5 E) k& K& M/ _* E: J9 I% }* ~  easingFn: {
    type: Function,
    default(t, b, c, d) {
% {3 u. b; U! {4 f1 h$ D9 x2 Y! n      return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
  }
})
, y% X+ w2 e4 X- A8 [& {% F
const isNumber = (val) => {
: v8 f+ A$ ^! E, d9 \/ D; u  return !isNaN(parseFloat(val))
8 p! i$ h2 O$ z& ]# z1 C" l6 R}

* ~! L! ]3 W; |& o' O// 格式化数据，返回想要展示的数据格式
const formatNumber = (val) => {
  val = val.toFixed(props.default)
  val += ''
  const x = val.split('.')
  let x1 = x[0]
1 ~  ]2 R" x3 Z* o- S  const x2 = x.length > 1 ? props.decimal + x[1] : ''
  const rgx = /(\d+)(\d{3})/
  if (props.separator && !isNumber(props.separator)) {
% A! X" u' z6 M' {$ \9 e; a    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + props.separator + '$2')
    }
  }
6 a0 Q- `  o- [! l/ D# }  return props.prefix + x1 + x2 + props.suffix
}

// 相当于vue2中的data中所定义的变量部分
const state = reactive({
" H6 B* b% Q8 y8 B3 Z$ i; B5 u0 X+ A  localStart: props.start,
  displayValue: formatNumber(props.start),
, y: l! |0 x9 v% I  printVal: null,
  paused: false,
4 W9 b0 x$ W4 _/ `' q, `- l  localDuration: props.duration,
  startTime: null,
  timestamp: null,
  remaining: null,
3 Y! G+ X! X7 x' q* w+ g6 V4 ^! T0 Y  rAF: null
})

/ d/ o5 B+ N& c// 定义一个计算属性，当开始数字大于结束数字时返回true
const stopCount = computed(() => {
7 i8 u/ W# e# W! q5 S" {  return props.start > props.end
0 _4 M0 _! k' @" k1 i3 n' q* P})
// 定义父组件的自定义事件，子组件以触发父组件的自定义事件
const emits = defineEmits(['onMountedcallback', 'callback'])
5 ?* C& C2 S% @+ b) j! K: ^# f1 C
4 h0 m3 D; p! {; n9 V- K# Vconst startCount = () => {
  state.localStart = props.start
  state.startTime = null
8 q" e2 t$ K; c- U" i  L7 z  state.localDuration = props.duration
6 U  @- ~# O0 {. M1 x  state.paused = false
6 h% ]  P' T/ {4 M) K! K# ?3 U  state.rAF = requestAnimationFrame(count)
}

watch(() => props.start, () => {
$ w' C5 U: V0 ]  Q  if (props.autoPlay) {
/ S# N$ _0 b& @& K    startCount()
  }
0 R8 ]) E6 R6 k6 ]9 h: `, f})
% p+ \- O6 d' E) q
watch(() => props.end, () => {
' H" X8 A$ K  Z- D9 a# V  if (props.autoPlay) {
    startCount()
) z3 v) u/ W8 m1 E  }
8 Q$ ?. _9 U+ \! B* d9 o5 D})
// dom挂在完成后执行一些操作
2 T* N6 @1 X/ R2 h* B6 ^1 ~; UonMounted(() => {
  if (props.autoPlay) {
+ y8 X9 u+ v  G- }2 y    startCount()
  }
  emits('onMountedcallback')
2 g" e3 w' E# Q% u+ G7 y})
// 暂停计数
const pause = () => {
  cancelAnimationFrame(state.rAF)
}
: J& Q( Y; s+ h$ z2 H9 }// 恢复计数
% P+ r4 R) l3 h! A  [const resume = () => {
/ k+ K6 d. X* D' t; t3 O  state.startTime = null
  state.localDuration = +state.remaining
  state.localStart = +state.printVal
) _) O8 F- s% d; ^( U0 Y  requestAnimationFrame(count)
) B3 F1 o# N" r# n0 L}
" |- s# n# _/ W6 z
5 r) p9 ?6 i& G( ^) wconst pauseResume = () => {
  L1 ]- w( R. L! C5 @) H$ {  if (state.paused) {
    resume()
0 k1 F$ j$ S3 A! ]7 l    state.paused = false
, _$ g2 j% c3 \# T  } else {
    pause()
    state.paused = true
  }
+ E/ E( S/ j3 A! K}

const reset = () => {
  state.startTime = null
  cancelAnimationFrame(state.rAF)
  state.displayValue = formatNumber(props.start)
+ ?( E' f% K' d2 _}
5 g4 U" b& z) o+ i6 a2 h
const count = (timestamp) => {
  if (!state.startTime) state.startTime = timestamp
  state.timestamp = timestamp
& s3 ]) V2 Z1 T2 t  const progress = timestamp - state.startTime
6 Y$ c1 ]# G2 V+ h* r  t7 L' C  state.remaining = state.localDuration - progress
/ C; ~" v- G. f3 y  // 是否使用速度变化曲线
  if (props.useEasing) {
1 U' m" I4 t) x& U    if (stopCount.value) {
      state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
; r! U& }3 T* |$ g8 |. j" Y    } else {
      state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
    }
  } else {
    if (stopCount.value) {
% J# V% _/ g- M. R      state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
    } else {
% F; p' ]5 v+ z  E" S  J6 v" D! _1 O      state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
" o, v" P9 K; \2 m7 y, U1 G  l; m    }
  }
  if (stopCount.value) {
2 `. [- e4 B: ~: f) h6 ^+ ~! u" g    state.printVal = state.printVal < props.end ? props.end : state.printVal
  } else {
9 S: S" w- p7 `4 G& {+ |    state.printVal = state.printVal > props.end ? props.end : state.printVal
( f- ^  Z! g" ^4 w# z, P  }

  state.displayValue = formatNumber(state.printVal)
$ W* j  y" ~% ~9 Z7 s6 L* H: `$ B4 S  if (progress < state.localDuration) {
    state.rAF = requestAnimationFrame(count)
4 K4 r/ H4 s3 {" I  } else {
    emits('callback')
' C# s5 i  J0 B' g- `( G  }
}
- d* o7 s9 B  i6 v) ~; J+ V// 组件销毁时取消动画
onUnmounted(() => {
  cancelAnimationFrame(state.rAF)
  T( X0 E* Q7 R; O1 ]})
9 Q; m/ I* A' N</script>
- u. @- f$ |2 `' s
1
2
3
4
5
1 |7 b/ p- u/ `$ Y& S9 I6
4 w) v# Y; [; ?" p$ l4 n5 P& [& A4 p+ W7
8
9
10
' Y" F0 O) R+ Y) G11
12
' `' J& Z+ n" a( u9 k13
14
! {9 a. i% t( E" b2 q( y15
) S1 m1 w% B) V" H3 |16
1 J0 h' C' y8 \5 U% y$ Z4 ~17
18
19
; n$ \  i$ @9 V) K: D9 W1 g7 x& O1 ^20
21
22
23
. S' l0 j0 X8 H5 S24
* w1 _/ l* T+ J" ]& I3 d25
5 A& n& d- ~( v$ R* R% S; u26
27
28
29
30
" K; ~* `9 b/ K. o! Q3 s% F7 X31
32
, A, c% P6 W' Q1 }+ b33
34
* w5 v) U* @9 k& w' e  [: U9 v35
36
37
) P% g$ v/ ?8 }2 t$ c38
39
( M# t9 F& Z; ^- U" X40
2 [$ R/ w$ a7 n" M# N41
42
43
' Z: f/ o0 f& R' K) \8 N# Z3 R& {44
$ u6 H, P. W" L( a1 i3 M6 H0 Q45
46
47
3 M2 z' x% q3 ~- h+ a' U* l48
' _/ D2 H0 m, `0 i6 z8 W. G, l49
50
51
, M" a; \/ t% _9 x52
. j' g) t$ i/ I7 @53
54
7 `1 [  E; G1 s55
56
57
$ H9 [$ p/ `: I6 ?2 g4 N; v58
59
60
61
62
* u) V. Q  h; P3 v/ _# Q+ b( F63
64
65
4 Y# F' }3 |) a& I( M" ?; C66
( u7 h  B. F# `5 D67
+ Y2 y1 T" D: c2 Z4 O$ [68
* s9 w7 ?/ |' L8 t8 x5 _5 W4 q69
70
7 l( L' |, k0 g4 z$ p71
72
73
74
9 }: R3 ?5 K. o9 ?- p2 m% N6 V! d75
76
! I% w: M: ~. g* `+ d. Z& n( x77
78
79
1 N* }# Z: C( y0 }& H& ~- ]5 Q" X80
81
% G0 K7 s5 b& p: p4 j82
83
. W% `) f! e! h# T' q' o4 U& J84
3 s* J, d  [% A) [85
86
87
+ V- ~4 h% w: Y2 X$ Q' Q88
89
3 I0 ?( g8 B+ z& |; O90
91
92
93
/ m. \2 H0 ~6 z4 `( U94
. h5 ]& ~+ C; t( k" F) g) v95
& U% p& H7 ~9 A1 W( M96
97
6 X5 W/ L4 \5 }; j98
99
100
101
102
8 ~1 C3 P1 e7 @5 z103
- T) O0 m  {8 H2 Q( q; {( t104
105
: `0 E/ }6 z+ {106
107
108
109
110
111
112
113
$ H' h$ o$ [" n6 u0 o& e$ g8 S114
$ r+ {1 m6 F7 a  |+ L115
116
% A7 ~0 T. }* [/ B0 Q8 E117
118
119
120
121
, ?: R: x; |3 R  ?122
123
5 O4 O6 K3 U% I# @/ J  ~. |6 ]124
, J( h' w: f7 w125
126
- V* Y* N, g8 T5 b0 e, v. g. w( K127
128
" j- L- y6 i0 c. d6 i5 i8 m# \' K129
* a$ o9 Y3 y0 \0 y- K130
131
( ]2 \0 M8 _- }$ Y$ i- U132
133
134
$ _9 y+ D7 V) s135
7 x) A0 C' _, k) ^; R1 u3 I) F) }( O136
137
, x: d8 _) _- B8 Q138
139
140
% X+ h5 z3 U. R5 J- T141
! V7 b- }- i. ?! v( V$ J; w) F142
143
; M( e* g$ w! l! H144
2 D  A/ l* X) z* e145
146
147
148
149
150
151
152
153
* C/ i3 m5 Q+ E8 g% `+ t; {154
4 a6 {  ]* N' I! m155
156
157
; L0 [- w) u4 e8 M1 u158
# i+ R  U+ E4 [6 g1 D9 L# u159
" }6 P3 y% }% t2 M+ e160
161
2 h9 {! L  d- j3 i) i& B162
) U" w/ d$ d9 g163
164
165
166
2 Z6 U, M# C" C( h( z167
168
6 G5 @% P2 g/ l169
4 h3 }( T# Z1 b8 }) r; b170
171
172
8 M4 a* c! u4 v! a173
* [6 o2 l. `% M9 b- M0 Y174
+ ^9 w! d" v( b: E/ `0 Z175
$ A5 S9 v' {) q& F3 E9 W( `/ [176
177
5 C# y& z2 _: B  y  w, p6 }178
% j7 {; a, c8 H9 W7 b179
180
181
  |9 Q% z! c$ V; k- S, B182
183
1 D- {% L/ K2 P" X3 F2 I184
185
186
. ?6 ?5 D0 {- s! R8 D187
188
189
; K' U( [* r/ A2 s" l$ f190
4 i  |  O- x- w5 Z  S9 O+ ~2 W191
192
193
& h3 o7 D8 o; ^2 |194
195
196
- y3 Q: e2 m1 F7 D" Q6 @3 b197
198
199
" ~# ~7 w7 |- [+ E# ^7 e8 e1 F1 ?( a# @/ H200
* K+ I! d7 u- z: W/ `/ H201
* Q- M  O8 r4 e8 E202
总结
自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示
9 I( M" x6 r9 a7 j9 k8 \后续的线上demo演示会放在
* |1 }3 c+ r/ r$ Pdemo演示
完整代码会放在
2 I+ X; m; {' L个人主页
+ H' W' Q% [+ u* w4 ?
希望对vue开发者有所帮助~
4 K! H  G- J3 `# m3 e
个人简介：承吾
/ D) y/ f, F) D$ _4 G; Y9 P' U# Z工作年限：5年前端
地区：上海
) Y4 y3 z: G8 n个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！
; K6 T7 [) F2 }6 ]) i" U+ A7 r


  J8 e3 v! X2 G  @
7 D3 j% m0 ^6 |" c5 U  i————————————————
版权声明：本文为CSDN博主「KinHKin(五年前端)」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42974827/article/details/126831847


# q, K& k2 Q$ M" [2 R  g

---

欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)

Powered by Discuz! X2.5