h5, апплет влетает в корзину (парабола рисует точки траектории движения)

JavaScript
h5, апплет влетает в корзину (парабола рисует точки траектории движения)

Предисловие: Недавно друг столкнулся с необходимостью разработки функции залета в корзину в процессе создания небольшой программы. В ответ на эту ситуацию в некоторых онлайн-демонстрациях будут некоторые проблемы (ошибки), которые не соответствуют ситуации.В ответ на эту ситуацию редактор решил помочь другу написать решение, которое поможет решить проблему.

Думаете, что делать? Супер легко!

Будь то небольшая программа или летящий в корзину h5, это не что иное, какПлоский бросок,илибросатьЕсть два случая.Для этих двух случаев вполне возможно начать изучение теории параболы в младших классах средней школы.Движение свободного падения и плоское проекционное движение физики в первом классе средней школы являются специфической реализацией параболы теория.

плоский бросок

метательное движение

Постройте виртуальную декартову систему координат и нарисуйте точки траектории в виде параболы.

Суть этого решения состоит в том, чтобы использовать начальную точку и конечную точку корзины как две точки параболы соответственно.Такое ощущение состоит в том, чтобы использовать начальную точку как декартову систему координат (0, 0) для облегчения последующих операций над другие координатные точки. Еще один момент, который следует отметить, это то, что если настроено смещение верхнего броска h, требуются координаты самой высокой точки (вершины).

Это решение подходит для H5, апплет


/**
* 飞入购物车,轨迹点绘制
* @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

Эффект

在这里插入图片描述

апплет h5 летит в корзину компонента?

Здесь вы можете связать это решение с компонентами, чтобы вы могли сделать это, влетев в компонент корзины.Вот моменты, которые должен помнить каждый

1 Эта схема получает левое и верхнее значения каждой точки параболы Нам нужно только регулярно менять левое значение и верхнее значение картинки, летящей в корзину.

2 Коэффициент масштабирования можно изменить с помощью функции счетчика, грубо говоря, это изменение преобразования изображения: значение масштаба

3 Не забудьте добавить к картинке фиксированное местоположение😄😄😄

Основной демонстрационный метод (только для справки)

 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

Спасибо всем за вашу поддержку и поддержку