js动画requestAnimationFrame详解「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

看这篇文章之前我希望你会用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

我会持续的编程干货。