前言：最近有朋友在做小程序的過程中，遇到開發(fā)過飛入購(gòu)物車效果的功能的需求。針對(duì)這個(gè)情況一些網(wǎng)上的demo，多少會(huì)有一些不符合情景的問題（bug）存在，針對(duì)這一情況小編決定幫朋友寫一個(gè)方案來(lái)幫助解決問題。
思考如果實(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 ,小程序
/**
* 飛入購(gòu)物車，軌跡點(diǎn)繪制
* @author 👽
* @param {Array} start`在這里插入代碼片`Point 起點(diǎn)clientX, clientY值 (必要)
* @param {Array} endPoint 終點(diǎn)clientX, clientY值 (必要)
* @param {number} point 點(diǎn)數(shù) (必要)
* @param {number} h 拋物線向上高度(上拋運(yùn)動(dòng)) (可選)
* @param {number} hclientX 當(dāng)存在h情況下，達(dá)到最高點(diǎn)時(shí)候的clientX值
* @return {Array} [ left ,top ] 值組成的數(shù)組
*/
function flycart(startPoint, endPoint, point, h = 0, hclientX) {
/*
設(shè)置startPoint 為(0,0)點(diǎn) , 此拋物線經(jīng)過(0,0)點(diǎn) ，可以推到出模型關(guān)系式 y = ax^2 + bx 或者 y = ax^ 2
1 當(dāng)存在 h 的情況，拋物線會(huì)y軸向上偏移 h, 此時(shí)的關(guān)系式 y = ax^2 + bx
2 當(dāng)不存在h 的情況 ，拋物線startPoint為頂點(diǎn)， 此時(shí)關(guān)系式 y = ax^2
*/
/* 參數(shù)校驗(yàn) */
function Validityparameter() {
let isOkey = true
Array.isArray(startPoint) && startPoint.length !== 2 && (isOkey = false)
Array.isArray(endPoint) && endPoint.length !== 2 && (isOkey = false)
(point.constructor !== Number) && (isOkey = false)
return isOkey
}
/* 參數(shù)驗(yàn)證 */
if (!Validityparameter()) {
return []
}
/* A點(diǎn)橫坐標(biāo) */
const xA = 0
/* A點(diǎn)縱坐標(biāo) */
const yA = 0
/* x軸偏移量 */
const offsetX = startPoint[0]
/* y軸偏移量 */
const offsetY = startPoint[1]
/* B點(diǎn)橫坐標(biāo) */
const xB = endPoint[0] - offsetX
/* B縱坐標(biāo) */
const yB = endPoint[1] - offsetY
/* 根據(jù)B點(diǎn)坐標(biāo)和最大高度h求系數(shù)a,b 參數(shù)*/
let b = 0
let a = 0
/* 計(jì)算系數(shù) a ,b */
function handerComputer() {
if (h < 10) {
a = yB / Math.pow(xB, 2)
} else {
/* 因?yàn)橐话阗?gòu)物車的情況都是向下，實(shí)際上我們購(gòu)物車的坐標(biāo)系是反向的，所以我們這里要把h 設(shè)置成負(fù)值 */
h = -h
/* 一元二次求解a,b ，現(xiàn)在知道一點(diǎn) ( xB , yB ) 另外一點(diǎn) （ maxHx，h ） */
/* 有效達(dá)到最高點(diǎn)時(shí)候的x坐標(biāo) */
const effectMaHx = hclientX && Math.abs(hclientX - offsetX) > 0 && Math.abs(hclientX - offsetX) < Math.abs(xB)
/* 如果hclientX不滿足要求，則選A , B 中點(diǎn)為 */
let maxHx = effectMaHx ? (hclientX - offsetX) : (xB + xA) / 2
/* 已知兩點(diǎn) 求 a , b值 根據(jù)解方程式解得 y = ax^2 + bx */
a = ((yB / xB) - (h / maxHx)) / (xB - maxHx)
/* 將 a 帶入其中一個(gè)求解 b */
b = (yB - a * Math.pow(xB, 2)) / xB
}
}
/* 軌跡數(shù)組 */
const travelList = []
/* x 均等分 */
const averageX = (xB - xA) / point
/* 處理直線運(yùn)動(dòng) */
function handerLinearMotion(type) {
if (type === 'X') {
const averageY = (yB - yA) / point
for (let i = 1; i <= point; i++) {
travelList.push([offsetX, i * averageY + offsetY])
}
} else {
for (let i = 1; i <= point; i++) {
travelList.push([offsetX + i * averageX, offsetY])
}
}
return travelList
}
/* 當(dāng) xB的絕對(duì)值小于10的情況，我們看作Y軸直線運(yùn)功 */
if (Math.abs(xB) < 10) {
return handerLinearMotion('X')
}
/*當(dāng) yB的絕對(duì)值小于10的情況，我們看作x軸直線運(yùn)功 */
if (Math.abs(yB) < 10) {
return handerLinearMotion('Y')
}
handerComputer()
/* 繪制路徑 */
for (let i = 1; i <= point; i++) {
const currentX = averageX * i
const currentY = Math.pow(currentX, 2) * a + b * currentX - yA
travelList.push([currentX + offsetX, currentY + offsetY])
}
return travelList
}
export default flycart
效果
小程序h5飛入購(gòu)物車組件？
這里可以把這個(gè)方案和組件聯(lián)系到一起，于是乎飛入購(gòu)物車組件就搞定了，這里大家要記住的點(diǎn)
1此方案得到的是拋物線各點(diǎn)的left,top值，我們只需要定時(shí)改變飛入購(gòu)物車的圖片的left值 ,top就可以 2可以通過計(jì)數(shù)器功能來(lái)改變縮放比，說(shuō)白了就是改變圖片transform:scale值 3不要忘記給圖片加上fixed固定定位哦:smile::smile::smile: 主要demo方法(僅供參考)
startCart(){
/* 開啟購(gòu)物車 */
/* this.start 儲(chǔ)存起始點(diǎn) clientY clientY ,this.end儲(chǔ)存最終點(diǎn) clientX clientY*/
this.start = {}
this.start['x'] = this.data.current['x']
this.start['y'] = this.data.current['y']
const travelList = flycart([ this.start['x'] , this.start['y'] ] ,[ this.end['x'] , this.end['y'] ],25,50 )
this.startAnimate(travelList)
},
startAnimate(travelList) {
let index = 0
this.setData({
cartHidden: false,
bus_x: this.start['x'],
bus_y: this.start['y']
})
if(travelList.length===0) return
this.timer = setInterval( ()=> {
index++
const currentPoint = travelList.shift()
this.setData({
bus_x: currentPoint[0],
bus_y: currentPoint[1],
scale: 1 - index / 25
})
if (travelList.length === 0) {
clearInterval(this.timer)
this.triggerEvent('close')
}
}, 33)
}
這里只做了 原生小程序飛入購(gòu)物車組件 ，h5大致差別不大。
git地址如下
代碼地址https://github.com/AlienZhaolin/flycart
到此這篇關(guān)于html5小程序飛入購(gòu)物車(拋物線繪制運(yùn)動(dòng)軌跡點(diǎn))的文章就介紹到這了,更多相關(guān)html5飛入購(gòu)物車內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
