微信小程序圖片左右擺動(dòng)效果詳解
更新時(shí)間：2019年07月13日 14:43:49 作者：祈澈菇?jīng)?
這篇文章主要介紹了微信小程序圖片左右擺動(dòng)效果詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
先看效果，實(shí)現(xiàn)一個(gè)圖片左右搖動(dòng)，在一般的H5宣傳頁，商家活動(dòng)頁面我們會(huì)看到這樣的動(dòng)畫，小程序的動(dòng)畫效果不同于css3動(dòng)畫效果，是通過js來完成的，其實(shí)步驟很簡(jiǎn)單，首先創(chuàng)建動(dòng)畫實(shí)例，再調(diào)用實(shí)例來描述動(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í)例方法來描述動(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)文章
JavaScript事件循環(huán)是一種機(jī)制，用于處理異步事件和回調(diào)函數(shù)。它是JavaScript運(yùn)行時(shí)環(huán)境的一部分，負(fù)責(zé)管理事件隊(duì)列和調(diào)用棧。文章中有詳細(xì)的代碼示例，需要的朋友可以參考一下2023-04-04
淺談JavaScript中Date(日期對(duì)象),Math對(duì)象
這篇文章主要簡(jiǎn)單介紹了JavaScript中Date(日期對(duì)象),Math對(duì)象的相關(guān)資料,需要的朋友可以參考下2015-02-02
javascript實(shí)現(xiàn)圖片預(yù)加載和懶加載
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)圖片預(yù)加載和懶加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
本文主要分享了canvas實(shí)現(xiàn)雪花效果的核心代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了JS冒泡排序的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
代碼規(guī)范需要防微杜漸code?review6個(gè)小錯(cuò)誤糾正
這篇文章主要為大家介紹了代碼規(guī)范需要防微杜漸code?review中的6個(gè)小錯(cuò)誤糾正，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
js實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
微信小程序開發(fā)之實(shí)現(xiàn)搖色子游戲
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡(jiǎn)單的搖色子游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01
JS+JSP checkBox 全選具體實(shí)現(xiàn)
本文為大家介紹下使用JS+JSP實(shí)現(xiàn)checkBox全選，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2014-01-01
有趣的script標(biāo)簽用getAttribute方法來自腳本吧
有趣的script標(biāo)簽用getAttribute方法來自腳本吧...2007-03-03