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

写在前面

如何实现让多张静态的图片形成动态的效果呢,网上找了找,大多是使用帧动画,但是看了之后发现不适合,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给直接做视频吧。

Logo

前往低代码交流专区

更多推荐