快捷導(dǎo)航

小程序點(diǎn)餐界面添加購(gòu)物車(chē)左右擺動(dòng)動(dòng)畫(huà)

更新時(shí)間：2020年09月23日 16:24:32 作者：王佳斌

這篇文章主要介紹了小程序點(diǎn)餐界面添加購(gòu)物車(chē)左右擺動(dòng)動(dòng)畫(huà)，當(dāng)用戶(hù)點(diǎn)擊添加到購(gòu)物車(chē)后會(huì)有一個(gè)左右擺動(dòng)的購(gòu)物車(chē)提示效果，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

效果圖

在這里插入圖片描述

動(dòng)畫(huà)代碼

這里 只提供圖中購(gòu)物車(chē)動(dòng)畫(huà)代碼，不提供以上點(diǎn)餐界面（需要點(diǎn)餐界面點(diǎn)擊這里：Gitee倉(cāng)庫(kù)）。

在觸發(fā)代碼中使用 this.cartWwing() 調(diào)用動(dòng)畫(huà)，不理解請(qǐng)?jiān)L問(wèn)教程。

/**
 * 點(diǎn)擊商品+號(hào)購(gòu)物車(chē)擺動(dòng)
 * @return void 
 */
cartWwing: function()
{

 // 創(chuàng)建動(dòng)畫(huà)實(shí)例(animation)
 var animation = wx.createAnimation({
 duration: 100,//動(dòng)畫(huà)持續(xù)時(shí)間
 timingFunction: 'ease-in',//動(dòng)畫(huà)以低速開(kāi)始
 //具體配置項(xiàng)請(qǐng)查看文檔
 })

 // 通過(guò)實(shí)例描述對(duì)象()
 animation.translateX(6).rotate(21).step()
 animation.translateX(-6).rotate(-21).step()
 animation.translateX(0).rotate(0).step()

 // 導(dǎo)出動(dòng)畫(huà)
 this.setData({
 ani: animation.export()
 })

},

總結(jié)

到此這篇關(guān)于小程序點(diǎn)餐界面添加購(gòu)物車(chē)左右擺動(dòng)動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)小程序購(gòu)物車(chē)左右擺動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JQuery中serialize() 序列化
這篇文章主要介紹了JQuery中serialize() 序列化，十分的細(xì)致全面，推薦給大家，
2015-03-03
這篇文章主要介紹了javascript操作表格排序,涉及javascript數(shù)組排序與表格操作的相關(guān)技巧,需要的朋友可以參考下
2015-05-05

js 獲取html5的data屬性實(shí)現(xiàn)方法

下面小編就為大家?guī)?lái)一篇js 獲取html5的data屬性實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

2017-07-07

setTimeout自動(dòng)觸發(fā)一個(gè)js的方法

本文為大家介紹下使用setTimeout自動(dòng)觸發(fā)一個(gè)js，具體實(shí)現(xiàn)如下，喜歡的朋友可以學(xué)習(xí)下

2014-01-01

JS實(shí)現(xiàn)電影票選座的項(xiàng)目示例

電影院選座基本上每個(gè)人都用到過(guò)，本文主要介紹了JS實(shí)現(xiàn)電影票選座的項(xiàng)目示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

2022-04-04