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

先看效果，实现一个画面左右晃动。我们会在一般的H5宣传页和商业活动页上看到这样的动画。小程序的动画效果与css3动画不同，是由js完成的。其实步骤很简单。首先创建一个动画实例，然后调用实例描述动画，最后导出。

看效果如下：

简单参考代码：

wxml:

image class=' img ' src=' http :http://int mote.com/picture/gift . png ' animation=' { { animation } } '/imagecss:img { width: 120rpxheight: 120rpxmargin:300rpx}js

page({ data : { animation : }，}，onLoad: function () { }，OnSow : function(){//1: create animation instance animation : var animation=wx。创建动画({持续时间3360 500，定时功能：' ease '，})这个。动画=动画var next=true//连续动画的关键步骤set interval(function(){//2:调用动画实例方法来描述动画if(next){ animation . translatex(4))。step()；动画。旋转(19)。step() next=！接下来；} else { animation.translateX(-4)。step()；动画.旋转(-19)。step() next=！接下来；} //3:导出动画，并将动画数据传输到属性this。setdata({ animation : animation。export ()})}。bind (this)，300)}，})以上就是本文的全部内容，希望对大家的学习有所帮助，支持我们。