小程式點餐介面新增購物車左右擺動動畫

2020-09-24 06:00:27

效果圖

動畫程式碼

這裡 只提供圖中購物車動畫程式碼，不提供以上點餐介面（需要點餐介面點選這裡：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()
 })

},

總結

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

小程式點餐介面新增購物車左右擺動動畫

熱門文章