[發明專利]一種基于微信小程序平臺添加到購物車拋物線動畫的方法

在審

• 申請號: 201810327601.1
• 申請日: 2018-04-12
• 公開（公告）號: CN108446118A
• 公開（公告）日: 2018-08-24
• 發明（設計）人: 陳林;張來卿;龐嚴冬
• 申請（專利權）人: 珠海橫琴盛達兆業科技投資有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 暫無信息
• 代理人: 暫無信息

1.一種基于微信小程序平臺商品添加到購物車時出現拋物線動畫效果的實現方法，其特征在于：在點擊右側添加商品購物車時，獲得點擊的位置及小球所在頁面的位置及小球要運行到的位置，并把定義的小球在后臺運行到點擊的位置并顯示，然后根據運行中x的值按公式（y = a * x*x + b*x +c）取得y的值，其中a、b、c的值可根據起始點與結束點計算出來，最后使用left與top動畫運行小球即可形成拋物線軌跡；從而解決了基于微信小程序平臺商品添加到購物車時沒有形象的拋物線運行軌跡的動畫效果的問題。

2.根據權利要求1所述的解決了基于微信小程序平臺商品添加到購物車時沒有一種形象的按拋物線軌跡運行的動畫效果的添加問題，其特征在于：所述的方法具體包括如下步驟：

步驟一、在微信小程序項目中創建一個商品列表頁面，在js文件中data里定義數據變量carts[]，在onload方法里通過請求服務獲得數據并設值到carts中；

步驟二、在商品列表頁面每個item里都添加購物車按鈕圖標并綁定事件addToCart；

步驟三、同時在商品列表頁面最后位置添加小球View控件，初始時不可見，增加動畫animation、left及top動態屬性，并在js文件中data里定義；

步驟四、在js文件中定義方法addToCart，并獲得當前item所在位置的索引，根據索引及carts可獲得當前的item；

步驟五、初始化小球動畫animation相關屬性;

步驟六、另寫一個函數startAnim來實現拋物線軌跡動畫效果，每次開始動畫前小球運行到當前的點擊位置，然后開始相關的拋物線軌跡動畫;

步驟七、動畫結束后，把item添加到carts中并增加數量，最后更新遠程服務器，完成添加功能。