requestAnimationFrame简单用法
面试题：用js实现一个无限循环的动画。
首先想到的是定时器
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="aaa"></div>
<script>
let a = aaa;
let flag = true;
let left = 0;
function renders() {
if(flag){
left >= 100 && (flag = false)
a.style.left = ` ${left++}px`
} else {
left <= 0 && (flag = true)
a.style.left = ` ${left--}px`
}
}
setInterval(function(){
renders()
},1000/60) // 时间间隔是1000/60,因为大多数屏幕渲染的时间间隔是每秒60帧。
</script>
</body>
<style>
#aaa{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</html>
可以实现
既然setInterval可以搞定为啥还要用requestAnimationFrame呢？
requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
代码如下：
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="aaa"></div>
<script>
let a = aaa;
let flag = true;
let left = 0;
function renders() {
if(flag){
left >= 100 && (flag = false)
a.style.left = ` ${left++}px`
} else {
left <= 0 && (flag = true)
a.style.left = ` ${left--}px`
}
}
//requestAnimationFrame效果
(function animateloop() {
render();
window.requestAnimationFrame(animloop);
})();
</script>
</body>
<style>
#aaa{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</html>
各个浏览器的兼容写法自己处理。
有两个问题。
1、如何停止requestAnimationFrame呢？是否也有类似clearInterval这样的类似方法？
第一个问题：答案是有的：
cancelAnimationFrame()方法接收一个参数。
requestAnimationFrame默认返回一个id，cancelAnimationFrame只需要传入这个id就可以停止了。
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="aaa"></div>
<script>
let a = aaa;
let flag = true;
let left = 0;
let id = null
function renders() {
if(flag){
left >= 100 && (flag = false)
a.style.left = ` ${left++}px`
} else {
left <= 0 && (flag = true)
a.style.left = ` ${left--}px`
}
}
(function animateloop(time) {
renders();
id = requestAnimationFrame(animloop);
if (left == 50) {//如果left等于50 停止动画
cancelAnimationFrame(id )
}
})();
</script>
</body>
<style>
#aaa{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</html>
2、如果我想动画频率降低怎么做，为什么不考虑加快？
默认情况下，requestAnimationFrame执行频率是1000/60,大概是16.6ms多执一次。
如果我们想每50ms执行一次怎么办呢？
requestAnimationFrame执行条件类似递归调用 ,既然这样的话我们能否自定一个时间间隔再执行呢？，
解决方案:
当和服务端通信时 记录下一个时间差，（时间差等于服务端时间-本地时间）不管正负我们只要这个时间差。这样每当我们接受到消息 或者发送消息的时候我们就拿本地时间和是价差相加。这样就可以保证和服务端时间是一致的了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="aaa"></div>
<script >
const a = aaa
const flag = true;
let left = 0;
let id = null;
// 当前执行时间
let nowTime = 0;
// 记录每次动画执行结束的时间
let lastTime = Date.now();
// 我们自己定义的动画时间差值
let diffTime = 40;
function renders() {
if(flag){
left >= 100 && (flag = false)
a.style.left = ` ${left++}px`
} else {
left <= 0 && (flag = true)
a.style.left = ` ${left--}px`
}
}
(function animateloop(time) {
nowTime = Date.now();// 记录当前时间
console.log(Date.now());
// 当前时间 - 上次执行时间如果大于diffTime，那么执行那个动画，并更新上次执行时间
if (nowTime - lastTime > diffTime) {
lastTime = nowTime
render();
}
requestAnimationFrame(animateloop);
})();
</script>
</body>
<style>
#aaa{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</html>
————————————————
版权声明：本文为CSDN博主「胜玲龙」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40184218/article/details/124345131
浙公网安备 33010602011771号