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

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

浏览量:601 时间: 来源:_那年夏天

 需要一组连续的图片

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

效果

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎