微信小程序图片左右摆动效果详解

2020-03-21 15:52:04

字体：大中小

来源：转载

供稿：网友

先看效果，实现一个图片左右摇动，在一般的H5宣传页，商家活动页面我们会看到这样的动画，小程序的动画效果不同于css3动画效果，是通过js来完成的，其实步骤很简单，首先创建动画实例，再调用实例来描述动画，最后导出即可。

先看效果如下：

微信小程序,图片左右摆动

简单的参考代码：

wxml:

<image class='img' src="http://intmote.com/picture/gift.png" animation="{{animation}}"></image>

css：

.img { width: 120rpx; height: 120rpx; margin:300rpx;}

Page({ data: {  animation: {}, }, onLoad: function () { }, onShow: function () {  // 1: 创建动画实例animation:  var animation = wx.createAnimation({   duration: 500,   timingFunction: 'ease',  })  this.animation = animation  var next = true;  //连续动画关键步骤  setInterval(function () {   //2: 调用动画实例方法来描述动画   if (next) {    animation.translateX(4).step();    animation.rotate(19).step()    next = !next;   } else {    animation.translateX(-4).step();    animation.rotate(-19).step()    next = !next;   }   //3: 将动画export导出，把动画数据传递组件animation的属性    this.setData({    animation: animation.export()   })  }.bind(this), 300) },})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VEVB武林网。

上一篇：微信小程序Echarts覆盖正常组件问题解决

下一篇：微信小程序基于Taro的分享图片功能实践详解