vue实现多张图片切换形成动画效果

分享一下工作中遇到的问题以及解决办法，让后面的人少走弯路

写在前面

如何实现让多张静态的图片形成动态的效果呢，网上找了找，大多是使用帧动画，但是看了之后发现不适合，UI也不好做图。因为帧动画基本就是几张图片，那超过一百张图片就不适用了。网上找了半天，终于找到了思路，就是使用setInterval，让图片动起来，分享给你们。但是，但是，但是，多张图片造成的页面加载时间问题，希望你提前考虑清楚。

具体实现

我是基于vue写的，但是其他也是可以用的
js代码

start() {
      let _this = this;
      let n = 0;
      function say() {
        _this.imgUrl = require("../../assets/img/插图00" + n + ".png");
        n = n + 1;
        if (n > 200) {
          clearInterval(abc);	//停止
        }
      }
      let abc = setInterval(say, 50);
    },

html

<img src="../../assets/img/插图00.png">

其实很简单，就是一种思路而已。
最后提醒一句，静态资源加载多了会造成页面加载慢，所以谨慎使用这个方法。让UI给直接做视频吧。