小程序購物車拋物線動畫(通用)


說明:  之前用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)獲取到點后,一切就由你控制了,因為我的數組是從購物車往點擊的點走的,所以我的數組是從最后面取數

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM