微信小程序帧动画，实现动画效果

 需要一组连续的图片

.wxml 代码

<view>
  <image wx:if="{{i==1}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b3fa8e.jpg'/>
  <image wx:if="{{i==2}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b406e8.jpg'/>
  <image wx:if="{{i==3}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b412dd.jpg'/>
  <image wx:if="{{i==4}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b41dc3.jpg'/>
  <image wx:if="{{i==5}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b427fe.jpg'/>
  <image wx:if="{{i==6}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b43236.jpg'/>
  <image wx:if="{{i==7}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b43c61.jpg'/>
  <image wx:if="{{i==8}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b4468f.jpg'/>
  <image wx:if="{{i==9}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b45108.jpg'/>
  <image wx:if="{{i==10}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b45b0d.jpg'/>
  <image wx:if="{{i==11}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b46561.jpg'/>
  <image wx:if="{{i==12}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b46fa6.jpg'/>
  <image wx:if="{{i==13}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b479cf.jpg'/>
  <image wx:if="{{i==14}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b483d3.jpg'/>
  <image wx:if="{{i==15}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b48e18.jpg'/>
  <image wx:if="{{i==16}}" class='modelImg' src='http://body.youngor.com/body/Public/Upload/Virtual/2019-06-28/5d15de1b498bf.jpg'/>

</view>

我在这使用定时器设置图片显示时间，可以设置左滑，右滑，点击 等等手势

  timers: function (count) {
    var that = this;
    var j = 1;
    that.data.timer = setInterval(function () {
      count++;
      j = j % 16;      
      j++;
      that.setData({
        i: j
      }) 
    }, 50)
  },

效果