189 8069 5689

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

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

创新互联公司主要业务有网站营销策划、成都做网站、网站制作、成都外贸网站建设、微信公众号开发、小程序制作、H5建站、程序开发等业务。一次合作终身朋友，是我们奉行的宗旨；我们不仅仅把客户当客户，还把客户视为我们的合作伙伴，在开展业务的过程中，公司还积累了丰富的行业经验、成都营销网站建设资源和合作伙伴关系资源，并逐渐建立起规范的客户服务和保障体系。 

先看效果如下：

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

简单的参考代码：

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

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


当前标题：微信小程序图片左右摆动效果详解
本文路径：http://cdxtjz.cn/article/jejogd.html

其他资讯