小程序點餐界面添加購物車左右擺動動畫
更新時間：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)文章
iview?date-picker?options只可選當(dāng)前日期之前的(當(dāng)前之后的禁用)
如果日期對象date的時間戳大于當(dāng)前時間的時間戳,則該日期在當(dāng)前日期之后,會被禁用,下面通過實例代碼給大家介紹iview?date-picker?options只可選當(dāng)前日期之前的,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要介紹了JSON與js對象序列化,結(jié)合實例形式詳細(xì)分析了JavaScript與JSON序列化操作的相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2017-03-03
這篇文章主要幫助大家輕松掌握J(rèn)avaScript裝飾者模式，告訴大家什么是js裝飾者模式，感興趣的小伙伴們可以參考一下2016-08-08
跟我學(xué)習(xí)javascript的循環(huán)
跟我學(xué)習(xí)javascript的循環(huán)，本文不僅針對javascript循環(huán)進(jìn)行講解，還對prototype補(bǔ)充了幾點小tips，歡迎大家閱讀。2015-11-11
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個簡單的搖色子游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01
在一些小程序的開發(fā)場景中經(jīng)常會有語音轉(zhuǎn)文字的需求，今天小編通過實際案例給大家分享微信小程序語音同步智能識別功能，需要的朋友可以參考下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用法實現(xiàn)工程自動化的方法
這篇文章主要介紹了webpack的 rquire.context用法實現(xiàn)工程自動化的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
兼容IE,firefox的獲取節(jié)點的文本值的javascript代碼
javascript獲取節(jié)點的文本值，已經(jīng)考慮了兼容性。大家可以放心使用。注意了這里的兼容沒有使用innerText,如果要使用兼容innerText,請參考腳本之家以前發(fā)布的文章。2009-12-12
列舉所有的方式，看看各瀏覽器的支持差異。方便用js動態(tài)設(shè)置元素css的代碼。需要的朋友可以參考下。2011-08-08