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

微信(小程序)  /  管理员 发布于 3年前   427

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

先看效果如下：

简单的参考代码：

wxml:

css：

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

js

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

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

您可能感兴趣的文章:

• 微信小程序从注册账号到上架（图文详解）
• 微信小程序页面上下滚动效果
• 微信小程序wx.navigateTo中events属性实现页面间通信传值，数据同步
• 微信小程序Echarts覆盖正常组件问题解决
• 微信小程序在线客服自动回复功能(基于node)
• 微信小程序如何获取群聊的openGid以及名称详解