實現加入購物車拋物線效果

寫在前面

最近天氣剛剛轉熱，心想應該淘點春裝賣賣騷了，而後某寶逛的時候發現其加入購物車的動畫效果不錯，既完善了交互，又有功能導向做用，用戶體驗槓槓滴～做爲一名前端汪，也想本身動手實現下此類酷炫的效果。抽空寫了個demo，雖然完成的效果比較粗糙，可是擁有毛坯房總好過租房吧哈哈，往後再完善不遲。如今講講本身的經驗，順便理理思路，加深印象：）

準備開始

開始只是在紙上做了草圖，構思了下，才發現若是要一步到位實現像淘寶那樣，有升有降，有快有慢的效果，仍是比較吃力的，也比較花時間。因此，本文只是實現一個勻速的，單方向下落的拋物線效果。

原理

y = ax² + bx + c

既然是做拋物線運動，想必這個公式你應該很是熟悉了。其實全部有規律的曲線運動，都符合某一種定律，那就是前輩總結的數學公式；想當年數學老師說的「學好數理化，走遍天下都不怕」，不是沒有道理。

簡單回憶下拋物線公式，其中的a,b,c三個參數爲常量，標誌着每條拋物線的特性:

1. a的正負表示拋物線的開口方向,正表示向上,負表示向下,a的大小反應拋物線的開口大小,a絕對值越大開口越小拋物線越陡；

2. b再除以負的兩倍的a,就獲得了拋物線的對稱軸橫座標；-b加上c爲拋物線的準線的縱座標；

3. c固然就是截距了,就是拋物線在y軸上的橫座標；

分析

由於咱們只能獲取商品位置和購物車位置兩個座標，若想以兩個座標位置求取三個未知參數abc顯然是不可取的，因此爲了實現初步簡單的效果，咱們假設拋物線通過原點(0,0), 此時c爲0，這樣就能夠計算a和b了，運用初中數學知識就能夠完美解決~

簡單歸納下思路：

1. 獲取商品位置和購物車位置的座標；注意咱們的座標系Y軸向下爲正（符合網頁的座標系）

2. 點擊商品時候加入購物車，執行函數中應該在body中建立一個div dom(運動點)，給它添加各類style， 而後起始座標爲商品按鈕的右側中點(稍加計算)，終點爲購物車按鈕的位置座標

3. 添加計時器，若是運動點的x座標小於終點x座標，則其自身每次執行循環自加必定像素，而y軸根據咱們計算出的a、b值和x計算得出。

4. 達到終點後（運動點x等於購物車位置座標x）後清空計時器，移除運動點dom

實踐

其實在coding過程當中，感受有點阻礙的是計算a,b的值（由於之前學的數學知識都還給老師了-。-）,廢話很少說，仍是show you the code 吧~

<iframe height='190' scrolling='no' title='gwcpwx' src='//codepen.io/BenjaminShih/embed/mRZMPp/?height=190&theme-id=light&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen gwcpwx by junnan shi (@BenjaminShih) on CodePen.
</iframe>

基本功能是實現了，可是後期須要有更多的優化，好比說假如貝塞爾函數控制速度的快慢，將單一方向運動改成上拋曲線運動等等，視覺效果和用戶體驗更好，本文暫時就闡述到此，下一章將會加入優化~