属于自己的风景，从来不曾错过；不是自己的风景，永远只是路过。天地太大，人太渺小，不是每一道亮丽的风景都能拥有。一辈子，只求有一道令自己流连忘返，不离不弃的风景就已足够。人生的风景，是物也是人。陪自己到最后的，才是自己的风景。
先看效果，实现一个图片左右摇动，在一般的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)
},
})
以上就是微信小程序图片左右摆动效果详解。也许世间的事，都是那么的千奇百怪，随时随刻都会发生，但你要镇静，可又能镇静得了吗？我们都是俗人，没有什么惊天动地的事情，我们只有这份爱，可又那么的叫人难猜。更多关于微信小程序图片左右摆动效果详解请关注haodaima.com其它相关文章！