0
0

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

前言

vue3不支持vue-count-to插件，无法使用vue-count-to实现数字动效，数字自动分割，vue-count-to主要针对vue2使用，vue3按照会报错：

  1. TypeError: Cannot read properties of undefined (reading '_c')

的错误信息。这个时候我们只能自己封装一个CountTo组件实现数字动效。先来看效果图:
请添加图片描述

思路

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

文件目录

文件目录

使用示例

  1. <CountTo
  2.  :start="0" // 从数字多少开始
  3.  :end="endCount" // 到数字多少结束
  4.  :autoPlay="true" // 自动播放
  5.  :duration="3000" // 过渡时间
  6.  prefix="￥"   // 前缀符号
  7.  suffix="rmb" // 后缀符号
  8.  />

入口文件index.js

  2. const UILib = {
  3.   install(Vue) {
  4.     Vue.component('CountTo', CountTo)
  5.   }
  6. }
  8. export default UILib

main.js使用

  1. import CountTo from './components/count-to/index';
  2. app.use(CountTo)

requestAnimationFrame.js思路

  1. 先判断是不是浏览器还是其他环境
  2. 如果是浏览器判断浏览器内核类型
  3. 如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
  4. 导出两个方法 requestAnimationFrame, cancelAnimationFrame
  1. 各个浏览器前缀：let prefixes =  'webkit moz ms o';
  2. 判断是不是浏览器：let isServe = typeof window == 'undefined';
  3. 增加各个浏览器前缀：  
  4. let prefix;
  5. let requestAnimationFrame;
  6. let cancelAnimationFrame;
  7. // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
  8.     for (let i = 0; i < prefixes.length; i++) {
  9.         if (requestAnimationFrame && cancelAnimationFrame) { break }
  10.         prefix = prefixes[i]
  11.         requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
  12.         cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
  13.     }
  14.     
  15.   //不支持使用setTimeout方式替换：模拟60帧的效果
  16.   // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
  17.     if (!requestAnimationFrame || !cancelAnimationFrame) {
  18.         requestAnimationFrame = function (callback) {
  19.             const currTime = new Date().getTime()
  20.             // 为了使setTimteout的尽可能的接近每秒60帧的效果
  21.             const timeToCall = Math.max(0, 16 - (currTime - lastTime))
  22.             const id = window.setTimeout(() => {
  23.                 callback(currTime + timeToCall)
  24.             }, timeToCall)
  25.             lastTime = currTime + timeToCall
  26.             return id
  27.         }
  29.         cancelAnimationFrame = function (id) {
  30.             window.clearTimeout(id)
  31.         }
  32.     }

完整代码：

requestAnimationFrame.js

  1. let lastTime = 0
  2. const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
  4. let requestAnimationFrame
  5. let cancelAnimationFrame
  7. // 判断是否是服务器环境
  8. const isServer = typeof window === 'undefined'
  9. if (isServer) {
  10.     requestAnimationFrame = function () {
  11.         return
  12.     }
  13.     cancelAnimationFrame = function () {
  14.         return
  15.     }
  16. } else {
  17.     requestAnimationFrame = window.requestAnimationFrame
  18.     cancelAnimationFrame = window.cancelAnimationFrame
  19.     let prefix
  20.     // 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
  21.     for (let i = 0; i < prefixes.length; i++) {
  22.         if (requestAnimationFrame && cancelAnimationFrame) { break }
  23.         prefix = prefixes[i]
  24.         requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
  25.         cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
  26.     }
  28.     // 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
  29.     if (!requestAnimationFrame || !cancelAnimationFrame) {
  30.         requestAnimationFrame = function (callback) {
  31.             const currTime = new Date().getTime()
  32.             // 为了使setTimteout的尽可能的接近每秒60帧的效果
  33.             const timeToCall = Math.max(0, 16 - (currTime - lastTime))
  34.             const id = window.setTimeout(() => {
  35.                 callback(currTime + timeToCall)
  36.             }, timeToCall)
  37.             lastTime = currTime + timeToCall
  38.             return id
  39.         }
  41.         cancelAnimationFrame = function (id) {
  42.             window.clearTimeout(id)
  43.         }
  44.     }
  45. }
  47. export { requestAnimationFrame, cancelAnimationFrame }

CountTo.vue组件思路

首先引入requestAnimationFrame.js,使用requestAnimationFrame方法接受count函数，还需要格式化数字，进行正则表达式转换，返回我们想要的数据格式。

  1. 引入 import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'

需要接受的参数：

  1. const props = defineProps({
  2.   start: {
  3.     type: Number,
  4.     required: false,
  5.     default: 0
  6.   },
  7.   end: {
  8.     type: Number,
  9.     required: false,
  10.     default: 0
  11.   },
  12.   duration: {
  13.     type: Number,
  14.     required: false,
  15.     default: 5000
  16.   },
  17.   autoPlay: {
  18.     type: Boolean,
  19.     required: false,
  20.     default: true
  21.   },
  22.   decimals: {
  23.     type: Number,
  24.     required: false,
  25.     default: 0,
  26.     validator (value) {
  27.       return value >= 0
  28.     }
  29.   },
  30.   decimal: {
  31.     type: String,
  32.     required: false,
  33.     default: '.'
  34.   },
  35.   separator: {
  36.     type: String,
  37.     required: false,
  38.     default: ','
  39.   },
  40.   prefix: {
  41.     type: String,
  42.     required: false,
  43.     default: ''
  44.   },
  45.   suffix: {
  46.     type: String,
  47.     required: false,
  48.     default: ''
  49.   },
  50.   useEasing: {
  51.     type: Boolean,
  52.     required: false,
  53.     default: true
  54.   },
  55.   easingFn: {
  56.     type: Function,
  57.     default(t, b, c, d) {
  58.       return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
  59.     }
  60.   }
  61. })

启动数字动效

  1. const startCount = () => {
  2.   state.localStart = props.start
  3.   state.startTime = null
  4.   state.localDuration = props.duration
  5.   state.paused = false
  6.   state.rAF = requestAnimationFrame(count)
  7. }

核心函数，对数字进行转动

  1.   if (!state.startTime) state.startTime = timestamp
  2.   state.timestamp = timestamp
  3.   const progress = timestamp - state.startTime
  4.   state.remaining = state.localDuration - progress
  5.   // 是否使用速度变化曲线
  6.   if (props.useEasing) {
  7.     if (stopCount.value) {
  8.       state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
  9.     } else {
  10.       state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
  11.     }
  12.   } else {
  13.     if (stopCount.value) {
  14.       state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
  15.     } else {
  16.       state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
  17.     }
  18.   }
  19.   if (stopCount.value) {
  20.     state.printVal = state.printVal < props.end ? props.end : state.printVal
  21.   } else {
  22.     state.printVal = state.printVal > props.end ? props.end : state.printVal
  23.   }
  25.   state.displayValue = formatNumber(state.printVal)
  26.   if (progress < state.localDuration) {
  27.     state.rAF = requestAnimationFrame(count)
  28.   } else {
  29.     emits('callback')
  30.   }
  31. }
  33. // 格式化数据，返回想要展示的数据格式
  34. const formatNumber = (val) => {
  35.   val = val.toFixed(props.default)
  36.   val += ''
  37.   const x = val.split('.')
  38.   let x1 = x[0]
  39.   const x2 = x.length > 1 ? props.decimal + x[1] : ''
  40.   const rgx = /(\d+)(\d{3})/
  41.   if (props.separator && !isNumber(props.separator)) {
  42.     while (rgx.test(x1)) {
  43.       x1 = x1.replace(rgx, '$1' + props.separator + '$2')
  44.     }
  45.   }
  46.   return props.prefix + x1 + x2 + props.suffix
  47. }

取消动效

  1. // 组件销毁时取消动画
  2. onUnmounted(() => {
  3.   cancelAnimationFrame(state.rAF)
  4. })

完整代码

  1. <template>
  2.   {{ state.displayValue }}
  3. </template>
  5. <script setup>  // vue3.2新的语法糖, 编写代码更加简洁高效
  6. import { onMounted, onUnmounted, reactive } from "@vue/runtime-core";
  7. import { watch, computed } from 'vue';
  8. import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
  9. // 定义父组件传递的参数
  10. const props = defineProps({
  11.   start: {
  12.     type: Number,
  13.     required: false,
  14.     default: 0
  15.   },
  16.   end: {
  17.     type: Number,
  18.     required: false,
  19.     default: 0
  20.   },
  21.   duration: {
  22.     type: Number,
  23.     required: false,
  24.     default: 5000
  25.   },
  26.   autoPlay: {
  27.     type: Boolean,
  28.     required: false,
  29.     default: true
  30.   },
  31.   decimals: {
  32.     type: Number,
  33.     required: false,
  34.     default: 0,
  35.     validator (value) {
  36.       return value >= 0
  37.     }
  38.   },
  39.   decimal: {
  40.     type: String,
  41.     required: false,
  42.     default: '.'
  43.   },
  44.   separator: {
  45.     type: String,
  46.     required: false,
  47.     default: ','
  48.   },
  49.   prefix: {
  50.     type: String,
  51.     required: false,
  52.     default: ''
  53.   },
  54.   suffix: {
  55.     type: String,
  56.     required: false,
  57.     default: ''
  58.   },
  59.   useEasing: {
  60.     type: Boolean,
  61.     required: false,
  62.     default: true
  63.   },
  64.   easingFn: {
  65.     type: Function,
  66.     default(t, b, c, d) {
  67.       return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
  68.     }
  69.   }
  70. })
  72. const isNumber = (val) => {
  73.   return !isNaN(parseFloat(val))
  74. }
  76. // 格式化数据，返回想要展示的数据格式
  77. const formatNumber = (val) => {
  78.   val = val.toFixed(props.default)
  79.   val += ''
  80.   const x = val.split('.')
  81.   let x1 = x[0]
  82.   const x2 = x.length > 1 ? props.decimal + x[1] : ''
  83.   const rgx = /(\d+)(\d{3})/
  84.   if (props.separator && !isNumber(props.separator)) {
  85.     while (rgx.test(x1)) {
  86.       x1 = x1.replace(rgx, '$1' + props.separator + '$2')
  87.     }
  88.   }
  89.   return props.prefix + x1 + x2 + props.suffix
  90. }
  92. // 相当于vue2中的data中所定义的变量部分
  93. const state = reactive({
  94.   localStart: props.start,
  95.   displayValue: formatNumber(props.start),
  96.   printVal: null,
  97.   paused: false,
  98.   localDuration: props.duration,
  99.   startTime: null,
  100.   timestamp: null,
  101.   remaining: null,
  102.   rAF: null
  103. })
  105. // 定义一个计算属性，当开始数字大于结束数字时返回true
  106. const stopCount = computed(() => {
  107.   return props.start > props.end
  108. })
  109. // 定义父组件的自定义事件，子组件以触发父组件的自定义事件
  110. const emits = defineEmits(['onMountedcallback', 'callback'])
  112. const startCount = () => {
  113.   state.localStart = props.start
  114.   state.startTime = null
  115.   state.localDuration = props.duration
  116.   state.paused = false
  117.   state.rAF = requestAnimationFrame(count)
  118. }
  120. watch(() => props.start, () => {
  121.   if (props.autoPlay) {
  122.     startCount()
  123.   }
  124. })
  126. watch(() => props.end, () => {
  127.   if (props.autoPlay) {
  128.     startCount()
  129.   }
  130. })
  131. // dom挂在完成后执行一些操作
  132. onMounted(() => {
  133.   if (props.autoPlay) {
  134.     startCount()
  135.   }
  136.   emits('onMountedcallback')
  137. })
  138. // 暂停计数
  139. const pause = () => {
  140.   cancelAnimationFrame(state.rAF)
  141. }
  142. // 恢复计数
  143. const resume = () => {
  144.   state.startTime = null
  145.   state.localDuration = +state.remaining
  146.   state.localStart = +state.printVal
  147.   requestAnimationFrame(count)
  148. }
  150. const pauseResume = () => {
  151.   if (state.paused) {
  152.     resume()
  153.     state.paused = false
  154.   } else {
  155.     pause()
  156.     state.paused = true
  157.   }
  158. }
  160. const reset = () => {
  161.   state.startTime = null
  162.   cancelAnimationFrame(state.rAF)
  163.   state.displayValue = formatNumber(props.start)
  164. }
  166. const count = (timestamp) => {
  167.   if (!state.startTime) state.startTime = timestamp
  168.   state.timestamp = timestamp
  169.   const progress = timestamp - state.startTime
  170.   state.remaining = state.localDuration - progress
  171.   // 是否使用速度变化曲线
  172.   if (props.useEasing) {
  173.     if (stopCount.value) {
  174.       state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
  175.     } else {
  176.       state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
  177.     }
  178.   } else {
  179.     if (stopCount.value) {
  180.       state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
  181.     } else {
  182.       state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
  183.     }
  184.   }
  185.   if (stopCount.value) {
  186.     state.printVal = state.printVal < props.end ? props.end : state.printVal
  187.   } else {
  188.     state.printVal = state.printVal > props.end ? props.end : state.printVal
  189.   }
  191.   state.displayValue = formatNumber(state.printVal)
  192.   if (progress < state.localDuration) {
  193.     state.rAF = requestAnimationFrame(count)
  194.   } else {
  195.     emits('callback')
  196.   }
  197. }
  198. // 组件销毁时取消动画
  199. onUnmounted(() => {
  200.   cancelAnimationFrame(state.rAF)
  201. })
  202. </script>

总结

自己封装数字动态效果需要注意各个浏览器直接的差异，手动pollyfill，暴露出去的props参数需要有默认值，数据的格式化可以才有正则表达式的方式，组件的驱动必须是数据变化，根据数据来驱动页面渲染，防止页面出现卡顿，不要强行操作dom,引入的组件可以全局配置，后续组件可以服用，码字不易，请各位看官大佬多多支持，一键三连了~❤️❤️❤️

demo演示

后续的线上demo演示会放在
demo演示
完整代码会放在
个人主页

希望对vue开发者有所帮助~

  1. 个人简介：承吾
  2. 工作年限：5年前端
  3. 地区：上海
  4. 个人宣言：立志出好文，传播我所会的，有好东西就及时与大家共享！请添加图片描述请添加图片描述
标签： javascript vue.js 前端
本文转载自: https://blog.csdn.net/weixin_42974827/article/details/126831847
版权归原作者 KinHKin(五年前端) 所有， 如有侵权，请联系我们删除。
登录后发布评论

“vue3 | 数据可视化实现数字滚动特效”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？