微信小程序圖片左右擺動效果詳解
更新時間：2019年07月13日 14:43:49 作者：祈澈菇?jīng)?
這篇文章主要介紹了微信小程序圖片左右擺動效果詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
先看效果，實現(xiàn)一個圖片左右搖動，在一般的H5宣傳頁，商家活動頁面我們會看到這樣的動畫，小程序的動畫效果不同于css3動畫效果，是通過js來完成的，其實步驟很簡單，首先創(chuàng)建動畫實例，再調用實例來描述動畫，最后導出即可。
先看效果如下：
簡單的參考代碼：
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)建動畫實例animation:
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
this.animation = animation
var next = true;
//連續(xù)動畫關鍵步驟
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導出，把動畫數(shù)據(jù)傳遞組件animation的屬性
this.setData({
animation: animation.export()
})
}.bind(this), 300)
},
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了深入理解Promise.all，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
使用TextRange獲取輸入框中光標的位...2006-10-10
ES6中javascript實現(xiàn)函數(shù)綁定及類的事件綁定功能詳解
這篇文章主要介紹了ES6中javascript實現(xiàn)函數(shù)綁定及類的事件綁定功能,結合實例形式分析了ES6中函數(shù)綁定及類的事件綁定原理、實現(xiàn)方法、相關操作技巧與注意事項,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了JS原型和繼承，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Javascript中Microtask和Macrotask鮮為人知的知識點
這篇文章主要為大家介紹了Javascript中Microtask和Macrotask鮮為人知的知識點講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
本文主要介紹了js實現(xiàn)文字超過顯示寬度每間隔1s自動向左滾動顯示的跑馬燈效果，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
在小程序開發(fā)中 經(jīng)常需要我們自定義字體樣式,下面這篇文章主要給大家介紹了關于微信小程序開發(fā)指南之字體樣式設置的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-03-03
微信小程序實現(xiàn)樹莓派（raspberry pi）小車控制
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)樹莓派（raspberry pi）小車控制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
SVG(可縮放矢量圖形)，接下來將介紹下如何判斷瀏覽器是否支持SVG,感興趣的朋友可以參考下哈，希望本代碼對你有所幫助2013-03-03
這篇文章主要介紹了JavaScript中添加監(jiān)聽句柄的方式，監(jiān)聽就是觸發(fā)某事件之后做出的響應,監(jiān)聽句柄是觸發(fā)某相應的條件，下面關于添加監(jiān)聽句柄的方式的詳細內容，需要的朋友可以參考一下，希望對你有所幫助2022-02-02