我们平时实现js动画效果时离不开setInterval或者setTimeout函数,可是没有办法保证显示频率刷新的时候setInterval的操作正好被执行，制作动画的时候会出现丢帧和动画效果生硬不连贯等情况。
经过一番研究发现requestAnimationFrame可以实现动画效果，改方法执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。具体可以查看api介绍！
let count = 1, app = document.getElementById(‘app‘);
function render() {
if (count > 20) { // 20张静态图片
count = 1; //修改图像的值
}
app.style.backgroundImage = `url(‘./gif_bg/img(${count}).png‘)`;
count ++;
window.requestAnimationFrame(render);
}
//第一帧渲染
window.requestAnimationFrame(render);