评论

js用多张图片实现gif图效果

js用多张图片实现gif图效果

wxml

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

js

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)
  },
})


最后一次编辑于  2019-12-17  
点赞 1
收藏
评论

2 个评论

  •  ㅤ
     ㅤ
    2019-12-18

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

    2019-12-18
    赞同
    回复 1
    • ctzl
      ctzl
      2019-12-18
      是的
      2019-12-18
      回复
  • 祺爸💎
    祺爸💎
    2019-12-17

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

    2019-12-17
    赞同
    回复 5
    • ctzl
      ctzl
      2019-12-17
      好的,大佬
      2019-12-17
      回复
    •  ㅤ
       ㅤ
      2019-12-18
      你说的是精灵图吧??那大图呢??
      2019-12-18
      回复
    • 祺爸💎
      祺爸💎
      2019-12-18回复 ㅤ
      大图是什么意思?
      2019-12-18
      回复
    •  ㅤ
       ㅤ
      2019-12-18回复祺爸💎
      大图就是尺寸都比较大的,可能需要屏幕三分之一的展示,也能做成精灵图???
      2019-12-18
      回复
    • 祺爸💎
      祺爸💎
      2019-12-18回复 ㅤ
      能啊
      2019-12-18
      回复
登录 后发表内容