先看效果，實現一個圖片左右搖動，在一般的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) },})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
