如何使用html5實現(xiàn)小程序商品飛入購物車？案例分享!

我們在網(wǎng)絡(luò)上進行購物的時候會看到在不同的平臺中我們可以看到在點擊商品的時候我們可以看到商品的小圖標(biāo)飛到我們的購物車中，那么今天小編就來和大家說說有關(guān)于：“如何使用html5實現(xiàn)小程序商品飛入購物車？”這個問題的相關(guān)內(nèi)容和解決方法！

思考如果實現(xiàn) ？ 超級簡單的！

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

平拋運動

上拋運動

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

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

/**
* 飛入購物車，軌跡點繪制
* @author  ??
* @param {Array} start`在這里插入代碼片`Point 起點clientX, clientY值 (必要) 
* @param {Array} endPoint   終點clientX, clientY值 (必要)
* @param {number} point     點數(shù)          (必要) 
* @param {number} h         拋物線向上高度(上拋運動)  (可選)
* @param {number} hclientX  當(dāng)存在h情況下，達到最高點時候的clientX值
* @return {Array}  [ left ,top ] 值組成的數(shù)組
*/
function flycart(startPoint, endPoint, point, h = 0, hclientX) {
   /* 
   設(shè)置startPoint 為(0,0)點 , 此拋物線經(jīng)過(0,0)點 ，可以推到出模型關(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為頂點， 此時關(guān)系式 y = ax^2 
   */

   /* 參數(shù)校驗 */
   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ù)驗證 */
   if (!Validityparameter()) {
       return []
   }

   /* A點橫坐標(biāo) */
   const xA = 0
   /* A點縱坐標(biāo) */
   const yA = 0
   /* x軸偏移量 */
   const offsetX = startPoint[0]
   /* y軸偏移量 */
   const offsetY = startPoint[1]
   /* B點橫坐標(biāo) */
   const xB = endPoint[0] - offsetX
   /* B縱坐標(biāo) */
   const yB = endPoint[1] - offsetY

   /* 根據(jù)B點坐標(biāo)和最大高度h求系數(shù)a,b 參數(shù)*/
   let b = 0
   let a = 0

   /* 計算系數(shù) a ,b */
   function handerComputer() {
       if (h < 10) {
           a = yB / Math.pow(xB, 2)
       } else {
           /* 因為一般購物車的情況都是向下，實際上我們購物車的坐標(biāo)系是反向的，所以我們這里要把h 設(shè)置成負值 */
           h = -h
           /* 一元二次求解a,b ，現(xiàn)在知道一點  ( xB , yB ) 另外一點 （ maxHx，h ）  */
           /* 有效達到最高點時候的x坐標(biāo) */
           const effectMaHx = hclientX && Math.abs(hclientX - offsetX) > 0 && Math.abs(hclientX - offsetX) < Math.abs(xB)
           /* 如果hclientX不滿足要求，則選A , B 中點為   */
           let maxHx = effectMaHx ? (hclientX - offsetX) : (xB + xA) / 2
           /* 已知兩點 求 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

   /* 處理直線運動 */
   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軸直線運功    */
   if (Math.abs(xB) < 10) {
       return handerLinearMotion('X')
   }
   /*當(dāng) yB的絕對值小于10的情況，我們看作x軸直線運功  */
   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飛入購物車組件？

這里可以把這個方案和組件聯(lián)系到一起，于是乎飛入購物車組件就搞定了，這里大家要記住的點

1此方案得到的是拋物線各點的left,top值，我們只需要定時改變飛入購物車的圖片的left值 ,top就可以 2可以通過計數(shù)器功能來改變縮放比，說白了就是改變圖片transform:scale值 3不要忘記給圖片加上fixed固定定位哦:smile::smile::smile: 主要demo方法(僅供參考)：

 startCart(){
    /* 開啟購物車 */
    /* this.start 儲存起始點 clientY clientY  ,this.end儲存最終點 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)
} 

這里只做了 原生小程序飛入購物車組件 ，h5大致差別不大。

git地址如下

代碼地址https://github.com/AlienZhaolin/flycart

那么以上就是有關(guān)于：“如何使用html5實現(xiàn)小程序商品飛入購物車？”怎么實現(xiàn)這個問題的方法和代碼分享，更多有關(guān)于html5的小程序我們都可以在W3Cschool中進行學(xué)習(xí)和了解！