Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use html5 to achieve Mini Program goods fly into the shopping cart", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use html5 to achieve Mini Program goods fly into the shopping cart" this article.

Think if it comes true? It's super simple!

Whether it is Mini Program or H6 flying into the shopping cart is nothing more than flat throwing, or throwing up two cases, for these two cases, junior high school began to learn parabola theory knowledge is completely manageable, the first year of senior high school physics freefall movement, flat parabolic motion is the concrete realization of parabola theory.

Flat throwing motion

Upthrow motion

Construct virtual Cartesian coordinate system and draw trajectory points with parabola

The essence of this scheme is to use the starting point and the end point of the shopping cart as the two points of the parabola respectively. Such an idea is to use the starting point as the Cartesian coordinate system (0Power0) to facilitate the operation of other coordinate points. It should also be noted that if the upcast h offset is configured, the highest point (vertex) coordinates are required. This scheme is suitable for H5, Mini Program:

/ * fly into the shopping cart Track point drawing * @ author?? * @ param {Array} start` insert the code chip `Point start clientX, clientY value (necessary) * @ param {Array} endPoint end clientX, clientY value (necessary) * @ param {number} point points (necessary) * @ param {number} h parabola upward height (upthrow motion) (optional) * @ param {number} hclientX when h exists The clientX value at the highest point * @ return {Array} [left, top] is an array of * / function flycart (startPoint, endPoint, point, h = 0, hclientX) {/ * set startPoint to point (0L0). The parabola passes through the point (0L0) and can be deduced to the model relation y = ax ^ 2 + bx or y = ax ^ 2 1 when h exists. The parabola shifts h up the y axis, and the relation y = ax ^ 2 + bx 2 when h does not exist, the parabola startPoint is the vertex. At this point, the relation y = ax ^ 2 * / * parameter check * / 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 } / * Parameter verification * / if (! Validityparameter ()) {return []} / * A point Abscissa * / const xA = 0 / * A point ordinate * / const yA = 0 / * x axis offset * / const offsetX = startPoint [0] / * y axis offset * / const offsetY = startPoint [1] / * B point Abscissa * / const xB = EndPoint [0]-offsetX / * B ordinate * / const yB = endPoint [1]-offsetY / * calculate the coefficient an according to the B point coordinates and the maximum height h B parameter * / let b = 0 let a = 0 / * calculation factor 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) / * if hclientX does not meet the requirements, choose A, B midpoint is * / let maxHx = effectMaHx? (hclientX-offsetX): (xB + xA) / 2 / * two known points to find a, b value according to the solution equation y = ax ^ 2 + bx * / a = ((yB / xB)-(h / maxHx)) / (xB-maxHx) / * bring an into one of the solutions b * / b = (yB-a * Math.pow (xB) 2)) / xB}} / * trajectory array * / const travelList = [] / * x equipartition * / const averageX = (xB-xA) / point / * handle linear motion * / function handerLinearMotion (type) {if (type ='X') {const averageY = (yB-yA) / point for (let I = 1) I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.