废话不多说，直接上图上代码！！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>requestAnimationFrame</title>
<style type="text/css">
#animate{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="root">
<div id="animate"></div>
</div>
<script type="text/javascript">
// window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
// 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
// 语法：window.requestAnimationFrame(callback);
// HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。
// 另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次;
let el = document.getElementById('animate'),
flag= true,
left = 0,
requestAnimationFrameId = null
function loop() {
if(flag === true){
if(left >= 200){
flag = false
}
el.style.left = ` ${left ++}px`
}else{
if(left <= 0){
flag = true
}
el.style.left = ` ${left --}px`
}
}
//requestAnimationFrame效果
(function animloop() {
loop();
requestAnimationFrameId = requestAnimationFrame(animloop);
//如果left等于150 停止动画
// if(left === 150){
// cancelAnimationFrame(requestAnimationFrameId)
// }
})();
//setInterval效果
// setInterval(function(){
// loop()
// },1000/60)
</script>
</body>
</html>
以上demo代码直接跑，即可演示requestAnimationFrame；
转载注明出处，谢谢合作！！！