效果圖

動畫程式碼

這裡 只提供圖中購物車動畫程式碼，不提供以上點餐介面（需要點餐介面 點選這裡：Gitee倉庫）。

在觸發程式碼中使用 this.cartWwing() 呼叫動畫，不理解請訪問教程。

/**
 * 點選商品+號購物車擺動
 * @return void 
 */
cartWwing: function()
{

 // 建立動畫例項(animation)
 var animation = wx.createAnimation({
 duration: 100,//動畫持續時間
 timingFunction: 'ease-in',//動畫以低速開始
 //具體配置項請檢視文件
 })

 // 通過例項描述物件()
 animation.translateX(6).rotate(21).step()
 animation.translateX(-6).rotate(-21).step()
 animation.translateX(0).rotate(0).step()

 // 匯出動畫
 this.setData({
 ani: animation.export()
 })

},

總結

到此這篇關於小程式點餐介面新增購物車左右擺動動畫的文章就介紹到這了,更多相關小程式購物車左右擺動內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！