大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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
知乎：寸头男生
我会持续的编程干货。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/183748.html原文链接：https://javaforall.net
