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