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

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

},

})

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