微信小程序圖片左右擺動效果詳解
更新時間：2019年07月13日 14:43:49 作者：祈澈菇涼
這篇文章主要介紹了微信小程序圖片左右擺動效果詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
先看效果，實現一個圖片左右搖動，在一般的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導出，把動畫數據傳遞組件animation的屬性
this.setData({
animation: animation.export()
})
}.bind(this), 300)
},
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript事件循環(huán)是一種機制，用于處理異步事件和回調函數。它是JavaScript運行時環(huán)境的一部分，負責管理事件隊列和調用棧。文章中有詳細的代碼示例，需要的朋友可以參考一下2023-04-04
淺談JavaScript中Date(日期對象),Math對象
這篇文章主要簡單介紹了JavaScript中Date(日期對象),Math對象的相關資料,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了javascript實現圖片預加載和懶加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
本文主要分享了canvas實現雪花效果的核心代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了JS冒泡排序的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
代碼規(guī)范需要防微杜漸code?review6個小錯誤糾正
這篇文章主要為大家介紹了代碼規(guī)范需要防微杜漸code?review中的6個小錯誤糾正，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家詳細介紹了js實現下拉框二級聯動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的搖色子游戲，文中的示例代碼講解詳細，感興趣的小伙伴可以和小編一起學習一下2023-01-01
本文為大家介紹下使用JS+JSP實現checkBox全選，下面有個不錯的示例，感興趣的朋友可以參考下2014-01-01
有趣的script標簽用getAttribute方法來自腳本吧
有趣的script標簽用getAttribute方法來自腳本吧...2007-03-03