阅读 120

js动画requestAnimationFrame详解

看这篇文章之前我希望你会用setTimeout做简单的动画,也就是利用递归来代替setInterval做动画。

requestAnimationFrame() 他的作用就是代替定时器做更加流畅高性能的动画,做可以匹配设备刷新率的动画,他解决了定时器做动画时间间隔不稳定的问题(也就是解决定时器做动画不流畅的问题)。他的用法与setTimeout差不多。

与setTimeout一样的是都会返回一个唯一标识,setTimeout可以通过clearTImeout()关闭定时器。那么requestAnimationFrame()使用的就是cancelAnimationFrame()关闭动画。

不同的是这个方法你只需要传入一个回调函数,不需要其他参数,那么你就疑惑了不用指定时间间隔怎么做动画??

时间间隔自然是有的,但时间间隔由设备的系统决定(不受其他任务的影响)。通常来你传入的回调函数每秒会执行60次,但是如果你的设备的游览器遵循W3c的标准,那么回到函数每秒执行的次数会与你设备的刷新率相匹配。不仅如此这还是一个高性能的方法,在大多游览器中一旦页面不处于浏览器的当前标签,就会自动停止动画。

如果我们使用定时器setTimeout做动画,我们假设显示器的刷新率为60hz(60hz指的是每秒1播放60张动画)。为了让动画显示流畅,我们需要将定时器setTimeout的间隔时间定位 **“1000/60” ** 也就1秒执行60次回调函数,大约每隔16.67毫秒会执行一次,这样就能匹配显示屏的帧率。看似好像完美匹配了其实还会有卡顿问题,因为定时器属于宏任务,而宏任务必须等待同步任务执行完成,再等微任务执行完成才会执行其中的回调函数(任务队列、回调函数看这篇文章,这里不详细讲解),所以你规定的时间间隔是不稳定不准确的。

下面演示元素横移的动画,对比requestAnimationFrame与setTimeout的用法。

setTimeout() 做元素横移动画:

const box = document.querySelector('.box');
let move;
let timer = setTimeout(function fn() {
	move = parseInt(getComputedStyle(box).left);
	if (move < 800) {
		box.style.left = move + 8 + 'px';
		setTimeout(fn, 1000/60);
	} else {
		clearTimeout(timer);
	}
}, 1000/60);
复制代码

requestAnimationFrame() 做元素横移动画:

const box = document.querySelector('.box');
let move;
let timer = requestAnimationFrame(function fn() {
	move = parseInt(getComputedStyle(box).left);
	if (move < 800) {
		box.style.left = move + 8 + 'px';
		requestAnimationFrame(fn);
	} else {
		cancelAnimationFrame(timer);
	}
});
复制代码

了解了基本的用法你就可以使用requestAnimationFrame()来做动画了

如果你担心兼容性问题,可以使用如下做法(这里引用的是阮一峰大神的代码

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();
复制代码

总结:

  • requestAnimationFrame() 可以自动匹配设备帧率来展示动画(120帧就每秒执行120次)。
  • 高性能且不会出现动画卡顿
  • 会有游览器兼容问题

总结这篇文章的原因是最近在写一个vue项目的需要实现点击回到顶部的功能,由于是移动端的项目,移动端的设备刷新率不能统一,于是就用到了这个api,然后发现是真的香!!我已经将回到顶部的功能封装成了一个组件(组件源码点这里),在学习vue的小伙伴可以去参考下我的代码,也希望各位大神给点建议。

感兴趣还可以关注我的:

cnsd:m0_46217225

掘金:寸头男生

github:Buzz_cut

微信公众号:web_mycode

知乎:寸头男生

我的QQ:2356924146

我会持续的编程干货。

文章分类
前端
文章标签