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给直接做视频吧。
更多推荐
已为社区贡献1条内容
所有评论(0)