溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
先看效果，實現一個圖片左右搖動，在一般的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)
},
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
