小程序图片左右摆动效果

先看效果，实现一个图片左右摇动，在一般的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;
}

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

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。