您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)html5小程序飛入購物車的示例分析的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
思考如果實(shí)現(xiàn) ? 超級簡單的!
無論是小程序還是h6飛入購物車無非就是 平拋 ,或者是 上拋 兩種情況,對于這兩種情況,初中就開始學(xué)習(xí)拋物線理論知識是完全可以搞定的,高中一年級物理學(xué)的自由落體運(yùn)動,平拋運(yùn)動就是拋物線理論的具體實(shí)現(xiàn)。
平拋運(yùn)動
上拋運(yùn)動
構(gòu)建虛擬直角坐標(biāo)系,拋物線繪制軌跡點(diǎn)
此方案的本質(zhì)就是,根據(jù)購物車起點(diǎn)和終點(diǎn),分別做為拋物線的兩點(diǎn),這樣一個感念就是要以起始點(diǎn)作為直角坐標(biāo)系(0,0)方便后續(xù)其他坐標(biāo)點(diǎn)的運(yùn)算。還有一個應(yīng)該注意的是,如果是配置了上拋h偏移量 ,就要求最高點(diǎn)(頂點(diǎn))坐標(biāo) 此方案均適合 H5 ,小程序
/** * 飛入購物車,軌跡點(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)動) (可選) * @param {number} hclientX 當(dāng)存在h情況下,達(dá)到最高點(diǎn)時候的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 的情況,拋物線會y軸向上偏移 h, 此時的關(guān)系式 y = ax^2 + bx 2 當(dāng)不存在h 的情況 ,拋物線startPoint為頂點(diǎn), 此時關(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)橐话阗徫镘嚨那闆r都是向下,實(shí)際上我們購物車的坐標(biāo)系是反向的,所以我們這里要把h 設(shè)置成負(fù)值 */ h = -h /* 一元二次求解a,b ,現(xiàn)在知道一點(diǎn) ( xB , yB ) 另外一點(diǎn) ( maxHx,h ) */ /* 有效達(dá)到最高點(diǎn)時候的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 帶入其中一個求解 b */ b = (yB - a * Math.pow(xB, 2)) / xB } } /* 軌跡數(shù)組 */ const travelList = [] /* x 均等分 */ const averageX = (xB - xA) / point /* 處理直線運(yùn)動 */ 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的絕對值小于10的情況,我們看作Y軸直線運(yùn)功 */ if (Math.abs(xB) < 10) { return handerLinearMotion('X') } /*當(dāng) yB的絕對值小于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
效果
小程序h6飛入購物車組件?
這里可以把這個方案和組件聯(lián)系到一起,于是乎飛入購物車組件就搞定了,這里大家要記住的點(diǎn)
1此方案得到的是拋物線各點(diǎn)的left,top值,我們只需要定時改變飛入購物車的圖片的left值 ,top就可以 2可以通過計(jì)數(shù)器功能來改變縮放比,說白了就是改變圖片transform:scale值 3不要忘記給圖片加上fixed固定定位哦:smile::smile::smile: 主要demo方法(僅供參考)
startCart(){ /* 開啟購物車 */ /* this.start 儲存起始點(diǎn) clientY clientY ,this.end儲存最終點(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) }
這里只做了 原生小程序飛入購物車組件 ,h6大致差別不大。
感謝各位的閱讀!關(guān)于“html5小程序飛入購物車的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。