小程序點(diǎn)餐界面添加購(gòu)物車左右擺動(dòng)動(dòng)畫
更新時(shí)間：2020年09月23日 16:24:32 作者：王佳斌
這篇文章主要介紹了小程序點(diǎn)餐界面添加購(gòu)物車左右擺動(dòng)動(dòng)畫，當(dāng)用戶點(diǎn)擊添加到購(gòu)物車后會(huì)有一個(gè)左右擺動(dòng)的購(gòu)物車提示效果，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
效果圖
動(dòng)畫代碼
這里 只提供圖中購(gòu)物車動(dòng)畫代碼，不提供以上點(diǎn)餐界面（需要點(diǎn)餐界面 點(diǎn)擊這里：Gitee倉(cāng)庫(kù)）。
在觸發(fā)代碼中使用 this.cartWwing() 調(diào)用動(dòng)畫，不理解請(qǐng)?jiān)L問教程。
/**
* 點(diǎn)擊商品+號(hào)購(gòu)物車擺動(dòng)
* @return void
*/
cartWwing: function()
{
// 創(chuàng)建動(dòng)畫實(shí)例(animation)
var animation = wx.createAnimation({
duration: 100,//動(dòng)畫持續(xù)時(shí)間
timingFunction: 'ease-in',//動(dòng)畫以低速開始
//具體配置項(xiàng)請(qǐng)查看文檔
})
// 通過實(shí)例描述對(duì)象()
animation.translateX(6).rotate(21).step()
animation.translateX(-6).rotate(-21).step()
animation.translateX(0).rotate(0).step()
// 導(dǎo)出動(dòng)畫
this.setData({
ani: animation.export()
})
},
總結(jié)
到此這篇關(guān)于小程序點(diǎn)餐界面添加購(gòu)物車左右擺動(dòng)動(dòng)畫的文章就介紹到這了,更多相關(guān)小程序購(gòu)物車左右擺動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
iview?date-picker?options只可選當(dāng)前日期之前的(當(dāng)前之后的禁用)
如果日期對(duì)象date的時(shí)間戳大于當(dāng)前時(shí)間的時(shí)間戳,則該日期在當(dāng)前日期之后,會(huì)被禁用,下面通過實(shí)例代碼給大家介紹iview?date-picker?options只可選當(dāng)前日期之前的,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要介紹了JSON與js對(duì)象序列化,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript與JSON序列化操作的相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2017-03-03
這篇文章主要幫助大家輕松掌握J(rèn)avaScript裝飾者模式，告訴大家什么是js裝飾者模式，感興趣的小伙伴們可以參考一下2016-08-08
跟我學(xué)習(xí)javascript的循環(huán)
跟我學(xué)習(xí)javascript的循環(huán)，本文不僅針對(duì)javascript循環(huán)進(jìn)行講解，還對(duì)prototype補(bǔ)充了幾點(diǎn)小tips，歡迎大家閱讀。2015-11-11
微信小程序開發(fā)之實(shí)現(xiàn)搖色子游戲
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡(jiǎn)單的搖色子游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01
微信小程序語音同步智能識(shí)別的實(shí)現(xiàn)案例代碼解析
在一些小程序的開發(fā)場(chǎng)景中經(jīng)常會(huì)有語音轉(zhuǎn)文字的需求，今天小編通過實(shí)際案例給大家分享微信小程序語音同步智能識(shí)別功能，需要的朋友可以參考下2020-05-05![微信小程序踩坑記錄之解決tabBar.list[3].selectedIconPath大小超過40kb](http://img.jbzj.com/images/xgimg/bcimg6.png)
微信小程序踩坑記錄之解決tabBar.list[3].selectedIconPath大小超過40kb
這篇文章主要給大家介紹了關(guān)于微信小程序踩坑記錄之解決tabBar.list[3].selectedIconPath大小超過40kb的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
webpack的 rquire.context用法實(shí)現(xiàn)工程自動(dòng)化的方法
這篇文章主要介紹了webpack的 rquire.context用法實(shí)現(xiàn)工程自動(dòng)化的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
兼容IE,firefox的獲取節(jié)點(diǎn)的文本值的javascript代碼
javascript獲取節(jié)點(diǎn)的文本值，已經(jīng)考慮了兼容性。大家可以放心使用。注意了這里的兼容沒有使用innerText,如果要使用兼容innerText,請(qǐng)參考腳本之家以前發(fā)布的文章。2009-12-12
列舉所有的方式，看看各瀏覽器的支持差異。方便用js動(dòng)態(tài)設(shè)置元素css的代碼。需要的朋友可以參考下。2011-08-08