Introduction: Recently a friend in the process of making small programs, encountered the development of the function of flying into the shopping cart effect demand. In view of this situation some online demo, there will be some problems (bugs) do not conform to the situation, in view of this situation xiaobian decided to help friends write a solution to help solve the problem.
Think what if? Super easy!
Whether the small program or H5 flying into the shopping cart is nothing more than flat throwing, or up throwing two cases, for these two cases, junior high school began to learn parabola theory knowledge is completely able to deal with, high school freshman physics free fall movement, flat throwing movement is the specific implementation of parabola theory.
Horizontal cast movement
Up movement
Construct a virtual cartesian coordinate system and draw trajectory points with parabola
The essence of this scheme is that, according to the starting point of the shopping cart and the end point, respectively, as two points of the parabola, such a sentiment is to use the starting point as a rectangular coordinate system (0,0) to facilitate the subsequent calculation of other coordinate points. It is also important to note that if the upcast H offset is configured, the highest point (vertex) coordinates are required
This scheme is suitable for H5, small program
/** * Fly into the shopping cart, trace point draw *@author 👽
* @param {Array} Start 'Here insert the code slice' Point starting Point clientX, clientY value (necessary) *@param {Array} ClientX, clientY value (necessary) *@param {number} Point the number of points (necessary)@param {number} H Elevation of parabola (up motion) (optional) *@param {number} HclientX The clientX value * at the highest point in the presence of H@return {Array} Array of [left,top] values */
function flycart(startPoint, endPoint, point, h = 0, hclientX) {
Y = ax^2 + bx; y = ax^2 + bx; y = ax^2 + bx; The parabola is going to shift up by h on the Y-axis, and then we have the relationship y is equal to ax squared + bx 2 and then in the absence of h, the parabola startPoint is the vertex, so the relationship y is equal to ax squared */
/* Parameter verification */
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 validation */
if(! Validityparameter()) {return[]}/* A */
const xA = 0
/* A */
const yA = 0
/* The offset of the x axis */
const offsetX = startPoint[0]
/* Y offset */
const offsetY = startPoint[1]
/* B */
const xB = endPoint[0] - offsetX
/* B */
const yB = endPoint[1] - offsetY
According to the coordinates of point B and the maximum height h, calculate the coefficient a and the parameter B */
let b = 0
let a = 0
/* Calculate the coefficients a,b */
function handerComputer() {
if (h < 10) {
a = yB / Math.pow(xB, 2)}else {
/* Since the shopping cart is always down, we actually have the shopping cart frame in reverse, so we're going to set h to be negative */
h = -h
(x, x, x) */ (x, x, x) */ (x, x, x) */
/* The x-coordinate at the peak of the effective peak */
const effectMaHx = hclientX && Math.abs(hclientX - offsetX) > 0 && Math.abs(hclientX - offsetX) < Math.abs(xB)
/* If hclientX does not meet the requirements, select A, B, */
let maxHx = effectMaHx ? (hclientX - offsetX) : (xB + xA) / 2
Y = ax^2 + bx */
a = ((yB / xB) - (h / maxHx)) / (xB - maxHx)
/* Insert a into one of them to solve for b */
b = (yB - a * Math.pow(xB, 2)) / xB
}
}
/* Trace array */
const travelList = []
/* x is equally divided */
const averageX = (xB - xA) / point
/* Handle linear motion */
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
}
If the absolute value of xB is less than 10, we'll consider the work on the Y-axis */
if (Math.abs(xB) < 10) {
return handerLinearMotion('X')}If the absolute value of yB is less than 10, let's call it the work on the x-line */
if (Math.abs(yB) < 10) {
return handerLinearMotion('Y')
}
handerComputer()
/* Draw path */
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
Copy the codeThe effect
Mini program H5 fly into shopping cart component?
Here you can link the solution to the component, so that the fly into the shopping cart component is done. Here’s the point to remember
1 In this scheme, the left and top values of each point of the parabola are obtained. We only need to change the left and top values of the images flying into the shopping cart regularly
You can use the counter function to change the scale ratio. In other words, you can change the transform:scale value of the image
3 Don’t forget to add fixed positioning to the picture 😄😄😄
Main Demo methods (for reference only)
startCart(){
/* Open shopping cart */
/* this.start stores the starting point clientY clientY,this.end stores the final point 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)}Copy the codeHere we just did the native applet fly into the shopping cart component, the H5 is roughly the same.
Git address:
The code address https://github.com/AlienZhaolin/flycart
Thank you for your encouragement and support 🌹🌹🌹. If you like it, you can give me a thumbs-up and attention. Public account: Front-end Sharing