沈阳做平板网站,中国最大的中文网站,交易平台,游戏代理怎么找渠道1)requestAnimationFrame是什么?
1.MDN官方解释 2.解析这段话#xff1a;
1、那么浏览器重绘是指什么呢#xff1f; ——大多数电脑的显示器刷新频率是60Hz#xff0c;1000ms/6016.66666667ms的时间刷新一次 2、重绘之前调用指定的回调函数更新动画#xff1f; ——requ…1)requestAnimationFrame是什么?
1.MDN官方解释 2.解析这段话
1、那么浏览器重绘是指什么呢 ——大多数电脑的显示器刷新频率是60Hz1000ms/6016.66666667ms的时间刷新一次 2、重绘之前调用指定的回调函数更新动画 ——requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来在一次重绘或回流中 紧跟随浏览器的刷新频率 去完成操作。
2)基础用法
script setup
let animationRef
const goStart () {const cb () {// 写入DOM 操作会在每一次浏览器刷新之前执行❤requestAnimationFrame(cb)}// 开启动画animationRef requestAnimationFrame(cb)
}
const goEnd () {// 取消动画cancelAnimationFrame(animationRef)
}
/script3)requestAnimationFrame的优点
1.传统实现JS动画
通常情况下实现动画能使用css实现的就使用css不能的css实现的再使用JS实现。 我们实现JS动画会使用setTimeout和setInterval。 而setTimeout和setInterval的使用是存在问题的导致丢帧。 ①间隔时间不好确定前面也提到大多数电脑的显示器刷新频率是60Hz1000ms/60定时器的间隔时间设置过长或者过短都无法匹配上刷新频率推荐的最佳循环间隔17ms。 ②MDN指出定时器实际延长时间比设定值长一些。常见的几种情况嵌套超时、非活动标签的超时、追踪型脚本的节流、超时延迟等…一个浏览器的线程队列中任务 这里就不过多赘述可以到以下链接阅读 https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout 其实就是当线程忙碌时定时器会等待线程队列中的任务执行后再执行。 所以定时器动画视觉上看来就是一盹一盹…的效果。
2.requestAnimationFrame
而requestAnimationFrame由浏览器专门为动画提供的 API就是为了解决这类问题提升用户体验的。 且我们切换到其他页面时requestAnimationFrame会暂停下来直到我们回到该页面后动画会从暂停的位置继续执行。
3.应用场景 会用一定卡顿可以到我的github下载代码运行看效果。 https://github.com/wwaini/tao-vue3/tree/release240625
templatediv classbtnel-button clickgoStart开始/el-buttonel-button clickgoEnd停止/el-button/divdiv classa-box定时器/divdiv classb-boxrequestAnimationFrame/div
/template
script setup
import { ref } from vue
let leftNum ref(0)
let flag ref(false) // 定时器动画停止标识
let timmer // 定时器
let animationRef // requestAnimationFrame存储
// 定时器动画事件
const goAStart () {let dom document.getElementsByClassName(a-box)dom[0].style.width 10pxtimmer setInterval(() {leftNum.value parseInt(dom[0].style.width)if (leftNum.value 800 || flag.value) {clearInterval(timmer)} else {dom[0].style.width (leftNum.value 3) pxconsole.log(dom[0].style.width);}}, 17);
}
const goAEnd () {clearInterval(timmer)
}
// requestAnimationFrame动画事件
const goBStart () {let dom document.getElementsByClassName(b-box)dom[0].style.width 10pxconst cb () {leftNum.value parseInt(dom[0].style.width)if (leftNum.value 800) {} else {dom[0].style.width (leftNum.value 3) pxconsole.log(dom[0].style.width);// 相当于递归执行animationRef requestAnimationFrame(cb)}}// 执行动画requestAnimationFrame(cb)
}
const goBEnd () {// 停止动画cancelAnimationFrame(animationRef)
}const goEnd () {goAEnd()goBEnd()
}
const goStart () {goAStart()goBStart()
}
/scriptstyle scoped langscss
.btn {text-align: center;margin-bottom: 20px;
}.a-box {width: 20px;height: 80px;background-color: pink;position: absolute;
}.b-box {width: 20px;height: 80px;background-color: blueviolet;color: #fff;position: absolute;top: 120px;
}
/style4)requestAnimationFrame兼容性
