小程序點餐界面添加購物車左右擺動動畫
更新時間：2020年09月23日 16:24:32 作者：王佳斌
這篇文章主要介紹了小程序點餐界面添加購物車左右擺動動畫，當(dāng)用戶點擊添加到購物車后會有一個左右擺動的購物車提示效果，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
效果圖
動畫代碼
這里 只提供圖中購物車動畫代碼，不提供以上點餐界面（需要點餐界面 點擊這里：Gitee倉庫）。
在觸發(fā)代碼中使用 this.cartWwing() 調(diào)用動畫，不理解請訪問教程。
/**
* 點擊商品+號購物車擺動
* @return void
*/
cartWwing: function()
{
// 創(chuàng)建動畫實例(animation)
var animation = wx.createAnimation({
duration: 100,//動畫持續(xù)時間
timingFunction: 'ease-in',//動畫以低速開始
//具體配置項請查看文檔
})
// 通過實例描述對象()
animation.translateX(6).rotate(21).step()
animation.translateX(-6).rotate(-21).step()
animation.translateX(0).rotate(0).step()
// 導(dǎo)出動畫
this.setData({
ani: animation.export()
})
},
總結(jié)
到此這篇關(guān)于小程序點餐界面添加購物車左右擺動動畫的文章就介紹到這了,更多相關(guān)小程序購物車左右擺動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JQuery中serialize() 序列化，十分的細(xì)致全面，推薦給大家，2015-03-03
下面小編就為大家?guī)硪黄猨s 獲取html5的data屬性實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07 
本文為大家介紹下使用setTimeout自動觸發(fā)一個js，具體實現(xiàn)如下，喜歡的朋友可以學(xué)習(xí)下
2014-01-01 
電影院選座基本上每個人都用到過，本文主要介紹了JS實現(xiàn)電影票選座的項目示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04 
面向切面編程給我們提供了一個方法，讓我們可以在不修改目標(biāo)邏輯的情況下，將代碼注入到現(xiàn)有的函數(shù)或?qū)ο笾?。今天通過本文給大家分享JavaScript中的AOP編程的基本實現(xiàn)方法，需要的朋友參考下吧
2021-07-07 
CocosCreator通用框架設(shè)計之網(wǎng)絡(luò)
這篇文章主要介紹了CocosCreator通用框架設(shè)計之網(wǎng)絡(luò)，詳細(xì)講解了WebSocket的原理和使用方法，對WebSocket感興趣的同學(xué)，一定要看一下
2021-04-04 
這段js代碼得節(jié)約你多少時間，學(xué)習(xí)js的朋友可以參考下。
2011-12-12 
這篇文章主要為大家詳細(xì)介紹了javascript+Canvas實現(xiàn)畫板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06 
JavaScript 開發(fā)工具webstrom使用指南
本文給大家推薦了一款非常熱門的javascript開發(fā)工具webstrom,著重介紹了webstrom的特色功能、設(shè)置技巧、使用心得以及快捷鍵匯總，非常的全面。
2014-12-12