資訊專欄INFORMATION COLUMN
寫在前面
最近天氣剛剛轉熱，心想應該淘點春裝賣賣騷了，然后某寶逛的時候發現其加入購物車的動畫效果不錯，既完善了交互，又有功能導向作用，用戶體驗杠杠滴～作為一名前端汪，也想自己動手實現下此類酷炫的效果。抽空寫了個demo，雖然完成的效果比較粗糙，但是擁有毛坯房總好過租房吧哈哈，日后再完善不遲。現在講講自己的經驗，順便理理思路，加深印象：）
準備開始開始只是在紙上作了草圖，構思了下，才發現如果要一步到位實現像淘寶那樣，有升有降，有快有慢的效果，還是比較吃力的，也比較花時間。所以，本文只是實現一個勻速的，單方向下落的拋物線效果。
原理y = ax2 + bx + c
既然是作拋物線運動，想必這個公式你應該非常熟悉了。其實所有有規律的曲線運動，都符合某一種定律，那就是前輩總結的數學公式；想當年數學老師說的“學好數理化，走遍天下都不怕”，不是沒有道理。
簡單回憶下拋物線公式，其中的a,b,c三個參數為常量，標志著每條拋物線的特性:
a的正負表示拋物線的開口方向,正表示向上,負表示向下,a的大小反應拋物線的開口大小,a絕對值越大開口越小拋物線越陡；
b再除以負的兩倍的a,就得到了拋物線的對稱軸橫坐標；-b加上c為拋物線的準線的縱坐標；
c當然就是截距了,就是拋物線在y軸上的橫坐標；
分析因為我們只能獲取商品位置和購物車位置兩個坐標，若想以兩個坐標位置求取三個未知參數abc顯然是不可取的，所以為了實現初步簡單的效果，我們假設拋物線經過原點(0,0), 此時c為0，這樣就可以計算a和b了，運用初中數學知識就可以完美解決~
簡單概括下思路：
獲取商品位置和購物車位置的坐標；注意我們的坐標系Y軸向下為正（符合網頁的坐標系）
點擊商品時候加入購物車，執行函數中應該在body中創建一個div dom(運動點)，給它添加各種style， 然后起始坐標為商品按鈕的右側中點(稍加計算)，終點為購物車按鈕的位置坐標
添加計時器，如果運動點的x坐標小于終點x坐標，則其自身每次執行循環自加一定像素，而y軸根據我們計算出的a、b值和x計算得出。
達到終點后（運動點x等于購物車位置坐標x）后清空計時器，移除運動點dom
實踐其實在coding過程中，感覺有點阻礙的是計算a,b的值（因為以前學的數學知識都還給老師了-。-）,廢話不多說，還是show you the code 吧~
基本功能是實現了，但是后期需要有更多的優化，比如說假如貝塞爾函數控制速度的快慢，將單一方向運動改為上拋曲線運動等等，視覺效果和用戶體驗更好，本文暫時就闡述到此，下一章將會加入優化~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81979.html
寫在前面 最近天氣剛剛轉熱，心想應該淘點春裝賣賣騷了，然后某寶逛的時候發現其加入購物車的動畫效果不錯，既完善了交互，又有功能導向作用，用戶體驗杠杠滴～作為一名前端汪，也想自己動手實現下此類酷炫的效果。抽空寫了個demo，雖然完成的效果比較粗糙，但是擁有毛坯房總好過租房吧哈哈，日后再完善不遲?，F在講講自己的經驗，順便理理思路，加深印象：） 準備開始 開始只是在紙上作了草圖，構思了下，才發現如果要一步...
摘要：上圖即為歸零后的坐標系，對稱軸直線為在拋物線方程中，值得正負代表著拋物線的開口方向，那么值的絕對值也和拋物線的開口大小有著反比例的關系。 廢話不多說,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源碼~https://github.com/Nelson2016... 運行的原理 很簡單的一個小特效，接下來來說一下他的原理。 顯而易見，這小東西肯定和拋物...
摘要：上圖即為歸零后的坐標系，對稱軸直線為在拋物線方程中，值得正負代表著拋物線的開口方向，那么值的絕對值也和拋物線的開口大小有著反比例的關系。 廢話不多說,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源碼~https://github.com/Nelson2016... 運行的原理 很簡單的一個小特效，接下來來說一下他的原理。 顯而易見，這小東西肯定和拋物...
閱讀 2822·2021-10-13 09:48
閱讀 3785·2021-10-13 09:39
閱讀 3597·2021-09-22 16:04
閱讀 1828·2021-09-03 10:48
閱讀 843·2021-08-03 14:04
閱讀 2363·2019-08-29 15:18
閱讀 3406·2019-08-26 12:19
閱讀 2873·2019-08-26 12:08
