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