使用requestAnimationFrame遍历图片实现动画效果

关于MDN的描述 参考

https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame

背景：ui提供了 名称 compress_00001 一直到 compress_00039 共40张图片，需要搞成动画

实现：

  methods:{
picAnimation(){
      this.i += 1
　　　　// 用于循环
      if( this.i > 39){
        this.i = 0
      }
// 页面创建 一个div 用于存放图片
      let aniEle = document.getElementsByClassName('animation')[0]
      let img 
      if(this.i < 10){
        img   = require(`../../assets/compress/compress_0000${this.i}.png`)
      }else{
        img   = require(`../../assets/compress/compress_000${this.i}.png`)
      }
      aniEle.style.backgroundImage =`url(${img})`
      aniEle.style.backgroundRepeat =`no-repeat`  
      window.requestAnimationFrame(this.picAnimation.bind(this))
    }
},
  mounted(){
     window.requestAnimationFrame(this.picAnimation.bind(this))
  }