JS 动画 之 setInterval、requestAnimationFram

帧率：一秒中内页面刷新的次数，一般为60FPS，每一帧的时间是1000/60=16.67ms

setInterval

 当我们使用setInterval做动画时，有两点会影响动画效果

1.  由于setInterval是异步任务（宏任务），会放到异步队列最后去执行，所以当页面主线程有任务执行时，是不会执行setInterval的回调函数的
2.  setInterval我们可以自定义动画的间隔时间，但是 setInterval的间隔时间是固定的，且每台电脑的页面也是不一样的。如果我们设置10ms执行一次动画，而画面是16.67ms刷新一次，那么在第一帧时，回调函数执行了一次，在第二帧时，回调函数已经执行了三次，所以可能会丢失回调函数的执行结果

 requestAnimationFram

1. requestAnimationFram的间隔时间是由浏览器去决定的，它会在浏览此下一次重绘之前执行你的回调函数，所以不用担心动画丢失
2. 在大多数浏览器里，当requestAnimationFram运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFram会被暂停调用，这样会节约性能

用法

window.requestAnimationFram(callback),需要不断调用才能继续动画

参数：callback，重绘之前更新动画执行的函数，回调函数会被传入DOMHighResTimeStamp参数，表示当前时间戳（毫秒）

返回值：id，可以传值给window.cancelAnimationFrame(id)取消回调事件

<template><div id="home"><div id="animation" >1</div></div>
</template><script>
export default {name: "",data() {return {left: 0};},mounted() {this.addAnimation()},methods: {addAnimation() {this.left++;let dom = document.getElementById('animation')dom.style.left = `${this.left}px`window.requestAnimationFrame(this.addAnimation)},},
};
</script><style scoped>
#home{position:relative;
}
#animation{color: red;position:absolute;left:0px;
}
</style>