利用window.requestAnimationFrame实现一组静态图转换gif动图

　　我们平时实现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);