定时器实现动画
正常实现动画可以使用css3的transition/animation/translate,但是css3实现动画只能实现一些简单的动画不能实现比较复杂的动画,比如要根据一些变量去实现动画,如果是通过js实现的动画就要使用到定时器,设定每次移动的步长,根据定位(position)和它的left/top...实现它的移动,但是使用定时器有它的缺点
定时器实现动画缺点
使用定时器会出现抖动或卡顿的情况 抖动:以60hz的页面刷新频率来计算,也就是每隔16.7ms屏幕图象显示一次,但是定时器的间隔时间不是与刷新的时间相匹配的可能在它下次刷新之前定时器执行元素移动,但是并没有显示出来,这就出现了丢帧的效果 卡顿:因为定时器是宏任务所以不一定时间到了就执行,他还会等待主线程和微任务执行完毕,所以就会出现运动不流畅卡顿的情况
requestAnimationFrame
const timer=requestAnimationFram(func)通过这个方法可以实现在屏幕图像刷新时执行传入的方法,调用一次会在下次屏幕刷新时执行,可通过cancelAnimationFram(timer)取消这次执行
优点
- 他会在页面隐藏或者最小化的时候停止执行在页面显示出来的时候接着在屏幕刷新的时候执行
- 他会把这一次执行的方法中改变的样式一起渲染,减少回流和重绘的次数
- 执行时间就是每次屏幕刷新的时候
