最近有朋友在做小程序的過(guò)程中，遇到開發(fā)過(guò)飛入購(gòu)物車效果的功能的需求。針對(duì)這個(gè)情況一些網(wǎng)上的demo，多少會(huì)有一些不符合情景的問(wèn)題（bug）存在，針對(duì)這一情況小編決定幫朋友寫一個(gè)方案來(lái)幫助解決問(wèn)題。

思考如果實(shí)現(xiàn) ？ 超級(jí)簡(jiǎn)單的！

無(wú)論是小程序還是h5飛入購(gòu)物車無(wú)非就是平拋 ，或者是上拋兩種情況，對(duì)于這兩種情況，初中就開始學(xué)習(xí)拋物線理論知識(shí)是完全可以搞定的，高中一年級(jí)物理學(xué)的自由落體運(yùn)動(dòng)，平拋運(yùn)動(dòng)就是拋物線理論的具體實(shí)現(xiàn)。

平拋運(yùn)動(dòng)

上拋運(yùn)動(dòng)

構(gòu)建虛擬直角坐標(biāo)系，拋物線繪制軌跡點(diǎn)

此方案的本質(zhì)就是，根據(jù)購(gòu)物車起點(diǎn)和終點(diǎn)，分別做為拋物線的兩點(diǎn)，這樣一個(gè)感念就是要以起始點(diǎn)作為直角坐標(biāo)系（0，0）方便后續(xù)其他坐標(biāo)點(diǎn)的運(yùn)算。還有一個(gè)應(yīng)該注意的是，如果是配置了上拋h偏移量 ，就要求最高點(diǎn)（頂點(diǎn)）坐標(biāo)

此方案均適合 H5 ,小程序