js用多张图片实现gif图效果 - WXOPEN Club

wxml

<image class='img' src='{{gifimg[i].img}}'/>

const app = getApp()

Page({

data: {

gifimg:[

{ 'id': 0, 'img':'../img/1.jpg'},

{ 'id': 1, 'img': '../img/2.jpg' },

{ 'id': 2, 'img': '../img/3.jpg' },

{ 'id': 3, 'img': '../img/4.jpg' },

{ 'id': 4, 'img': '../img/5.jpg' },

{ 'id': 5, 'img': '../img/6.jpg' },

{ 'id': 6, 'img': '../img/7.jpg' },

{ 'id': 7, 'img': '../img/8.jpg' },

{ 'id': 8, 'img': '../img/9.jpg' },

],

gif_time:null,

i:0

},

onLoad: function () {

this.gif()

},

gif: function () {

var that = this;

var a = 0;

that.data.gif_time = setInterval(function () {

a = a % 9;

a++;

if (a >9) {

clearInterval(that.data.gif_time)

that.setData({

gif_time: null

})

}

that.setData({

i: a

})

}, 100)

},

})

这种我做过!如果需要动画效果好,帧数就比较多,然而图片也就比较多,会有一闪一闪的问题,图片几张少就没什么问题

可以用google用过的方法，放在一张图里