vue3 数据可视化实现数字滚动特效_可视化大屏数字翻页特效

}
}

export default UILib

## main.js使用

import CountTo from ‘./components/count-to/index’;
app.use(CountTo)

## requestAnimationFrame.js思路


1. 先判断是不是浏览器还是其他环境
2. 如果是浏览器判断浏览器内核类型
3. 如果浏览器不支持requestAnimationFrame，cancelAnimationFrame方法，改写setTimeout定时器
4. 导出两个方法 requestAnimationFrame, cancelAnimationFrame

各个浏览器前缀：let prefixes = ‘webkit moz ms o’;
判断是不是浏览器：let isServe = typeof window == ‘undefined’;
增加各个浏览器前缀：
let prefix;
let requestAnimationFrame;
let cancelAnimationFrame;
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
for (let i = 0; i < prefixes.length; i++) {
if (requestAnimationFrame && cancelAnimationFrame) { break }
prefix = prefixes[i]
requestAnimationFrame = requestAnimationFrame || window[prefix + ‘RequestAnimationFrame’]
cancelAnimationFrame = cancelAnimationFrame || window[prefix + ‘CancelAnimationFrame’] || window[prefix + ‘CancelRequestAnimationFrame’]
}

//不支持使用setTimeout方式替换：模拟60帧的效果
// 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
if (!requestAnimationFrame || !cancelAnimationFrame) {
requestAnimationFrame = function (callback) {
const currTime = new Date().getTime()
// 为了使setTimteout的尽可能的接近每秒60帧的效果
const timeToCall = Math.max(0, 16 - (currTime - lastT