先看效果，實(shí)現(xiàn)一個(gè)圖片左右搖動，在一般的H5宣傳頁，商家活動頁面我們會看到這樣的動畫，小程序的動畫效果不同于css3動畫效果，是通過js來完成的，其實(shí)步驟很簡單，首先創(chuàng)建動畫實(shí)例，再調(diào)用實(shí)例來描述動畫，最后導(dǎo)出即可。

先看效果如下：

簡單的參考代碼：

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: 創(chuàng)建動畫實(shí)例animation:  var animation = wx.createAnimation({   duration: 500,   timingFunction: 'ease',  })  this.animation = animation  var next = true;  //連續(xù)動畫關(guān)鍵步驟  setInterval(function () {   //2: 調(diào)用動畫實(shí)例方法來描述動畫   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導(dǎo)出，把動畫數(shù)據(jù)傳遞組件animation的屬性    this.setData({    animation: animation.export()   })  }.bind(this), 300) },})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長站。