html5小程序飞入购物车(抛物线绘制运动轨迹点)

 /** * 飞入购物车，轨迹点绘制 * @author  👽 * @param {Array} start`在这里插入代码片`Point 起点clientX, clientY值 (必要)  * @param {Array} endPoint   终点clientX, clientY值 (必要) * @param {number} point     点数          (必要)  * @param {number} h         抛物线向上高度(上抛运动)  (可选) * @param {number} hclientX  当存在h情况下，达到最高点时候的clientX值 * @return {Array}  [ left ,top ] 值组成的数组 */ function flycart(startPoint, endPoint, point, h = 0, hclientX) {    /*     设置startPoint 为(0,0)点 , 此抛物线经过(0,0)点 ，可以推到出模型关系式 y =  ax^2 + bx 或者 y = ax^ 2    1 当存在 h 的情况，抛物线会y轴向上偏移 h, 此时的关系式 y = ax^2 + bx    2 当不存在h 的情况 ，抛物线startPoint为顶点， 此时关系式 y = ax^2     */     /* 参数校验 */    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    }     /* 参数验证 */    if (!Validityparameter()) {        return []    }     /* A点横坐标 */    const xA = 0    /* A点纵坐标 */    const yA = 0    /* x轴偏移量 */    const offsetX = startPoint[0]    /* y轴偏移量 */    const offsetY = startPoint[1]    /* B点横坐标 */    const xB = endPoint[0] - offsetX    /* B纵坐标 */    const yB = endPoint[1] - offsetY     /* 根据B点坐标和最大高度h求系数a,b 参数*/    let b = 0    let a = 0     /* 计算系数 a ,b */    function handerComputer() {        if (h < 10) {            a = yB / Math.pow(xB, 2)        } else {            /* 因为一般购物车的情况都是向下，实际上我们购物车的坐标系是反向的，所以我们这里要把h 设置成负值 */            h = -h            /* 一元二次求解a,b ，现在知道一点  ( xB , yB ) 另外一点 （ maxHx，h ）  */            /* 有效达到最高点时候的x坐标 */            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值  根据解方程式解得 y = ax^2 + bx  */            a = ((yB / xB) - (h / maxHx)) / (xB - maxHx)            /* 将 a 带入其中一个求解 b */            b = (yB - a * Math.pow(xB, 2)) / xB        }    }      /* 轨迹数组 */    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    }     /* 当 xB的绝对值小于10的情况，我们看作Y轴直线运功    */    if (Math.abs(xB) < 10) {        return handerLinearMotion('X')    }    /*当 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

  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) }