說明: 之前用vue css3寫過拋物線動畫,但是小程序中,不支持js操作dom元素,所以你無法用js去去除動畫的css3,導致你無法進行第二次的動畫。
所以,只能用純js去計算運動的路線,再改變小球的位置,這個寫法,估計是沒有什么都通用
實例是:https://github.com/WaitForYou/shopcartBeizer.git
github地址:https://github.com/WaitForYou/shopcartBeizer
目錄結構如下,關於購物車動畫代碼的主要在標記的文件里面
(1)獲取屏幕的高度大小
(2):獲取點擊的位置以及購物車的位置, 再定位第三個點
1、購物車的位置
2、點擊的位置
3、定義一個控制點(一定要讓控制點落在以上兩點之間)
類似如下的圖
(3)傳給beizer函數,以下的寫法則是 返回曲線中的點,點是從購物車 畫到 點擊的地方
(4)獲取到點后,一切就由你控制了,因為我的數組是從購物車往點擊的點走的,所以我的數組是從最后面取數